* {
    margin: 0;
    padding: 0;
}

@keyframes pop{
    0%{width:5vw;height:5vw}
    50%{width:5.5vw; height:5.5vw}
    100%{width:5vw; height:5vw}

}

@keyframes skew {
    0%{transform: rotateX(90deg);}
    100%{transform: rotateX(0deg);}
}
body {

    font-family: Georgia, 'Times New Roman', Times, serif;
}

.wrap {
    position: relative
}

.wrap:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    opacity: 0.04;
    background-image: url('bgimg.jpg');
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: cover;

}



.line {
    border-left: 0.13cm solid rgb(106, 170, 100);
    height: 100vh;
    left: 50%;
    position: absolute;
    margin-left: auto;
}

.part-a {
    display: flex;
    flex-direction: column;
    width: 50vw;
    height: 100vh;
    justify-content: center;
}

.game-container {
    display: flex;
    flex-direction: column;
    position:relative;
    justify-content: center;
    align-items: center;
}

.part-b{
    display: flex;
    width: 50vw;
    height: 100vh;
    justify-content: center;
   
}
.game-row {
    display: flex;
    flex-direction: row;
    height: 5vw;
    padding-top: 0.2cm;
}


.box{
    display: flex;
}

.game-box {
    display: flex;
    border: 1px solid rgb(200, 200, 200);
    width: 5vw;
    margin-left: 0.2cm;
    background-color: white;
    justify-content: center;
    align-items: center;
    text-align: center;
    font: 3em sans-serif;

}

.fill-box {
    display: flex;
    border: 1px solid black;
    width: 5vw;
    margin-left: 0.2cm;
    background-color: white;
    justify-content: center;
    align-items: center;
    text-align: center;
    font: 3em sans-serif;
    animation-name : pop;
    animation-duration : 0.5s;

}
.game{
    display: flex;
}

.orange-box{
    display: flex;
    border: 1px solid rgb(200, 200, 200);
    width: 5vw;
    margin-left: 0.2cm;
    background-color: rgb(201, 180, 88);
    justify-content: center;
    align-items: center;
    text-align: center;
    font: 3em sans-serif;
    color: white;

    animation-name: skew;
    animation-duration: 1s;
}

.grey-box{
    display: flex;
    border: 1px solid rgb(200, 200, 200);
    width: 5vw;
    margin-left: 0.2cm;
    background-color: gray;
    justify-content: center;
    align-items: center;
    text-align: center;
    font: 3em sans-serif;
    color: white;

    animation-name: skew;
    animation-duration: 1s;
}

.green-box{
    display: flex;
    border: 1px solid rgb(200, 200, 200);
    width: 5vw;
    margin-left: 0.2cm;
    background-color: rgb(106, 170, 100);
    justify-content: center;
    align-items: center;
    text-align: center;
    font: 3em sans-serif;
    color: white;

    animation-name: skew;
    animation-duration: 1s; 
}



.keyboard{
    display: flex;
    flex-direction: column;
    justify-content: center;
   
    
}
.row{
    display:flex;
    flex-direction: row;
    justify-content: center;
    padding-bottom: 0.5vh;
}

.keyboard-container{
    display: flex;
    flex-direction: column;
    margin-top: 2vh;
}

.key{
    height : 8vh;
    width: 6vh;
    background-color: rgb(211,  214, 218);
    margin-right: 0.5vh;
    border-color: rgb(150, 150, 150);
    color: black;
    border-style: solid;
    border-radius: 5px;
}

.green-key{
    height : 8vh;
    width: 6vh;
    background-color: rgb(106, 170, 100);
    margin-right: 0.5vh;
    border-color: rgb(150, 150, 150);
    color: white;
    border-style: solid;
    border-radius: 5px;
}

.grey-key{
    height : 8vh;
    width: 6vh;
    background-color: gray;
    margin-right: 0.5vh;
    border-color: rgb(150, 150, 150);
    color: white;
    border-style: solid;
    border-radius: 5px;
}

.orange-key{
    height : 8vh;
    width: 6vh;
    background-color: rgb(201, 180, 88);
    margin-right: 0.5vh;
    border-color: rgb(150, 150, 150);
    color: white;
    border-style: solid;
    border-radius: 5px;
}