:root {
    --end-deg: 360deg;
}

html { min-height: 100%; margin:0px; padding:0px; position: relative; }

body {COLOR: white; height: 100%; background: url(background.png) repeat, linear-gradient(45deg, #e6400b, #f38b07); text-align: center; padding: 0px; }

#mainblock {

position: absolute;
width: 90%;
max-width: 1000px;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);

}

#layer1 {

display: block;
position: relative;
margin: 0px auto 40px auto;
width: calc(100% - 40px);
max-width: 500px;
aspect-ratio: 1;
box-sizing: border-box;
background-image: url(layer1.png);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
overflow: hidden;

}

#layer2 {

display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 0px;
padding-top: 100%;
overflow: hidden;
background-image: url(layer2.png);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
animation: rotating 5s ease-out 1;
animation-play-state: paused;


}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(var(--end-deg));
  }
}




#layer3 {

display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 0px;
padding-top: 100%;
overflow: hidden;
background-image: url(layer3.png);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;



}

a.close { display: block; position: absolute; top: 10px; right: 10px; color: yellow; font-size: 15px; text-decoration: none; text-shadow: 2px 2px 5px black;" }


#layer1 img, #layer2 img, #layer3 img { width: 100%; position: absolute; top: 0px; left: 0px; }

#h1 {

display: block;
margin: 0px auto 40px auto;
width: calc(100% - 40px);
max-width: 973px;

}

#buttons {

width: 100%;
margin: 0px auto;
box-sizing: border-box;
position: relative;

}

#button {

width: calc(66% - 20px);
max-width: 200px;
filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));

}

#question {

position: absolute;
left: 0px;
top: 0px;
width: 15%;
max-width: 88px;
filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));


}
