@import url('https://fonts.googleapis.com/css2?family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap');

audio {
    height: 100%;
    width: 100%;
}
h2 {
    color: white;
    font-family: "Sour Gummy",serif;
    font-size: 2cqw;
}


.kuori {
    grid-row: 15 / span 5;
    grid-column: 40 / span 20;
}
.enrili {
    grid-row: 27 / span 5;
    grid-column: 40 / span 20;
}
.shatteredsky {
    grid-row: 39 / span 5;
    grid-column: 40 / span 20;
}
.anythingatall {
    grid-row: 51 / span 5;
    grid-column: 40 / span 20;
}
.selfportrait {
    grid-row: 63 / span 5;
    grid-column: 40 / span 20;
}
.halting {
    grid-row: 75 / span 5;
    grid-column: 40 / span 20;
}
.title {
    grid-row: 5 / span 10;
    grid-column: 40 / span 20;
}
.title h2 {
    font-size: 4cqw;
    text-align: center;
}

img {
    transition: ease-in-out 0.2s;
    mix-blend-mode: difference;
}
img:hover {
    scale: 1.25;
}

.burger {
    grid-row: 15 / span 30;
    grid-column: 5 / span 17;
}
.cutecomp {
    grid-row: 25 / span 30;
    grid-column: 15 / span 17;
}
.cutecomp2 {
    grid-row: 50 / span 30;
    grid-column: 5 / span 17;
}
.dreamswillend {
    grid-row: 60 / span 30;
    grid-column: 15 / span 17;
}
.evul {
    grid-row: 15 / span 30;
    grid-column: 70 / span 17;
}
.noise {
    grid-row: 25 / span 30;
    grid-column: 80 / span 17;
}
.smthidk {
    grid-row: 50 / span 30;
    grid-column: 73 / span 17;
}

@media (max-width: 640px) {
    h2 {
        font-size: 4cqw;
    }
    .kuori {
        grid-row: 14 / span 5;
        grid-column: 5 / span 50;
    }
    .enrili {
        grid-row: 27 / span 5;
        grid-column: 5 / span 50;
    }
    .shatteredsky {
        grid-row: 39 / span 5;
        grid-column: 5 / span 50;
    }
    .anythingatall {
        grid-row: 51 / span 5;
        grid-column: 5 / span 50;
    }
    .selfportrait {
        grid-row: 63 / span 5;
        grid-column: 5 / span 50;
    }
    .halting {
        grid-row: 75 / span 5;
        grid-column: 5 / span 50;
    }
    .title {
        grid-row: 5 / span 10;
        grid-column: 30 / span 40;
    }
    .title h2 {
        font-size: 9cqw;
        text-align: center;
    }

    .burger {
        grid-row: 14 / span 14;
        grid-column: 60 / span 21;
    }
    .cutecomp {
        grid-row: 24 / span 14;
        grid-column: 77 / span 21;
    }
    .cutecomp2 {
        grid-row: 34 / span 14;
        grid-column: 60 / span 21;
    }
    .dreamswillend {
        grid-row: 44 / span 14;
        grid-column: 77 / span 21;
    }
    .evul {
        grid-row: 54 / span 14;
        grid-column: 60 / span 21;
    }
    .noise {
        grid-row: 64 / span 14;
        grid-column: 77 / span 21;
    }
    .smthidk {
        grid-row: 74 / span 14;
        grid-column: 60 / span 21;
    }
}