@font-face {
    font-family: "YSMusic-HeadlineBold";
    font-style: normal;
    font-weight: 700;
    src: local("YSMusic-HeadlineBold"),
    url("YSMusic-HeadlineBold.woff2") format("woff2");
}
@font-face {
    font-family: "SpecialElite";
    font-display: swap;
    font-weight: 600;
    src: url("SpecialElite.ttf");
}
:root {
    --hover_color: #a349ff;
    --bck_color: 0,0,0;
    --main_color: 163,73,255;
}
body
{
    font-family: "YSMusic-HeadlineBold", sans-serif;
    font-style: normal;
    color: #fff;
    overflow: hidden;
    background: rgb(var(--bck_color));
}
*, ::after, ::before {
    box-sizing: border-box;
}
canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120% !important;
}
.parent_listen {
    position: absolute;
    text-align: center;
    width: 100% !important;
    margin-top: -90px;
    @media (max-width: 1367px) or (max-height: 1000px) {
        display: none;
    }
}
.listen {
    font-family: "SpecialElite";

}
.noise {
    background-color: transparent;
    background-image: url("noise.svg");
    background-repeat: repeat;
    opacity: 0.15;
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}
.main {
    position: absolute;
    display: grid;
    align-content: center;
    margin: auto;
    top: 0;
    bottom: 0;
    width: 100% !important;
    height: 100% !important;
    @media (max-width: 541px) {
        margin-left: -8px;
        justify-content: center;
    }
}
.up_text {
    display: grid;
    justify-content: center;
    text-align: center;
    font-family: "Space Mono", monospace;
    font-size: 28px;
    margin-top: -100px;

}
.release_block {
    display: flex;
    margin: auto;
    width: 600px;
    height: 650px;
    border: 0.75px solid #555;
    border-radius: 10px;
    text-align: center;
    letter-spacing: normal;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    @media (max-width: 541px) {
        width: 500px;
    }
    @media (max-width: 431px) {
        width: 350px;
    }
    @media (max-width: 361px) {
        width: 320px;
    }
    @media (max-height: 650px) {
        height: 600px;
    }
    @media (max-height: 600px) {
        height: 580px;
    }
    @media (max-height: 420px) {
        height: 400px;
    }
}
.release_info {
    display: flex;
    height: 150px;
    width: 400px;
    align-items: center;
    justify-content: center;
    align-content: center;
    @media (max-width: 431px) {
        width: 315px;
        height: 115px;
    }
    @media (min-width: 1024px) and (max-height: 600px) {
        height: 125px;
    }
    .cover {
        width: 145px;
        height: 145px;
        border-radius: 10px;
        margin-left: 5px;
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
        @media (max-width: 431px) {
            width: 115px;
            height: 115px;
        }
        @media (min-width: 1024px) and (max-height: 600px) {
            width: 125px;
            height: 125px;
        }
    }
    .block_text {

        margin-left: 10px;
        line-height: 2em;
        text-align: left;
        align-items: center;
        align-content: center;
        cursor: default;

        .add {
            font-family: "Space Mono", monospace;
            font-weight: 400;
            font-size: 22px;
            color: #666;

        }
        #name {
            font-size: 26px;
            margin: 0;
            color: #999;
            @media (max-width: 431px) {
                font-size: 20px;
            }

        }
        #release {
            font-size: 32px;
            margin: 0;
            @media (max-width: 431px) {
                font-size: 24px;
            }
        }


    }
}
*[data-tooltip] {
    position: relative;
}

*[data-tooltip]::after {
    content: attr(data-tooltip);

    position: absolute;
    top: -30px;
    width: 200px;
    right: -20px;
    left: -90px;
    pointer-events: none;
    opacity: 0;
    -webkit-transition: opacity .15s ease-in-out;
    -moz-transition: opacity .15s ease-in-out;
    -ms-transition: opacity .15s ease-in-out;
    -o-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out;
    display: grid;
    justify-content: center;

    font-size: 12px;
    line-height: 16px;
    color: #fff;
    background: #555;
    padding: 2px 2px;
    border-radius: 5px;
    border: 0.75px solid #888;
    box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.4);
}

*[data-tooltip]:hover::after {
    opacity: 1;
}
.release_links {
    display: grid;
    justify-content: center;
    margin-top: 25px;
    width: 550px;
    height: 410px;
    gap: 10px;
    @media (max-width: 431px) {
        width: 250px;
        margin-top: 20px;
    }
    @media (min-width: 1024px) and (max-height: 600px) {
        margin-top: 10px;
    }
    .link_to {

        width: 400px;
        @media (max-width: 431px) {
            width: 320px;
        }
        @media (max-width: 361px) {
            width: 300px;
        }

        padding: 0.35rem;
        border: 0.75px solid #555;
        border-radius: 10px;
        transition: transform 0.2s ease;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        .link_to_a {
            display: flex;
            align-items: center;
            text-decoration: none;
        }
        .logo {
            width: 42px;
            height: 42px;
        }
        .platform {
            font-size: 24px;
            margin-left: 10px;
            color: #fff;

        }
        .sign_left {
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            justify-self: stretch;
            -webkit-align-self: stretch;
            align-self: stretch;
        }
    }
    .link_to:hover {
        transform: scale(1.05);
        cursor: pointer;
        box-shadow: 0 0 25px rgba(256, 256, 256, 0.3);
        border: 0.75px solid rgba(256, 256, 256, 0.3);
        .logo {
            fill: var(--hover_color);
        }
        path {
            stroke: var(--hover_color);
        }
        .platform {
            color: var(--hover_color);
            text-shadow: 0 0 15px rgba(0, 0, 0, 0.9);
        }
    }
}