@charset "UTF-8";

body{
margin:0;
padding: 0;
background-color: rgb(255, 0, 221);


}
.box{
width: 50vw;
height: 33.3vh;
background-color: rgb(0, 0, 0);

transition-property: width;
transition-duration:0.1s ;
transition-timing-function: ease-in-out;
transition-delay:0s ;

}

.box:hover{
width: 25vw;
height: 33.3vh;
background-color: rgb(39, 47, 47);
font: 1em sans-serif;
color:#ffffff;
font-size:25vw;
text-align: center;
}

.box-four{
width: 50vw;
height: 33.3vh;
background-color: rgb(0, 0, 0);
position: absolute;
top: 0;
right: 0;
transition-property: width;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}

.box-four:hover{
width: 25vw;
height: 33.3vh;
background-color: rgb(39, 47, 47);
font: 1em sans-serif;
color:#ffffff;
font-size:25vw;
text-align: center;
}

.box-one {
    width:50vw;
    height:33.3vh;
    background-color: rgb(0, 0, 0);
    position: absolute;
    top: 33.3vh;
    margin-top: 0;
    transition-property: transform;
    transition-duration:0.5s ;
    transition-timing-function: ease-in-out;
    transition-delay:0s ;
    z-index: -1;
}

.box-one:hover {
    transform: rotate(135deg);
    background-color: rgb(39, 47, 47);
    font: 1em sans-serif;
color:#ffffff;
font-size:25vw;
text-align: center;
}
.box-five{
    width:50vw;
    height:33.3vh;
    background-color: rgb(0, 0, 0);
    position: absolute;
    top: 33.3vh;
    right:0;
    transition-property: transform;
    transition-duration:0.5s ;
    transition-timing-function: ease-in-out;
    transition-delay:0s ;
    z-index: -1;
    white-space: normal; 
    overflow-wrap: break-word; 
}

.box-five:hover {
    transform: rotate(135deg);
    background-color: rgb(39, 47, 47);
    font: 1em sans-serif;
color:#ffffff;
font-size:25vw;
text-align: center;
}

.box-three {
    width: 25vw;
    height: 25vw;
    background-color: #ffffff;
    position: absolute;
    top: 25vh;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0;
    transition-property: transform;
    transition-duration: 0.1s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
     
}

.box-three:hover {
    transform: rotate(-135deg);
    
}
.box-seven {
    width: 200px;
    height: 200px;
    background-color: #ffffff;
    position: absolute;
    top: 400px;
    left: 50%;
    transform: translate(50%, 50%);
    margin-top: 0;
    transition-property: transform;
    transition-duration: 0.1s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
    animation-name: moveX, moveY;
    animation-duration: 3s, 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    z-index: 49;
}

.box-seven:hover {
    transform: rotate(135deg);
    
} 

.container {
    position:relative;
    width: 100%;
    height:100%;
 }

 @keyframes moveX {
   
    from {
        left: 0;
    }
    to {
       
        left: calc(100% - 80px);}
    }
    @keyframes moveY {
   
    from {
        top: 0
    ;
    }
    to {
      
        top: calc(100% - 100px); 
    }}

.box-two {
    width:50vw;
    height:33.3vh;
    background-color: rgb(0, 0, 0);
    position: absolute;
    top: 66.6vh;
    margin-top: 0;
    transition-property: transform;
    transition-duration:0.1s ;
    transition-timing-function: ease-in-out;
    transition-delay:0s ;
    overflow: hidden;
}

.box-two:hover {
    transform: scale(2);
    background-color: rgb(39, 47, 47);
    font: 1em sans-serif;
color:#ffffff;
font-size:25vw;
text-align: center;
overflow: hidden;
}
.box-six {
    width:50vw;
    height:33.3vh;
    background-color: rgb(0, 0, 0);
    position: absolute;
    top: 66.6vh;
    right:0;
    transition-property: transform;
    transition-duration:0.1s ;
    transition-timing-function: ease-in-out;
    transition-delay:0s ;
    overflow: hidden;
}

.box-six:hover {
    transform: scale(2);
    background-color: rgb(39, 47, 47);font: 1em sans-serif;
color:#ffffff;
font-size:25vw;
text-align: center;
overflow: hidden;
}