/* ==========================================
   HEADER
========================================== */

.topbar{
    background:#2e7d32;
    color:white;
    text-align:center;
    padding:20px;
    box-shadow:0 2px 10px rgba(0,0,0,.2);
}

.topbar h1{
    margin:0;
    font-size:32px;
}
/* =====================================
   SUN
===================================== */

.sun{

    position:absolute;

    top:25px;
    right:240px;

    width:55px;
    height:55px;

    border-radius:50%;

    background:#FFD700;

    box-shadow:
        0 0 20px #FFD700,
        0 0 40px #FFD700,
        0 0 60px rgba(255,215,0,.8);

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

    z-index:5;
}

@keyframes sunPulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
    }
}

/* =========================
   AUDIO CONTROL
========================= */

.audio-control{

    position:fixed;

    bottom:20px;
    right:20px;

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

    padding:10px 15px;

    background:rgba(255,255,255,.25);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

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

    border-radius:30px;

    z-index:9999;

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

.audio-btn{

    width:45px;
    height:45px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    font-size:20px;

    background:#4CAF50;

    color:white;

    transition:.3s;
}

.audio-btn:hover{

    transform:scale(1.1);
}

#volumeSlider{

    width:100px;

    cursor:pointer;
}