style.css

#game-window{ /*Do not change position*/
    background-color: white;
    box-shadow: 0vh 0vh 1vh 0.1vh gray;
    position: absolute;
}
body{
    overflow: hidden;
    user-select: none;
    user-zoom: none;
    background: lightgray;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
button{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
input{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
/*HOME PAGE*/
#homepage{
    display: grid;
    grid-template-rows: 20% 70%;
    width: 100%;
    text-align: center;
    height: 100%;
    padding-top: 5%;
    padding-bottom: 5%;
}
.gametitle{
    box-shadow: 2px 2px 10px 2px gray;
    display: block;
    margin: auto;
    height: 80%;
    width: 70%;
    font-size: 5vmax;
    font-weight: bolder;
    background-color: white;
    border: none;
}

.btngroups{
    display: grid;
    grid-template-rows: 50% 50%;
    margin-top: 40vh;
}
.btn{
    font-size: 4vmax;
    box-shadow: 2px 2px 10px 2px gray;
    width: 70%;
    display: block;
    margin:auto;
    height: 80%;
    background: white;
    border: none;
    cursor: pointer;
}
.btn:active{
    box-shadow: none;
    translate: 0px 2px;
}

#playwithbotloginpage2{
    display: grid;
    grid-template-rows: 10% 90%;
    width: 100%;
    height: 100%;
}
.topnavbar{
    display: grid;
    grid-template-columns: 20% auto;
    width: 100%;
    height: 100%;
}
.navback{
    margin-top: 2vh;
    margin-left: 2vw;
    background: white;
    border: none;
    cursor: pointer;
    font-size: 4vmax;
    box-shadow: 1px 1px 5px 1px gray;
}
.navback:active{
    box-shadow: none;
    translate: 0px 2px;
}

.blanknav{

}
.botloginform{
    width: 100%;
    height: 80%;
    padding-top: 10%;
    margin: auto;
    display: grid;
    grid-template-rows: 33% 33% 33%;
}
.botinput{
    width: 70%;
    height: 50%;
    margin: auto;
    background: white;
    border: none;
    cursor: text;
    font-size: 4vmax;
    box-shadow: 2px 2px 10px 2px gray;
    padding-left: 5%;
    outline: none;
}
.botbtn{
    width: 70%;
    height: 50%;
    margin:auto;
    background: white;
    border: none;
    cursor: pointer;
    font-size: 2vmax;
    box-shadow: 2px 2px 10px 2px gray;
    }
.botbtn:active{
    box-shadow: none;
    translate: 0px 2px;
}
#botlnbtn2{
    text-align: left;
    padding-left: 5%;
}
.selectbotform{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: transparent;
    backdrop-filter: blur(2px);
}
.selectbotwin{
    width: 80vmin;
    height: 80vmin;
    margin-top: 10vmin;
    margin-left: 10vmin;
    background-color: white;
    box-shadow: 2px 2px 10px 2px gray;
    display: grid;
    grid-template-rows: 70% 30%;
}
#botlist{
    width: 90%;
    height: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto;
}
.bot{
    width: 80%;
    height: 80%;
    margin: auto;
    box-shadow: 0px 0px 10px 2px gray;
    display: grid;
    grid-template-rows: auto auto;
    border-style: solid;
    border-width: 1vmax;
    border-color: transparent;
}
.botname{
    width: 100%;
    margin: auto;
    text-align: center;
    font-size: 1.5vmax;
}
#sbftbtn{
    width: 90%;
    height: 80%;
    margin-bottom: 10%;
}

@media only screen and (aspect-ratio > 1/1){
    .gametitle{
        font-size: 6vmin;
    }
    .btn{
        font-size: 5vmin;
    }
    .botbtn{
        font-size: 5vmin;
    }
    .botinput{
        font-size: 5vmin;
    }
    .navback{
        font-size: 5vmin;
    }
    .botname{
        font-size: 2.5vmin;
    }
    .bot{
        border-width: 1vmin;
    }
}