body{
    background-image:url("../images/blue-background.avif")
}

/* small screen */
@media(max-width: 767px){
#ButtonStyle{
    border-radius: 2rem;
    padding: 3rem;
    background-color: aqua;
    border: 6px solid yellow;
    margin-top: 10vh;
    margin-bottom: 5vh;
    font-family: "Racing Sans One", sans-serif;
}
}

/* small screen */
@media(max-width: 767px){
#player-name,#game-code{
    border-radius: 2rem;
    width: 15rem;
    height: 3rem;
    margin-top: 2vh;
    margin-bottom: 5vh;
}
}

/* small screen  */
@media(max-width: 767px){
    #title{
    color:yellow;
    font-weight: bolder;
    margin-top: 2vh;
    font-family: "ADLaM Display";
    margin-bottom: 15vh;
    font-size: 3rem;
}
}

/* big screen */
@media(min-width: 767px){
#ButtonStyle{
    border-radius: 2rem;
    padding: 3rem;
    padding-left: 12rem;
    padding-right: 12rem;
    background-color: aqua;
    border: 6px solid yellow;
    margin-top: 8vh;
    font-family: "Racing Sans One", sans-serif;
}
}




/* big screen */
@media(min-width: 767px){
#game-code{
    border-radius: 2rem;
    width: 40vw;
    height: 3rem;
}
}

/* big screen */
@media(min-width: 767px){
#player-name{
    border-radius: 2rem;
    width: 40vw;
    height: 3rem;
    margin-bottom: 8vh;
}
}

/* big screen  */
@media(min-width: 767px){
    #title{
    color:yellow;
    font-weight: bolder;
    font-family: "ADLaM Display";
    margin-bottom: 15vh;
    font-size: 10rem;
    margin-top: none;
}
}