img. {
    width: 1000px;
}

body {
    background-color: black;
}

* {
    box-sizing: border-box;
}
  
.board {
	display: grid;
	grid-template-columns: 33vmin 33vmin 33vmin 33vmin 33vmin 33vmin;
    grid-template-rows: 33vmin 33vmin 33vmin 33vmin 33vmin 33vmin 33vmin 33vmin 33vmin;
}

.box {
	
	
	display: flex;
	justify-content: center;
	align-items: center;
    padding: 1vh;
	
    color:black;

    
}

.A {
	
    
	grid-row-start: 1;
	grid-row-end: 1;
	grid-column-start: 1;
	grid-column-end: 5;

    padding: 50px;
    transition: transform .2s;
    width: 1000px;
    height: 350px;
    margin: 0 auto;
}

.A:hover {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Safari 3-8 */
    transform: scale(1.5); 
}

.B {	
	
	grid-row-start: 2;
	grid-row-end: 4;
	grid-column-start: 1;
	grid-column-end: 3;
   
     
}      

.B:hover {
    animation: floresta 5s linear infinite;
}

@keyframes floresta {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }



}

.C {	
	
	
	grid-row-start: 2;
	grid-row-end: 4;
	grid-column-start: 3;
	grid-column-end: 5;
    flex-direction: column;
    
}

.D {	
	
	
    grid-row-start: 4;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: 5;
    animation-name: b
}

.D:hover{
position: relative;
  -webkit-animation-name: mymove; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 5s; /* Safari 4.0 - 8.0 */
  animation-name: mymove;
  animation-duration: 5s;

}

@keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
 }
  
  @keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
}
.E {	

	
    grid-row-start: 5;
    grid-row-end: 7;
    grid-column-start:1;
	grid-column-end:3 ;
}

.E:hover {
    animation: antes 5s linear infinite;
}

@keyframes antes {
    0% {
        transform: rotatex(0deg)
    }
    100% {
        transform: rotatex(360deg)
    }



}



.F {
	
	
	
	grid-row-start: 5;
    grid-row-end: 7;
    grid-column-start: 3;
    grid-column-end: 5;

}

.F:hover {
    animation: depois 5s linear infinite;
}

@keyframes depois {
    0% {
        transform: rotatex(0deg)
    }
    100% {
        transform:rotateY(360deg)
    }



}



.G {
    
	
	grid-row-start: 7;
    grid-row-end: 9;
    grid-column-start: 1;
	grid-column-end: 5;

}
 
.fonte1 {
    
    flex-direction: column;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    text-align: left;
    vertical-align: 0;
    top:0;
    position: relative;
    margin-left: 100px;
    margin-right: 100px;
    font-size: 20px;
   

    

}

.fonte0 {
    
    flex-direction: column;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    text-align: left;
    vertical-align: 0;
    top:0;
    position: relative;
    margin-left: 100px;
    margin-right: 100px;
    font-size: 40px;
   
    
    

}

.fonte0:hover {
    background-color: red;
}

.H {
    align-content: center;
}



.fonte2 {
    
    flex-direction: column;
    
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    text-align: left;
    vertical-align: 0;
    top:0;
    position: relative;
    margin-left: 100px;
    margin-right: 100px;
    font-size: 40px;
   

}

.fonte2:hover {
    background-color: red;
    text-decoration: gold;
}