html, body {
    height: 100%;
    position: relative;
}
body {
    background: #000428; /* fallback for old browsers */
    margin: 0;
    padding: 0;
    color: #ffffffdd;
    font-family: "Roboto Condensed", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 4.4vw;
}

.records {
    width: 100%;
    height: 100%;
}

.record {
    height: 100%;
    max-height: 100%;
    overflow-y: hidden;
}

.cover-container {
    padding: 5vw 5vw 10vw 5vw;
    background-image: url("../img/image-from-rawpixel-id-15189105-png.png");
    background-image: url("../img/image-from-rawpixel-id-15189105-png.png"), -webkit-linear-gradient(0deg, #030838, #004e92); /* Chrome 10-25, Safari 5.1-6 */
    background-image: url("../img/image-from-rawpixel-id-15189105-png.png"), linear-gradient(0deg, #030838, #004e92); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background-size: cover;
}

.cover {
    position: relative;
    margin-bottom: 6vw;
}

    .cover::after {
        content: "";
        display: block;
        padding-bottom: 100%;
    }

    .cover img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 50%;
        border-radius: 0.8vw;
        filter: drop-shadow(0px 3vw 3vw #000000);
    }

.artist {
    font-family: "Covered By Your Grace", cursive;
    font-size: 7.8vw;
    text-align: center;
    filter: drop-shadow(0px 2vw 3vw #000000);
}

.info {
    -webkit-border-top-left-radius: 4vw;
    -webkit-border-top-right-radius: 4vw;
    -moz-border-radius-topleft: 4vw;
    -moz-border-radius-topright: 4vw;
    border-top-left-radius: 4vw;
    border-top-right-radius: 4vw;
    margin-top: -5vw;
    background-color: #000428;
    min-height: 50px;
    padding: 5vw;
}

.tracks {
    display: flex;
    flex-direction: column;
    gap: 3vw;
    line-height: 1.3;
}

.track {
    display: flex;
    align-items: center;
    gap: 3vw;
}

.side {
    flex-shrink: 0;
    width: 12vw;
    height: 12vw;
    background-color: #030838;
    border-radius: 1.2vw;
    text-align: center;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    font-size: 4.6vw;
    font-weight: 500;
}