@font-face {
    font-family: snowcap;
    src: url("/fonts/SnowtopCaps.ttf");
}

@font-face {
    font-family: peace;
    src: url("/fonts/WeLovePeace-jEG79.otf");
}

@font-face {
    font-family: pudding;
    src: url("/fonts/ChristmasPudding.otf");
}

@font-face {
    font-family: eighty;
    src: url("/fonts/eighty.otf");
}

h1 {
    background-color: rgba(0, 0, 0, 0.85); /* White with 50% opacity */
    padding: 10px;
    border-radius: 5px;
    font-family: eighty;
    font-size: 5.5rem;
    text-align: center;
    display: flex;
    justify-content: center;
    color: rgba(256, 256, 256, 1); /* Adjust text color if needed */
    /* text-shadow: rgba(0, 128, 0, 0.6) 0px 0px 8px; */
    text-shadow: rgba(255, 0, 0, 0.4) 0px 0px 8px;
    /* text-shadow: rgba(255, 255, 0, 0.4) 0px 0px 8px; */
    /* text-shadow: rgba(255, 255, 255, .2) 0px 0px 8px; */
}

@media only screen and (max-width: 600px) {
    /* Adjust styles for small screens */
    body {
        font-size: 14px;
    }
    .container {
        padding: 10px;
    }
}

body {
    font-family: peace;
    color: black; /* Adjust text color if needed */
    display: flex;
    justify-content: center;
    padding-top: 50px;
    background: url('/images/rockin-around.png') no-repeat center center fixed; 
    background-size: cover;
}

/* CSS Grid */
.outer {
  display: grid;
}

.top .bottom {
  grid-column: 1;
  grid-row: 1;
}

/* Styles for Trivia Options */
#options label {
    font-family: peace;
    color: black; /* Adjust text color if needed */
    display: block;
    margin-bottom: 10px;
}

#displayContainer {
    font-family: peace;
    color: black; /* Adjust text color if needed */
    background-color: rgba(234, 229, 229, 0.8); /* White with 50% opacity */
    padding: 15px;
    border-radius: 10px;
}

#navigationButtons {
    text-align: center;
}

#navigationButtons button {
    margin: 5px;
}

/* Buttons that are invisible to start */
#shareButton, #exitButton, #continueButton, #startButton {
    font-family: peace;
    color: black;
    display: none;
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 1.2em;
}

/*
#startButton {
    font-family: peace;
    color: black;
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 1.2em;
}
*/

.trivia-option {
    font-family: peace;
    color: black;
    display: block;
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 1.2em;
}