::-webkit-scrollbar{width:19px;height:19px;}
::-webkit-scrollbar-thumb{border:5px solid transparent;box-shadow:inset 0 0 6px 6px #457;border-radius:9px;}
::-webkit-scrollbar-track{box-shadow:inset 0 0 1px 1px #777;border:9px solid #00000000;}
html{overflow:hidden;}
body{
  position:fixed;
  left:0;top:0;
  height:100%;width:100%;
  background:#236;
  background-image:url("보충수업부.webp");
  background-size:20vw;
  animation: move_bg 5s linear infinite;
  font-family:"경기천년체";
  user-select:none;
  touch-action:none;
  overflow:hidden;
}
@keyframes move_bg{
  0%{background-position: 0px 0px;}
  100%{background-position: 20vw 20vw;}
}
.blind{position:fixed;opacity:0;visibility:hidden;background:#11111188;left:0;top:0;right:0;bottom:0;transition:all .3s;z-index:1;}
@supports(backdrop-filter:none){
  .blind{backdrop-filter:blur(3px);}
}
input[type="checkbox"]{display:none;}
button{font-family:"경기천년체";border:0;border-radius:5px;transform:skewX(-15deg);transition:.3s;padding:8px 20px;}
button div{transform:skewX(15deg);}
button:active{transform:skewX(-15deg)scale(.9)!important;}
#game{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);aspect-ratio:1/1;overflow:hidden;}

#canvas{position:absolute;background-image:url(bg.webp);background-position:center;background-size:cover;width:100%}
@media(orientation:portrait){
  #game{width:100%}
}
@media(orientation:landscape){
  #game{height:100%}
}


#set+label{position:absolute;width:100px;background:#457;left:-20px;top:8px;border-radius:5px;display:flex;align-items:center;transform:skewX(-15deg);z-index:10;}
#set+label+div{z-index:9;}
#set+label+div+div{position:fixed;background:#eef;width:calc(100% - 30px);height:60%;left:calc(-100%);top:80px;border-radius:5px;z-index:9;transition:.3s;padding:8px;box-sizing:border-box;overflow-y:scroll;}

#set+label>svg{position:relative;transition:.3s;transform:skewX(15deg);height:50px;right:-30px;}
#set:checked+label>svg{transform:skewX(15deg)rotate(1turn);}
#set:checked+label+div{opacity:1;visibility:visible;}
#set:checked+label+div+div{left:15px}

.volume{display:flex;height:50px;align-items: center;}
.volume span{font-size:1rem;}
.volume video{width:40px;display:none;}

.Toggle+label{position:relative;display:inline-flex;border:2px solid #39f;border-radius:1rem;width:2rem;height:1rem;align-items:center;transition:all .2s ease-in;cursor:pointer;}
.Toggle+label div{position:absolute;display:inline-block;background:#39f;border-radius:100%;left:0;width:.8rem;height:.8rem;margin:2px;transition:all .2s ease-in;}
.Toggle:checked+label{background:#39f;}
.Toggle:checked+label div{background:#fff;left:1rem;}

#home+div{position:fixed;display:flex;left:0;top:0;right:0;bottom:0;justify-content:center;align-items:center;pointer-events:none;}
#title{position:absolute;left:50%;top:20px;transform:translateX(-50%);width:70%;}
#start{position:absolute;display:flex;background:#49f;top:70%;font-size:1.5rem;width:100px;aspect-ratio:2/1;justify-content:center;align-items:center;pointer-events:all;}
#start:active{background:#4290ef;}


#play+div{position:fixed;left:0;top:0;width:100%;}
#score_{position:absolute;left:20px;top:10px;}
#pause{position:absolute;right:20px;top:20px;padding:4px 6px}
#pause div{display:flex;}
#pause div>svg{height:1.4rem;}

#game_over+div,#stop+div{display:flex;align-items:center;justify-content:center;color:#e41;font-size:0;flex-direction:column;}
#game_over+div>span button,#stop+div>span button{font-size:1.2rem;background:#fe5;margin:8px;}
#game_over:checked+div,#stop+div{font-size:1rem;}
#score_show{display:flex;}
#maxscore_show{height:1rem;}

input[name="page"]+div{display:none;position:fixed;opacity:0;visibility:hidden;pointer-events:none;}
input[name="page"]:checked+div{display:block;opacity:1;visibility:visible;pointer-events:all}