/* Ingredient Lists */
.header {
    font-family: "Dosis", sans-serif;
    display: flex;
    justify-content: flex-start;
    letter-spacing: 2px;
    color:  #fbca1f;
    font-size: 1.2em;
    margin: 3% 4.5%;
}

.ingredient-title {
    font-family: "Dosis", sans-serif;
    font-weight: 600;
    font-size: 6em;
    display: flex;
    justify-content: flex-start;
    line-height: 1;
    margin: -2.5% 4%;
    color: hsl(47, 96%, 55%);
}

.Q-description {
    font-family: "Dosis", sans-serif;
    font-weight: 400;
    font-size: 2em;
    color: hsl(47, 96%, 55%);
    margin: 5% 1% 2%;
}

body {
    overflow: hidden;
    cursor: none;
}

/* Body GIFs */
.protein {
    background: url("../assets/body/star.gif") no-repeat center center fixed;
    background-size: cover; /* make it fill the screen */
    margin: 0;
}

.veggies {
    background: url("../assets/body/veggies.gif") no-repeat center center fixed;
    background-size: cover; /* make it fill the screen */
    margin: 0;
}

.bun {
    background: url("../assets/body/spongebob.gif") no-repeat center center fixed;
    background-size: cover; /* make it fill the screen */
    margin: 0;
}

.toppings {
    background: url("../assets/body/topping.gif") no-repeat center center fixed;
    background-size: cover; /* make it fill the screen */
    margin: 0;
}


/* The ingredients */
.ingredient {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2%;
}

.choice {
    position: absolute;
    bottom: .5%;
    left: .5%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 4.3%;
    width: 80%
}

.buttons {
    position: absolute;
    bottom: 2.5%;
    right: 2.5%; 
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 4.3%;
    gap: 10%;
}

.question-container {
    background-color: blue;
}


/* PLAYING WITH CURSOR */
/* Custom cursor styling */
/* this script is provided by https://www.javascriptfreecode.com coded by: Kerixa Inc. */
#cursor-custom {
    height: 30px;
    width: 30px;
    pointer-events: none;
    position: fixed;
    background: #fbca1f;
    border-radius: 50%;
    box-shadow: 0 0 10px #fbca1f, 0 0 20px #fbca1f,
                0 0 30px #fbca1f, 0 0 40px #fbca1f,
                0 0 70px #fbca1f, 0 0 80px #fbca1f,
                0 0 100px #fbca1f, 0 0 150px #fbca1f;
    z-index: 9999; /* keeps cursor above everything */
}


/* Changing the cursor on different sides of screen */
/* .left-side, .right-side {
    display: flex;
    flex: 1; 
    justify-content: center;
}

.left-side:hover {
    cursor: url('assets/plate.png') 16 16, auto;
}

.right-side:hover {
    cursor: url('assets/trash-can.webp') 16 16, auto;
} */




/* Code credit: https://uiverse.io/adamgiebl/giant-donkey-36 */
.quiz-button {
    background: #fbca1f;
    font-family: "Dosis", sans-serif;
    padding: 0.6em 2.5em;
    font-weight: 600;
    font-size: 18px;
    border: 3px solid black;
    border-radius: 0.4em;
    box-shadow: 0.1em 0.1em;
    cursor: pointer;
    white-space: nowrap;
  }
  
    .quiz-button:hover {
        transform: translate(-0.05em, -0.05em);
        box-shadow: 0.15em 0.15em;
        cursor: pointer;
    }
    
    .quiz-button:active {
        transform: translate(0.05em, 0.05em);
        box-shadow: 0.05em 0.05em;
    }
    

/* Footer/body */
a {
    text-decoration: none;
}

.section {
    border: 20px groove #FFC72C;
    /* box-sizing: border-box; */
    padding: 30px 20px;
    width: 30%;
    margin: 0 auto;
    color: white;
}

.footer {
    text-align: center;
    font-size: 3em;
    line-height: 0.2;
    color: white;
}