/* RESET */

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body {

    font-family:Arial, Helvetica, sans-serif;

    background:#eef4ec;

    color:#333;

    line-height:1.6;

}



/* HEADER */

header {

    background:#1b5e20;

    color:white;

    padding:20px 40px;

    position:sticky;

    top:0;

    z-index:1000;

}


.container {

    display:flex;

    justify-content:space-between;

    align-items:center;

}


header h1 {

    font-size:28px;

}



nav a {

    color:white;

    text-decoration:none;

    margin-left:25px;

    font-weight:bold;

}


nav a:hover {

    color:#c8f7c5;

}



/* HERO */

.hero {

    background-image:url('https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=1600');

    background-size:cover;

    background-position:center;

    text-align:center;

    padding:140px 20px;

    color:white;

}


.hero-overlay {

    background:rgba(0,0,0,.45);

    display:inline-block;

    padding:40px;

    border-radius:12px;

    max-width:800px;

}


.hero h2 {

    font-size:42px;

    margin-bottom:20px;

}


.hero p {

    font-size:20px;

}



.hero-button {

    display:inline-block;

    margin-top:25px;

    padding:14px 30px;

    background:#2e7d32;

    color:white;

    text-decoration:none;

    border-radius:8px;

    font-weight:bold;

}


.hero-button:hover {

    background:#1b5e20;

}



/* GAMES */

.games {

    padding:60px;

}


.games h2 {

    text-align:center;

    color:#1b5e20;

    font-size:34px;

    margin-bottom:40px;

}



.game-grid {

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}



/* CARDS */

.card {

    background:white;

    border-radius:12px;

    overflow:hidden;

    box-shadow:0 5px 15px rgba(0,0,0,.1);

    transition:.3s;

}


.card:hover {

    transform:translateY(-8px);

    box-shadow:0 10px 20px rgba(0,0,0,.15);

}



.card img {

    width:100%;

    height:220px;

    object-fit:cover;

    display:block;

}



.card-content {

    padding:25px;

}


.card h3 {

    color:#1b5e20;

    margin-bottom:12px;

}



.card p {

    margin:15px 0 25px;

}



.card a {

    text-decoration:none;

}



/* BADGES */

.badge {

    display:inline-block;

    background:#c8f7c5;

    color:#1b5e20;

    padding:5px 12px;

    border-radius:20px;

    font-size:14px;

    font-weight:bold;

}



/* BUTTONS */

button {

    width:100%;

    background:#2e7d32;

    color:white;

    border:none;

    padding:12px 25px;

    border-radius:6px;

    cursor:pointer;

    font-size:16px;

    margin-top:10px;

}



button:hover {

    background:#1b5e20;

}


button:disabled {

    cursor:not-allowed;

    opacity:.8;

}



/* QUIZ BASE */

.quiz {

    padding:60px 20px;

    text-align:center;

}



.quiz-box {

    max-width:700px;

    margin:auto;

    background:white;

    padding:40px;

    border-radius:12px;

    box-shadow:0 5px 15px rgba(0,0,0,.1);

}



#progress {

    color:#2e7d32;

    margin-bottom:20px;

}



#score {

    color:#555;

    margin-bottom:20px;

}



#question {

    color:#1b5e20;

    margin-bottom:30px;

}


#answers button,
#trash-options button,
#day-options button,
#fuel-options button {

    display:block;

    width:80%;

    margin:15px auto;

}



#result,
#trash-result,
#day-result,
#fuel-result {

    margin:25px;

    font-size:20px;

    font-weight:bold;

    color:#1b5e20;

}



/* SORT TRASH */

#trash-score {

    color:#2e7d32;

}


#trash-item {

    color:#1b5e20;

    font-size:32px;

}



#trash-image {

    font-size:90px;

    margin:30px;

}



/* DAY LIFE */

#day-title {

    color:#1b5e20;

}


#day-question {

    font-size:20px;

    margin-bottom:30px;

}


#day-score {

    color:#2e7d32;

}



/* WHEEL */

#wheel {

    width:200px;

    height:200px;

    margin:30px auto;

    border-radius:50%;

    background:
    conic-gradient(
    #66bb6a,
    #ffee58,
    #42a5f5,
    #ef5350,
    #66bb6a
    );

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:70px;

    border:8px solid #1b5e20;

}



.spin-animation {

    animation:spin 1s ease;

}



@keyframes spin {

from {

transform:rotate(0deg);

}

to {

transform:rotate(720deg);

}

}


#wheel-score {

color:#2e7d32;

}


#challenge {

color:#1b5e20;

}



/* BIOFUEL */

#fuel-score {

color:#2e7d32;

}


#fuel-question {

color:#1b5e20;

}



/* RUSH GAME */

#rush-score,
#rush-time {

color:#2e7d32;

}



#rush-area {

position:relative;

height:350px;

background:#eef4ec;

border-radius:12px;

overflow:hidden;

margin:25px 0;

}



.rush-good,
.rush-bad {

position:absolute;

font-size:45px;

cursor:pointer;

}



#rush-result {

font-size:22px;

font-weight:bold;

}



/* PROGRESS PAGE */

.progress-box {

padding:60px 20px;

text-align:center;

}


.progress-box h2 {

color:#1b5e20;

margin-bottom:30px;

}



.progress-card {

background:white;

max-width:600px;

margin:auto;

padding:30px;

border-radius:12px;

box-shadow:0 5px 15px rgba(0,0,0,.1);

}



.progress-card h3 {

color:#1b5e20;

margin-bottom:20px;

}



#badge {

font-size:24px;

color:#2e7d32;

margin:25px;

}



#completed-games {

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:20px;

margin-top:30px;

}



#completed-games .card {

background:#eef4ec;

}



/* ABOUT */

.about {

background:white;

text-align:center;

padding:60px 20px;

}



.about h2 {

color:#1b5e20;

margin-bottom:20px;

}



.about p {

max-width:800px;

margin:auto;

}



/* FOOTER */

footer {

background:#1b5e20;

color:white;

text-align:center;

padding:25px;

margin-top:60px;

}footer p {

margin:8px 0;

font-size:14px;

}



/* MOBILE */

@media(max-width:700px){


.container {

flex-direction:column;

gap:15px;

}


nav a {

margin:0 10px;

}


.hero {

padding:100px 20px;

}


.hero h2 {

font-size:32px;

}


.games {

padding:30px 20px;

}


.quiz-box {

padding:25px;

}

}/* GAME INSTRUCTIONS */

.game-instruction {

    max-width:700px;

    margin:20px auto;

    text-align:center;

    font-size:18px;

    color:#555;

    background:white;

    padding:15px 20px;

    border-radius:10px;

}