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

/* hostmobilecode.html */

/* small screen */
@media(max-width: 767px){
#codeToJoin{
    color: white;
    font-weight: bolder;
    margin-top: 3rem;
    
}
}

/* small screen */
@media(max-width: 767px){
#players{

    padding-top: 9rem;
    padding-bottom:11rem;
    padding-left: 7rem;
    padding-right: 7rem;
    border-radius: 1rem;
    background-color: white;
    margin-top: 8vh;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: black;
    font-weight: bolder;
    font-family: "Racing Sans One", sans-serif;
    font-size: 1rem;
    list-style: none;

}
}

/* small screen */
@media(max-width: 767px){
#map1-container{
    border-radius: 0.5rem;
    border: 0.4rem solid yellow;
    margin-top: 3vh;
    margin-bottom: 3vh;
    margin-right: 20vw;
    margin-left: 20vw;
    background-color: aqua;
    display: flex;
    align-items: center;
    justify-content: center;
}
}

/* small screen */
@media(max-width: 767px){
#map1{
    height: auto;
    width: auto;
    display: block;
    max-height: 10vw;
    max-width: 20vw;
    display: block;
}
}

/* small screen */
@media(max-width: 767px){
#playGameButton{
    border-radius: 0.5rem;
    padding-left: 6rem;
    padding-right: 6rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    background-color: aqua;
    border: 6px solid yellow;
    margin-top: 1vh;
    margin-bottom: 3vh;
    font-family: "Racing Sans One", sans-serif;
    transition: transform 0.2s ease, box-shadow 0.2s ease;

}
}

/* small screen */
@media(max-width: 767px){
#right{
    height: 5rem;
    width: 5rem;
    background-image: url(/public/images/arrow-right.png);
    background-size: contain;
    background-repeat: no-repeat;
    border:none;
    background-color: aqua;
    margin-left: 3vw;
}
}

/* small screen */
@media(max-width: 767px){
#left{
    height: 5rem;
    width: 5rem;
    background-image: url(/public/images/arrow-left.png);
    background-size: contain;
    background-repeat: no-repeat;
    border:none;
    background-color: aqua;
    margin-right: 3vw;
}
}

/* big screen */
@media(min-width: 767px){
#codeToJoin{
    color: white;
    font-weight: bolder;
    margin-top: 1vh;
    
}
}



/* big screen */
@media(min-width: 767px){
#players{

    padding-top: 9rem;
    padding-bottom: 11rem;
    padding-left: 7rem;
    padding-right: 7rem;
    border-radius: 1rem;
    background-color: white;
    margin-top: 4vh;
    margin-bottom: 10vh;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: "Racing Sans One", sans-serif;
    list-style: none;

}
}



/* big screen */
@media(min-width: 767px){
#map1-container{
    border-radius: 0.5rem;
    border: 0.4rem solid yellow;
    margin-top: 1vh;
    margin-bottom: 2vh;
    margin-right: 20vw;
    margin-left: 20vw;
    background-color: aqua;
    display: flex;
    align-items: center;
    justify-content: center;
}
}

/* big screen */
@media(min-width: 767px){
#map1{
    height: auto;
    width: auto;
    display: block;
    max-height: 10vw;
    max-width: 20vw;
    display: block;
}
}

/* big screen */
@media(min-width: 767px){
#playGameButton{
    border-radius: 0.5rem;
    padding-left: 12rem;
    padding-right: 12rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    background-color: aqua;
    border: 6px solid yellow;
    margin-top: 1vh;
    margin-bottom: 6vh;
    font-family: "Racing Sans One", sans-serif;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
}
/* big screen */
@media(min-width: 767px){
#playGameButton:hover{
    transform:translateY(-3px);
    box-shadow: 0 6px 12px black;
    background-color: #5EFFF4;
}
}



/* big screen */
@media(min-width: 767px){
#right{
    height: 5rem;
    width: 5rem;
    transform: rotate(180deg);
    background-image: url(/public/images/arrow-left.png);
    background-size: contain;
    background-repeat: no-repeat;
    border:none;
    background-color: aqua;
    margin-left: 3vw;
}
}

/* big screen */
@media(min-width: 767px){
#left{
    height: 5rem;
    width: 5rem;
    background-image: url(/public/images/arrow-left.png);
    background-size: contain;
    background-repeat: no-repeat;
    border:none;
    background-color: aqua;
    margin-right: 3vw;
}
}

#mapName{
    color: aliceblue;
}

#joinGameText{
    color: white;
    font-weight: bolder;
    font-family: "Racing Sans One", sans-serif;
}