body {
        background-color: #333;
        background-image: url('Images/Chalkboard-Game.png');
        background-size:cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        display: flex; 
        align-items: center; 
        justify-content: center;
}

#music img{
    width: 30px;         
    height: 30px;
    background-color: transparent;
}

#music {
    position: fixed;
    top: 15px;
   right: 15px;
   border: none;
}

h1 {
    
    font-family: "cabin-sketch-bold", sans-serif;
    font-weight: 700;
    font-style: normal;
    text-align: center;
    font-size: 45px;
    color: lightpink;
    margin-top: 30px;
    position:fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#questionNumberDisplay {
    left:20%;
    display: flex;
    top: 10%;
}
 #startContainer {
    display:flex;
    justify-content: center;
    position: fixed;
    top:60%;
    left:50%;
    transform: translate(-50%, -50%);

}

#quizContainer1 p {
    font-family: "cabin-sketch-regular", sans-serif;
    font-weight: 400;
    font-style: normal;
    position:fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
}
.choice {
    display:flex;
    justify-content: center;
    position: fixed;
    top:60%;
    left:50%;
    transform: translate(-50%, -50%);

}
.GameStatus h2 {
    font-size: 40px;
    position:fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: lightpink;
}
button {

    size: 3px;
    color: lightpink;
    font-family: "shantell-sans-bouncy", sans-serif;
    margin: 30px;
    display: inline-block;
    text-align: center;
    border: 1px solid transparent;
    padding: 6px;
    background-color: transparent;
    border-radius: 12px;

}

button:hover {
  border-color: white;

}



h2 {
    text-align: center;
    size: 400px;
    color: lightpink;
    font-family: "cabin-sketch-regular", sans-serif;
    font-weight: 400;
    font-style: normal;
}

div {
    text-align: center;
    color: pink;
    font-family: "Bubbler One", sans-serif;
    text-align: center;
}


.gRules h2 {
    font-size: 40px;
    justify-content: center;
    position: fixed;
    top:25%;
    left:50%;
    transform: translate(-50%, -50%);
}

.gRules ul{
    color: lightpink;
    font-family: "Bubbler One", sans-serif;
    text-align: center;
    justify-content: center;
    position: fixed;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);

}

.back {
    position: fixed;
    top:80%;
    left:50%;
    transform: translate(-50%, -50%);
    color: lightpink;
}

.options {
    display:flex;
    justify-content: center;
    position: fixed;
    top:60%;
    left:50%;
    transform: translate(-50%, -50%);


}
.categories h2 {
    position:fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
}

@media (max-width: 480px) {
    h1 {
        font-size: 25px;
        top: 50px;
    }

    button {
        padding: 6px;
    }
    button:hover {
        border-color: transparent;
    }

    .GameStatus h2, .gRules h2, .categories h2 {
        font-size: 25px;
        top: 150px;
    }

    .gRules ul {
        font-size: 14px;
    }

    #startContainer, .choice, .options {
        top: 230px;
        position: relative;

    }

    #startContainer {
        left:40%;
        
    }


    #mainTitle {
        top: 150px;
        
    }


    .choice {
        top: 230px;
    }


    #quizContainer1 p {
        font-size: 20px;
        top: 150px;
    }

    #questionNumberDisplay {
        left:25%;
        display: flex;
        top: 5%;
        font-size: 20px;
    }


    #music {
        top:5%;
        display: flex;
    }
}
    .hidden {
    color:transparent;
    }