@media(max-width:1100px){
    header{
        padding:20px 30px;
    }

    .hero{
        grid-template-columns:1fr;
        text-align:center;
        padding-top:160px;
        gap:50px;
    }

    .hero-left{
        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .hero h2{
        font-size:64px;
    }

    .hero p{
        font-size:18px;
    }

    .hero-right{
        margin-bottom:80px;
    }

    .eclipse{
        width:420px;
        height:420px;
    }

    .moon{
        width:355px;
        height:355px;
        top:32px;
        left:34px;
    }

    .dashboard,
    .cards{
        grid-template-columns:
            repeat(2,1fr);
    }
}

@media(max-width:700px){
    header{
        flex-direction:column;
        gap:20px;
        padding:20px;
    }

    .logo h1{
        font-size:18px;
    }

    nav{
        gap:20px;
        flex-wrap:wrap;
        justify-content:center;
    }

    nav a{
        font-size:13px;
    }

    .hero{
        width:94%;
    }

    .hero h2{
        font-size:42px;
        letter-spacing:2px;
    }

    .hero-buttons{
        flex-direction:column;
        width:100%;
    }

    .button{
        text-align:center;
    }

    .eclipse{
        width:280px;
        height:280px;
    }

    .moon{
        width:235px;
        height:235px;
        top:22px;
        left:22px;
    }

    .section-header h3{
        font-size:34px;
    }

    .player-top,
    .player-bottom{
        flex-direction:column;
        gap:12px;
        text-align:center;
    }

    .timer{
        gap:15px;
    }

    .time{
        width:140px;
        padding:25px;
    }

    .time span{
        font-size:42px;
    }

    .dashboard,
    .cards{
        grid-template-columns:1fr;
    }

    .glass{
        padding:30px;
        font-size:17px;
    }
}

@media(max-width:700px){
    .timeline::before{
        left:10px;
    }

    .timeline-item,
    .timeline-item:nth-child(even){
        width:100%;
        margin:0;
        padding-left:45px;
        justify-content:flex-start;
    }

    .timeline-point,
    .timeline-item:nth-child(even)
    .timeline-point{
        left:2px;
    }
}