/*--Initial------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@font-face{
    font-family:"Main Font";
    src:url("../Assets/main\ font.ttf");
}
:root{
    --accent-color-l:rgb(225,0,185);
    --accent-color-d:rgb(185,0,145);
    --base-color-l:rgb(255,255,255);
    --base-color-d:rgb(240,240,240);
    --border-color:rgb(145,0,105);
}

body{
    background-color:rgb(0,0,0);
    height:100vh;
    padding:0px;
    width:0px;

    font-family:"Main Font";
    user-select:none;
    overflow:hidden;
}
.screen{
    background-color:rgb(200,200,200);
    position:absolute;
    height:100%;
    width:100%;
    z-index:1;
    left:0px;
    top:0px;
}
.screen-background{
    background-image:url("../Assets/Images/background\ cloud.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;

    position:absolute;
    height:100%;
    width:100%;
    left:0px;
    top:0px;
}
.mask{
    background-color:rgb(0,0,0,0.35);
    position:absolute;
    display:none;
    height:100%;
    width:100%;
    z-index:1;
    left:0px;
    top:0px;
}
.loading-text{
    transform:translate(-50%,-50%);
    font-size:min(5vh,5vw);
    color:rgb(0,0,0);
    left:50%;
    top:70%;

    justify-content:center;
    align-items:center;
    text-align:center;
    position:absolute;
    font-weight:bold;
    display:none;
}
#loading-screen{
    z-index:2;
}

/*--Window-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.window{
    box-shadow:min(0.5vh,0.5vw) min(0.5vh,0.5vw) min(1vh,1vw) rgba(0,0,0,0.5);
    background-color:var(--base-color-l);
    border:2px solid var(--border-color);
    transform:translate(-50%,-50%);
    border-radius:min(2vh,2vw);
    height:min(50vh,50vw);
    width:min(45vh,45vw);
    padding:min(2vh,2vw);
    position:absolute;
    overflow:hidden;
    left:50%;
    top:50%;
}
.window-head{
    width:calc(100% - min(0.4vh,0.4vw));
    padding-bottom:min(2vh,2vw);
    font-size:min(5vh,5vw);
    height:min(10vh,10vw);
    color:rgb(0,0,0);
    left:0px;
    top:0px;

    border-right:min(0.25vh,0.25vw) solid var(--accent-color-d);
    border-left:min(0.25vh,0.25vw) solid var(--accent-color-l);
    border-top:min(0.25vh,0.25vw) solid var(--accent-color-l);
    border-top-right-radius:min(1.5vh,1.5vw);
    border-top-left-radius:min(1.5vh,1.5vw);
   
    justify-content:center;
    align-items:center;
    position:absolute;
    display:flex;
}
.window-body{
    position:absolute;
    height:calc(100% - min(19.5vh,19.5vw));
    width:calc(100% - min(0.4vh,0.4vw));
    top:min(12vh,12vw);
    left:0px;

    border-right:min(0.25vh,0.25vw) solid var(--accent-color-d);
    border-left:min(0.25vh,0.25vw) solid var(--accent-color-l);
}
.window-foot{
    position:absolute;
    width:calc(100% - min(0.4vh,0.4vw));
    top:calc(100% - min(7.5vh,7.5vw));
    padding-bottom:min(1.5vh,1.5vw);
    height:min(5.8vh,5.8vw);
    left:0px;

    border-bottom:min(0.25vh,0.25vw) solid var(--accent-color-d);
    border-right:min(0.25vh,0.25vw) solid var(--accent-color-d);
    border-left:min(0.25vh,0.25vw) solid var(--accent-color-l);

    border-bottom-right-radius:min(1.5vh,1.5vw);
    border-bottom-left-radius:min(1.5vh,1.5vw);

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

/*--Range--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
input[type=range]{
    -webkit-appearance:none;
    background:transparent;
    appearance:none;
    width:100%;
}
input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;
}
input[type=range]:focus{
    outline:none;
}
  
input[type=range]::-webkit-slider-thumb{
    margin-top:calc(-1 * min(1.5vh,1.5vw) - 2px);
    border:2px solid var(--border-color);
    border-radius:min(0.5vh,0.5vw);
    background:rgb(255,255,255);
    -webkit-appearance:none;
    height:min(4vh,4vw);
    width:min(2vh,2vw);
    cursor:pointer;
}
input[type=range]::-moz-range-thumb{
    border:2px solid var(--border-color);
    border-radius:min(0.5vh,0.5vw);
    background:rgb(255,255,255);
    height:min(4vh,4vw);
    width:min(2vh,2vw);
    cursor:pointer;
}

input[type=range]::-webkit-slider-runnable-track{
    border:2px solid var(--border-color);
    border-radius:min(0.25vh,0.25vw);
    background:var(--accent-color-d);
    height:min(1vh,1vw);
    cursor:pointer;
    width:100%;
} 
input[type=range]::-moz-range-track{
    border:2px solid var(--border-color);
    border-radius:min(0.25vh,0.25vw);
    background:var(--accent-color-d);
    height:min(1vh,1vw);
    cursor:pointer;
    width:100%;
}

/*--Menu UI------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
button{
    transform:translateY(0px);
    font-family:"Main Font";
    position:absolute;
    cursor:pointer;
    outline:none;
    border:none;
}
button:hover{
    transform:translateY(-1px);
}
button:active{
    transform:translateY(1px);
}
button:disabled{
    cursor:default;
    opacity:0.5;
}
button:disabled:hover{
    transform:translateY(0px);
}
button:disabled:active{
    transform:translateY(0px);
}
.main-button{
    background-color:var(--accent-color-d);
    border:2px solid var(--border-color);
    border-radius:min(1.25vh,1.25vw);
    width:min(20vh,20vw);
    height:min(6vh,6vw);
    position:absolute;
    overflow:hidden;
}
.main-button-body{
    border-bottom:min(0.25vh,0.25vw) solid var(--accent-color-d);
    border-right:min(0.25vh,0.25vw) solid var(--accent-color-d);
    border-left:min(0.25vh,0.25vw) solid var(--accent-color-l);
    border-top:min(0.25vh,0.25vw) solid var(--accent-color-l);
    background-color:var(--base-color-l);

    justify-content:center;
    align-items:center;
    white-space:nowrap;
    position:absolute;
    display:flex;  

    width:calc(min(19.25vh,19.25vw) - 1px);
    height:calc(min(5.25vh,5.25vw) - 1px);
    border-radius:min(1vh,1vw);
    font-size:min(3vh,3vw);
    color:rgb(0,0,0);
    left:0px;
    top:0px;
}

.input-title{
    text-shadow:min(0.25vh,0.25vw) min(0.25vh,0.25vw) rgb(135,60,20);
    color:rgb(255,255,255);
    font-size:min(3vh,3vw);
    height:min(5vh,5vw);
    margin-left:12%;
    width:76%;

    -webkit-text-stroke:1px;
    -webkit-text-stroke-color:rgb(135,60,20);

    justify-content:flex-start;
    align-items:flex-end;
    font-weight:bold;
    display:flex;
}
.login-image{
    animation:loginImageShift ease-in-out infinite 2s;
    background-image:url("../Assets/Images/UI/wave.gif");
    background-position:center bottom;
    background-repeat:no-repeat;
    background-size:contain;
    position:absolute;
 
    bottom:calc(-1 * min(1.5vh,1.5vw));
    transform-origin:50% 100%;
    height:min(75vh,75vw);
    width:min(75vh,75vw);
    right:0px;
}

#login-window{
    left:30%;
    width:min(35vh,35vw);
}
#log-in-button-1{
    left:calc(50% - min(10vh,10vw));
    bottom:min(9vh,9vw);
}
#log-in-button-2{
    left:calc(50% - min(10vh,10vw));
    bottom:min(2vh,2vw);
}
#start-game{
    left:calc(50% - min(10vh,10vw));
    top:min(1vh,1vw);
}
#tutorial{
    left:calc(50% - min(10vh,10vw));
    top:min(8vh,8vw);
}
#log-out{
    left:calc(50% - min(10vh,10vw));
    top:min(15vh,15vw);
}

.main-menu-head{
    background-color:var(--base-color-l);
    height:min(2vh,2vw);
}
.main-menu-body{
    background-color:var(--base-color-l);
    height:min(13vh,13vw);
    top:min(2vh,2vw);
}
.main-menu-foot{
    background-color:var(--base-color-l);
    height:min(2.12vh,2.12vw);
    top:min(15vh,15vw);
}
#main-menu{
    background-color:var(--accent-color-d);
    height:min(14.9vh,14.9vw);
    width:min(24vh,24vw);
    left:50%;
    top:75%;
}
.logo{
    background-image:url("../Assets/Images/Better\ Places\ Logo.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;

    position:absolute;
    height:40%;
    width:100%;
    left:0px;
    top:15%;
}
.start-screen-text{
    font-size:min(5vh,5vw);
    height:min(5vh,5vw);
    color:rgb(0,0,0);
    width:100%;
    left:0px;
    top:5%;
  

    justify-content:center;
    align-items:center;
    position:absolute;
    font-weight:bold;
    display:flex;
}

input[type=text]{
    font-family:"Main Font";
    border-radius:min(1vh,1vw);
    transform:translate(-50%);
    font-size:min(2vh,2vw);
    width:min(30vh,30vw);
    height:min(3vh,3vw);
    color:rgb(0,0,0);
    margin-left:50%;
    
    border:2px solid var(--border-color);
    background:var(--base-color-l);
    border-radius:min(0.5vh,0.5vw);
    outline:none;
}
input[type=password]{
    font-family:"Main Font";
    border-radius:min(1vh,1vw);
    transform:translate(-50%);
    color:rgb(255,255,255);
    font-size:min(2vh,2vw);
    width:min(30vh,30vw);
    height:min(3vh,3vw);
    margin-left:50%;

    border:2px solid rgb(135,60,20);
    border-radius:min(0.5vh,0.5vw);
    background:rgb(195,120,80);
    outline:none;
}

/*--Settings-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.settings-row{
    width:calc(100% - min(4vh,4vw));
    padding-left:min(2vh,2vw);
    height:min(7vh,7vw);
   
    justify-content:flex-start;
    align-items:center;
    display:flex;
}
.settings-text{
    font-size:min(2.5vh,2.5vw);
    color:rgb(0,0,0);
    height:100%;
    width:55%;

    justify-content:flex-start;
    align-items:center;
    display:flex;
}
.settings-value{
    justify-content:center;
    align-items:center;
    display:flex;

    height:100%;
    width:45%;
}  
#settings-button{
    z-index:1;
}
#settings{
    height:min(57vh,57vw);
}