main.css

* {
    outline: 0; 
    font-family: 'Noto Sans KR', sans-serif; 
}

html{
    width: 100%;
    height: 99.9%;
    background-color: #000000;
    margin: 0;
    padding: 0;

    overflow: hidden;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    position: fixed;
    user-select:none;
    overflow: hidden;
}

#container {
    top:0;
    left:0;
    width:100%;
    height:100%;
    position:absolute;
}

#stage {
    width:100%;
    height:100%;
    position:absolute;
    z-index: 1;
    touch-action: none;
}

#top_bar{
    position: relative;
    z-index: 2;
    padding: 3vmin;
    height: 5%;
    pointer-events:none;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

#title{
    font-size: 3vh;
    color: #FFFFFF;
    margin: 0;
}

#options_button{
    margin: 0;
    height: 100%;
    width: 20%;

    line-height: 100%;
    
    font-size: 3vh;
    font-weight: 300;
    color: #FFFFFF;
    background-color: rgba(100,100,100, 0.7);
    backdrop-filter: blur(10px);
    border: 0px;
    border-radius: 5px;

    pointer-events: all;
    transition: all 0.1s;
}
#options_button:active{
    background-color: rgba(50,50,50, 0.7);
}

#fps_counter{
    color: #FFFFFF;
    font-size: 2vh;
    text-align: center;
    vertical-align: middle;
    
    visibility: hidden;
}
#fps_counter.visible{
    visibility: visible;
}

#bottom_bar{
    position: absolute;
    z-index: 4;
    height: 7%;
    width: 92%;
    pointer-events:none;
    padding: 0 4%;
    top: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: top 600ms cubic-bezier(0.86, 0, 0.07, 1);
}
#bottom_bar.up{
    top: 30%;
}
.bottom_arrow{
    height: 100%;
    opacity: 0.9;
    pointer-events: all;
    transition: height 50ms;
}
.bottom_arrow.invisible{
    opacity: 0;
    visibility: hidden;
}
.bottom_arrow:active{
    height: 110%;
}

#bottom_bar_left_msg{
    color: #FFFFFF;
    font-weight: 300;
    font-size: 3.5vmin;
    text-align: left;
    width: 100%;
}
#bottom_bar_right_msg{
    color: #FFFFFF;
    font-weight: 300;
    font-size: 3.5vmin;
    text-align: right;
    width: 100%;
}

/* ~~~~~~스플래시 화면~~~~~~ */
#splash{
    background-color: rgba(0,0,0, 0.8);
    backdrop-filter: blur(10px);
    color: #FFFFFF;
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    z-index: 5;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    opacity: 1;
    transition-duration: 1s;
    transition-property: opacity, visibility;
}

#splash.invisible{
    visibility: hidden;
    opacity: 0;
}

#splash_text{
    color: #FFFFFF;
    
    font-family: "Noto Sans KR" sans-serif;
    font-size: 7vmin;
    font-weight:500;
    margin: 1%;

    transition-duration: 1s;
    transition-property: font-size, opacity;
}

#splash_text.move{
    font-size: 5vmin;
}

#myProgress {
    width: 50vmin;
    height: 4vmin;
    background-color: rgb(128, 128, 128);

    
    transition-duration: 1s;
    transition-property: width, height;
}
  
#myBar {
    width: 0%;
    height: 100%;
    background-color: rgb(0, 128, 0);
    
    transition: width 0.2s linear;
}

#myProgress.move{
    width: 35vmin;
    height: 3vmin;
}


/* ~~~~~~~~~~~~~~~~~~~~설정 화면~~~~~~~~~~~~~~~~~~~~ */

#options{
    background-color: rgba(50,50,50, 0.8);
    backdrop-filter: blur(20px);
    color: #FFFFFF;
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    z-index: 5;

    display: flex;
    justify-content: center;

    opacity: 0;
    transition-duration: 0.3s;
    transition-property: opacity, padding;
    visibility: hidden;
}
#options.show{
    visibility:visible;
    opacity: 1;
}

#options_box{
    width: 50%;
    transition-duration: 1s;
    transition-property: width;
}

#options_header {
    height: fit-content;

    display: flex;
    justify-content: space-between;
    align-items: center;

    margin: 2vmin;
}

#options h1{
    margin: 0;
    font-size: 48px;
    font-weight: 600;
    transition: all 1s;
}

#options_close{
    margin: 0;
    height: 42px;
    transition: all 1s;
}

.options_item{
    background-color: rgba(70,70,70, 0.8);
    width : 96%;
    height: fit-content;
    margin: 2vmin;

    display: flex;
    justify-content:space-around;
    align-items: center;
    text-align: center;

    flex-wrap: wrap;
    
    font-size: 150%;

    border-radius: 20px;

    transition: all 1s;
}

.options_text{
    width: 40%;
    margin: 0;
    padding: 2.5%;
}

.options_input{
    width: 50%;
    padding: 1vh 0;
}

#options_date{
    border: 0;
    border-radius: 20px;
    padding: 5%;
    max-width: fit-content;
    font-size: 1rem;
}

#options_date_set_button{
    border: 0;
    border-radius: 20px;
    padding: 5%;
    
    font-size: 1rem;
}

#options_FPS_enable{
    height: 3vh;
}

#options_fullscreen_enable{
    height: 3vh;
}

#options_simulate_speed{
    width: 70%;
    margin: 24px 0;
}

#options_footer {
    text-align: center;
    word-break: keep-all;
}

.attribution{
    color: #FFFFFF;
}

@media (max-width: 1000px) {
	#options_box{  width: 90%; }
    #options h1{
        font-size: 36px;
    }
    #options_close{
        height: 32px;
    }
    .options_item{  
        font-size: 100%;
    }
}