@media (max-width: 1700px) {
    footer .process-nmb {
        left: 8rem;
    }
    lyrics .now {
        font-size: 1.3rem;
    }
    lyrics .old-notnow,
    lyrics .future-notnow {
        font-size: 1rem;
    }
}
@media (max-width: 1500px) {
    lyrics .now {
        font-size: 1rem;
    }
    lyrics .old-notnow,
    lyrics .future-notnow {
        font-size: .8rem;
    }
}
@media (max-width: 1500px) {
    main div {
        height: 30rem;
        bottom: 2rem;
        margin: 0;
    }
    main div h4 {
        bottom: -3rem;
    }
    main {
        height: max-content;
    }
    footer {
        left: 38rem;
    }
}
@media (max-width: 1400px) {
    main div {
        top: -7rem;
        position: relative;
        margin: 0;
    }
    main div span {
        gap: 1rem;
    }    
    main div span object {
        top: 50%;
        transform: translateY(-50%);
        position: relative;
        height: 12.5rem;
        width: 3rem;
        display: block;
        border-radius: 100px;
    }
    main div h4 {
        bottom: 2rem;
        font-size: 1.6rem;
    }
    main div span .side {
        height: 10rem;
    }
    footer .process-bar  {
        width: 15rem;
    }
    footer {
        left: 15rem;
        width: 32rem;
    }
}
@media (max-width: 1200px) {
    lyrics .now {
        width: 95%;
        height: 100%;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
    }
    lyrics .old-notnow,
    lyrics .future-notnow {
        display: none;
    }
}
@media (max-width: 1000px) {
    main div span object {
        top: 50%;
        transform: translateY(-50%);
        position: relative;
        height: 10rem;
        width: 2.5rem;
        display: block;
        border-radius: 100px;
        margin-top: 2rem;
    }
    main div span .side {
        height: 7.5rem;
    }
    main {
        height: 17rem;
    }
    main div h4 {
        top: 6.5rem;
    }
}
@media (max-width: 980px) {
    #subheading {
        display: none;
    }
}
@media (max-width: 800px) {
    lyrics {
        display: none;
    }
    main {
        top: 50%;
        transform: translate(-50%, -50%);
        height: 34rem;
    }
    main div span {
        position: relative;
        scale: .8;
        max-height: 15rem;
        top: 8rem;
    }
    main div#agnelus {
        position: absolute;
        left: 25%;
        transform: translateX(-50%);
    }
    main div#nnu {
        position: absolute;
        right: 5%;
        transform: translateX(-50%);
    }

    main div#onas {
        position: absolute;
        left: 25%;
        transform: translateX(-50%);
        top: 10rem;
    }
    main div#derddimi {
        position: absolute;
        right: 5%;
        transform: translateX(-50%);
        top: 10rem;
    }
}
@media (max-width: 800px) {
    main div#agnelus {
        left: 25%;
    }
    main div#nnu {
        right: -5%;
    }

    main div#onas {
        left: 25%;
    }
    main div#derddimi {
        right: -5%;
    }
    footer {
        scale: .8;
        left: 8rem;
    }
}
@media (max-width: 550px) {
    main div#agnelus {
        left: 25%;
    }
    main div#nnu {
        right: -10%;
    }

    main div#onas {
        left: 25%;
    }
    main div#derddimi {
        right: -10%;
    }

    #linkbutton {
        width: 60px;
        height: 60px;
    }
    links {
        right: 2.5rem; 
        scale: .9;
        bottom: 6rem;  
    }
}
@media (max-width: 450px) {
    nav .heading {
        font-size: 2.5rem;
    }
    main div#agnelus {
        left: 25%;
    }
    main div#nnu {
        right: -15%;
    }

    main div#onas {
        left: 25%;
    }
    main div#derddimi {
        right: -15%;
    }
    footer {
        scale: 1;
        left: 0;
        transform: translateX(0%);
        bottom: -.2rem;
        width: 100%;
        border-radius: 0;
    }
    footer .process-bar {
        left: 50%;
        transform: translateX(-50%);
        bottom: .2rem;
        border-radius: 0;
        width: 100%;
    }
}
@media (max-width: 390px) {
    main div#agnelus {
        left: 25%;
    }
    main div#nnu {
        right: -20%;
    }

    main div#onas {
        left: 25%;
    }
    main div#derddimi {
        right: -20%;
    }
}