html{
position:abosolute;
display:block;
width:100%;
height:100%;
}

body{
position:relative;
display:block;
width:100%;
height:100%;
overflow-x:hidden;
overflow-y:hidden;
margin:0px;
}
.game{
position:absolute;
display:block;
width:100%;
background:white;
height:max-content;
}
h1{
position:relative;
display:block;
width:100%;
font-size:30pt;
font-weight:bold;
text-align:center;
text-transform:uppercase;
color:#5fbbd9;
text-shadow:1px 1px 2px black;
}

#instructions{
position:relative;
display:block;
text-align:center;
font-size:20pt;
font-weight:bold;
}
.clue{
       position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    color: white;
font-weight:bold;
text-transform:uppercase;
    text-shadow: 2px 2px 2px black;
    width: max-content;
    text-align: center;
    padding: 20px;
    background: linear-gradient(to bottom, #b2f2bb 0%, #a4ffb0 100%);
    border-radius: 12px;
    box-shadow: inset 15px 8px 11px rgb(45 90 56 / 27%), inset 5px 20px 10px rgb(63 206 77 / 36%), 0 10px 20px rgb(0 0 0 / 76%);
    transform: perspective(800px) rotateX(3deg);
}

#answerInput{
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
}

#answerBtn{
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
}

.game-clone0{
position:absolute;
display:block;
width:100%;
height:max-content;
background:lightgreen;
 clip-path: polygon(49% 59%, 61% 86%, 100% 100%, 0 100%);
animation:1s forwards linear bust0;
transform-origin:50% 100%;
transform:perspective(800px);
}
.game-clone1{
position:absolute;
display:block;
width:100%;
height:max-content;
background:lightblue;
clip-path: polygon(49% 59%, 42% 38%, 0 0, 0 100%);
animation:1s forwards linear bust1;
transform-origin:0% 0%;
transform:perspective(800px);
}
.game-clone2{
position:absolute;
display:block;
width:100%;
height:max-content;
background:lightgrey;
clip-path: polygon(49% 59%, 42% 38%, 0 0, 100% 0);
animation:2s forwards linear bust2;
transform-origin:50% 0%;
transform:perspective(800px);
}
.game-clone3{
position:absolute;
display:block;
width:100%;
height:max-content;
background:white;
clip-path: polygon(49% 59%, 52% 86%, 100% 100%, 100% 0);
transform-origin:100% 50%;
animation:1s forwards linear bust3;

//transform:perspective(800px);
}

@keyframes bust0{
0%{transform:translateY(0px)rotateX(0deg)rotateY(0deg)translateZ(0px);opacity:1}
50%{transform:translateY(450px)rotateX(-180deg)rotateY(150deg)translateZ(500px);opacity:1}
100%{transform:translateY(900px)rotateX(-360deg)rotateY(300deg)translateZ(1000px);opacity:0}
}
@keyframes bust1{
0%{transform:translateY(0px)rotateX(0deg)rotateY(0deg)translateZ(0px);opacity:1}
50%{transform:translateY(-450px)rotateX(-45deg)rotateY(10deg)translateZ(500px);opacity:1}
100%{transform:translateY(-900px)rotateX(-90deg)rotateY(20deg)translateZ(1000px);opacity:0}
}
@keyframes bust2{
0%{transform:translateY(0px)rotateX(0deg)rotateY(0deg)translateZ(0px)rotateZ(0deg);opacity:1}
20%{transform:translateY(0px)rotateX(0deg)rotateY(0deg)translateZ(0px);opacity:1}
40%{transform:translateY(0px)rotateX(0deg)rotateY(0deg)translateZ(0px);opacity:1}
60%{transform:translateY(0px)rotateX(0deg)rotateY(0deg)translateZ(0px);opacity:1}
80%{transform:translateY(1000px)rotateX(0deg)rotateY(0deg)translateZ(0px)rotateZ(45deg);opacity:1}
100%{transform:translateY(2000px)rotateX(0deg)rotateY(0deg)translateZ(0px)rotateZ(80deg);opacity:0}
}
@keyframes bust3{
0%{transform:rotateX(0deg)rotateY(0deg)translateZ(0px)translateX(0px);opacity:1}
50%{transform:rotateX(30deg)rotateY(-180deg)translateZ(0px)translateX(200px);opacity:1}
100%{transform:rotateX(105deg)rotateY(-360deg)translateZ(0px)translateX(400px);opacity:0}
}