style.css

.hide{
    /* Hides HTML elements */
    visibility: hidden; 
}
.correct{
    /* Displays the correct answer */
    visibility: visible;
    color: green;
}
.incorrect{
    /* Displays the incorrect answer */
    visibility: visible;
    color: red;
}
.disabled{
    /* Disables the button */
    pointer-events: none;
}
.mainContainer {
    /* Main container for the quiz */
    /* center the content in a column */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* set the font */
    font-family: 'Permanent Marker', cursive;
    /* set the font size larger */
    font-size: 20px;
    /* set the color of the text */
    color: #ffffff;
    /* set the background color to linear gradiant */
    background: linear-gradient(180deg, rgb(204, 0, 0) 0%, rgb(0, 13, 255) 100%);
    /* Round out the edges */
    border-radius: 10px;
    /* set the margin */
    margin-left: 300px;
    margin-right: 300px;
    /* set the padding */
    padding : 20px;
}
.controlButtonContainer > button{
    /* Control buttons */
    font-family: 'Permanent Marker', cursive;
    /* set the font size larger */
    font-size: 20px;
    /* set the background color to linear gradiant */
    background: white;
    /* Round out the edges */
    border-radius: 10px;
}
.controlButtonContainer > button:hover{
    /* Change cursor to pointer when hovering a button*/
    cursor: pointer;
    /* Change colors */
    color: rgb(246, 255, 0);
    /* Change the background color of button to rgb(56, 129, 247) */
    background-color: rgb(255, 0, 251);
}

/* Change the answer buttons */
.answerButtons > button {
    /* set the font */
    font-family: 'Permanent Marker', cursive;
    /* set the font size larger */
    font-size: 20px;
    /* set the background color to linear gradiant */
    background: white;
    /* Round out the edges */
    border-radius: 10px;
}

/* Change cursor to pointer when hovering a button*/
.answerButtons > button:hover {
    cursor: pointer;
    /* Change colors */
    color: rgb(246, 255, 0);
    /* Change the background color of button to rgb(56, 129, 247) */
    background-color: rgb(255, 0, 251);
}

.imageContainer > img {
    /* Create a border around the images */
    /* Create a luigi border */
    border: 5px solid rgb(255, 255, 255);
    /* Round out the edges */
    border-radius: 10px;
}

.creditContainer > footer{
    /* bottom center of window */
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: rgb(49, 39, 39);
    color: rgb(181, 45, 45);
    text-align: center;
}
.creditContainer > footer > p > a {
    color: rgb(255, 255, 255);
    text-decoration: none;
}

.creditContainer > footer > p > a:hover {
    color: rgb(59, 162, 251);
    text-decoration: underline;
}