/* ==========================================================
   YOUR TUX
   style.css
   Part 1
========================================================== */

/* ------------------------------
   Google Font
------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ------------------------------
   Reset
------------------------------ */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#0f172a;
    color:#ffffff;
    overflow-x:hidden;
    min-height:100vh;
}

/* ------------------------------
   Variables
------------------------------ */

:root{

    --bg:#0f172a;
    --card:#1e293b;

    --primary:#38bdf8;
    --secondary:#0ea5e9;

    --success:#22c55e;
    --danger:#ef4444;

    --white:#ffffff;
    --gray:#94a3b8;
    --border:#334155;

    --radius:20px;

    --shadow:
        0 15px 40px rgba(0,0,0,.35);

    --transition:.30s ease;

}

/* ------------------------------
   Background
------------------------------ */

.background{

    position:fixed;
    inset:0;

    background:
        radial-gradient(circle at top left,#2563eb55,transparent 40%),
        radial-gradient(circle at bottom right,#0ea5e955,transparent 40%),
        linear-gradient(
            135deg,
            #0f172a,
            #111827,
            #020617
        );

    z-index:-2;

}

.background::after{

    content:"";

    position:absolute;
    inset:0;

    background-image:

        linear-gradient(
            rgba(255,255,255,.03) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.03) 1px,
            transparent 1px
        );

    background-size:40px 40px;

    opacity:.15;

}

/* ------------------------------
   General
------------------------------ */

section{

    width:min(1200px,90%);
    margin:auto;

}

.hidden{

    display:none;

}

img{

    max-width:100%;

}

button{

    cursor:pointer;
    border:none;
    outline:none;
    font-family:inherit;

}

a{

    text-decoration:none;

}

/* ------------------------------
   Navbar
------------------------------ */

.navbar{

    width:100%;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:25px 7%;

}

.logo{

    display:flex;
    align-items:center;
    gap:15px;

}

.logo img{

    width:55px;

}

.logo h2{

    font-size:1.7rem;
    font-weight:700;

}

nav{

    display:flex;
    gap:35px;

}

nav a{

    color:white;

    font-size:1rem;

    transition:var(--transition);

    position:relative;

}

nav a::after{

    content:"";

    position:absolute;

    width:0;

    left:0;
    bottom:-5px;

    height:2px;

    background:var(--primary);

    transition:var(--transition);

}

nav a:hover{

    color:var(--primary);

}

nav a:hover::after{

    width:100%;

}

/* ------------------------------
   Landing Page
------------------------------ */

#landing{

    display:flex;
    justify-content:center;
    align-items:center;

    min-height:82vh;

}

.hero{

    text-align:center;

    max-width:900px;

}

.hero-image{

    width:230px;

    margin-bottom:30px;

    animation:float 3s ease-in-out infinite;

}

.hero h1{

    font-size:3.6rem;

    margin-bottom:25px;

    line-height:1.15;

}

.hero p{

    color:var(--gray);

    font-size:1.15rem;

    max-width:700px;

    margin:auto;

    line-height:1.9;

}

#start-btn{

    margin-top:50px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:white;

    font-size:1.1rem;

    padding:

        18px
        45px;

    border-radius:60px;

    transition:var(--transition);

    box-shadow:

        0 10px 25px
        rgba(56,189,248,.35);

}

#start-btn:hover{

    transform:translateY(-5px);

    box-shadow:

        0 18px 35px
        rgba(56,189,248,.45);

}

/* ------------------------------
   Cards
------------------------------ */

.quiz-card,
.result-card{

    background:

        rgba(30,41,59,.75);

    backdrop-filter:

        blur(18px);

    border:

        1px solid
        rgba(255,255,255,.08);

    border-radius:

        var(--radius);

    box-shadow:

        var(--shadow);

}

/* ------------------------------
   Utility
------------------------------ */

.center{

    display:flex;
    justify-content:center;
    align-items:center;

}

.text-center{

    text-align:center;

}

.mt-1{

    margin-top:10px;

}

.mt-2{

    margin-top:20px;

}

.mt-3{

    margin-top:30px;

}

.mt-4{

    margin-top:40px;

}

.mt-5{

    margin-top:50px;

}

/* ------------------------------
   Floating Penguin Animation
------------------------------ */

@keyframes float{

    0%{

        transform:
            translateY(0);

    }

    50%{

        transform:
            translateY(-15px);

    }

    100%{

        transform:
            translateY(0);

    }

}


/* ==========================================================
   YOUR TUX
   style.css
   Part 2 - Quiz Interface
========================================================== */

/* ------------------------------
   Quiz Section
------------------------------ */

#quiz{

    display:flex;
    flex-direction:column;
    align-items:center;

    padding:50px 0 100px;

}

/* ------------------------------
   Progress
------------------------------ */

.progress-container{

    width:min(900px,90%);
    margin-bottom:40px;

}

.progress-bar{

    width:100%;
    height:14px;

    background:#1e293b;

    border-radius:999px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.05);

}

#progress-fill{

    width:5%;

    height:100%;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--success)
    );

    transition:.35s ease;

}

#progress-text{

    display:block;

    text-align:right;

    color:var(--gray);

    margin-top:10px;

    font-size:.95rem;

}

/* ------------------------------
   Quiz Card
------------------------------ */

.quiz-card{

    width:min(900px,90%);

    padding:45px;

}

.quiz-card h2{

    font-size:2rem;

    margin-bottom:40px;

    line-height:1.5;

}

/* ------------------------------
   Options
------------------------------ */

.options{

    display:grid;

    grid-template-columns:1fr;

    gap:20px;

}

.option{

    background:#0f172a;

    border:2px solid rgba(255,255,255,.08);

    color:white;

    padding:20px 24px;

    border-radius:18px;

    font-size:1.05rem;

    cursor:pointer;

    transition:var(--transition);

    user-select:none;

    display:flex;

    align-items:center;

    gap:15px;

}

.option:hover{

    transform:translateY(-4px);

    border-color:var(--primary);

    background:#172554;

}

.option::before{

    content:"";

    width:18px;

    height:18px;

    border-radius:50%;

    border:2px solid var(--gray);

    flex-shrink:0;

    transition:var(--transition);

}

.option.selected{

    background:#0c4a6e;

    border-color:var(--primary);

}

.option.selected::before{

    background:var(--primary);

    border-color:var(--primary);

}

/* ------------------------------
   Buttons
------------------------------ */

.buttons{

    width:min(900px,90%);

    display:flex;

    justify-content:space-between;

    margin-top:40px;

}

#prev-btn,
#next-btn{

    padding:15px 35px;

    border-radius:12px;

    font-size:1rem;

    transition:var(--transition);

}

#prev-btn{

    background:#334155;

    color:white;

}

#prev-btn:hover{

    background:#475569;

}

#next-btn{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:white;

    box-shadow:0 10px 25px rgba(56,189,248,.30);

}

#next-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(56,189,248,.45);

}

#prev-btn:disabled{

    opacity:.4;

    cursor:not-allowed;

}

/* ------------------------------
   Question Animation
------------------------------ */

.fade-in{

    animation:fadeIn .35s ease;

}

.fade-out{

    animation:fadeOut .35s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeOut{

    from{

        opacity:1;

        transform:translateY(0);

    }

    to{

        opacity:0;

        transform:translateY(-20px);

    }

}

/* ------------------------------
   Loading Spinner
------------------------------ */

.loader{

    width:70px;

    height:70px;

    border-radius:50%;

    border:8px solid rgba(255,255,255,.08);

    border-top:8px solid var(--primary);

    animation:spin 1s linear infinite;

    margin:50px auto;

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* ------------------------------
   Small Hover Effects
------------------------------ */

.option:active{

    transform:scale(.98);

}

#next-btn:active,
#prev-btn:active{

    transform:scale(.97);

}

/* ==========================================================
   YOUR TUX
   style.css
   Part 3 - Results, Footer & Responsive Design
========================================================== */

/* ------------------------------
   Result Section
------------------------------ */

#result{

    display:flex;
    justify-content:center;
    align-items:center;

    padding:60px 0 100px;

}

.result-card{

    width:min(950px,90%);

    padding:50px;

    text-align:center;

}

.result-card h1{

    font-size:2.6rem;

    margin-bottom:45px;

}

/* ------------------------------
   Result Grid
------------------------------ */

.result-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

    margin-bottom:45px;

}

.result-box{

    background:#0f172a;

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    padding:30px;

    transition:var(--transition);

}

.result-box:hover{

    transform:translateY(-6px);

    border-color:var(--primary);

}

.result-box h3{

    color:var(--gray);

    margin-bottom:20px;

    font-weight:500;

}

.result-box img{

    width:120px;

    height:120px;

    object-fit:contain;

    margin:20px auto;

    display:block;

}

.result-box h2{

    font-size:1.6rem;

    margin-top:10px;

}

/* ------------------------------
   Description
------------------------------ */

.description{

    margin:40px 0;

    text-align:left;

    background:#0f172a;

    padding:30px;

    border-radius:18px;

    border:1px solid rgba(255,255,255,.08);

}

.description h3{

    margin-bottom:15px;

    color:var(--primary);

}

.description p{

    color:var(--gray);

    line-height:1.8;

}

/* ------------------------------
   Restart Button
------------------------------ */

#restart-btn{

    background:#334155;

    color:white;

    padding:16px 32px;

    border-radius:12px;

    transition:var(--transition);

}

#restart-btn:hover{

    background:#475569;

    transform:translateY(-3px);

}

/* ------------------------------
   Official Website Button
------------------------------ */

#learn-more-btn{

    background:linear-gradient(
        135deg,
        var(--success),
        #16a34a
    );

    color:white;

    padding:16px 32px;

    border-radius:12px;

    transition:var(--transition);

    box-shadow:0 10px 20px rgba(34,197,94,.30);

}

#learn-more-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(34,197,94,.45);

}

/* ------------------------------
   Footer
------------------------------ */

footer{

    margin-top:60px;

    padding:35px;

    text-align:center;

    color:var(--gray);

    border-top:1px solid rgba(255,255,255,.05);

}

footer p{
    font-size:.95rem;
}

footer a{
    color:var(--primary);
    transition:var(--transition);
}

footer a:hover{
    color:var(--secondary);
}

/* ------------------------------
   Scrollbar
------------------------------ */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#111827;

}

::-webkit-scrollbar-thumb{

    background:#334155;

    border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary);

}

/* ------------------------------
   Fade Utility
------------------------------ */

.show{

    animation:fadeUp .45s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ------------------------------
   Responsive
------------------------------ */

@media (max-width:1000px){

    .hero h1{

        font-size:3rem;

    }

    .quiz-card{

        padding:35px;

    }

    .result-card{

        padding:40px;

    }

}

@media (max-width:768px){

    .navbar{

        flex-direction:column;

        gap:20px;

    }

    nav{

        gap:20px;

        flex-wrap:wrap;

        justify-content:center;

    }

    .hero-image{

        width:180px;

    }

    .hero h1{

        font-size:2.3rem;

    }

    .hero p{

        font-size:1rem;

    }

    .quiz-card h2{

        font-size:1.5rem;

    }

    .buttons{

        flex-direction:column;

        gap:15px;

    }

    .buttons button{

        width:100%;

    }

    .result-grid{

        grid-template-columns:1fr;

    }

    .result-box img{

        width:90px;

        height:90px;

    }

}

@media (max-width:500px){

    .logo h2{

        font-size:1.4rem;

    }

    .hero{

        padding-top:20px;

    }

    .hero-image{

        width:150px;

    }

    .hero h1{

        font-size:2rem;

    }

    .quiz-card{

        padding:25px;

    }

    .quiz-card h2{

        font-size:1.25rem;

    }

    .option{

        font-size:.95rem;

        padding:16px;

    }

    .result-card{

        padding:25px;

    }

    .result-card h1{

        font-size:2rem;

    }

    .description{

        padding:20px;

    }

}

/* ------------------------------
   Accessibility
------------------------------ */

button:focus-visible,
.option:focus-visible,
a:focus-visible{

    outline:3px solid var(--primary);

    outline-offset:4px;

}

/* ------------------------------
   End of File
------------------------------ */