body {
    --background: #2b2d3d;
    --outline: #212124;
    /* Color for top/left borders */
    --top-right-border: #37435c;
    /* Color for bottom/right borders */
    --bottom-left-border: #24201a;
    --line-width: 2.5px;
    /* Width of the lines */
    --grid-size: 27px;
    /* Size of the grid */
    width: 100vw;
    height: 100vh;
    background-color: var(--background);
    background-image:
        /* Cover Borders borders */
        linear-gradient(0deg, var(--outline) var(--line-width), transparent var(--line-width)),
        linear-gradient(90deg, var(--outline) var(--line-width), transparent var(--line-width)),
        /* Top/Right borders */
        linear-gradient(0deg, transparent calc(var(--grid-size) - var(--line-width)), var(--top-right-border) var(--line-width)),
        linear-gradient(90deg, transparent calc(var(--grid-size) - var(--line-width)), var(--top-right-border) var(--line-width)),
        /* Bottom/Left borders */
        linear-gradient(0deg, var(--bottom-left-border) calc(2*var(--line-width)), transparent calc(var(--line-width))),
        linear-gradient(90deg, var(--bottom-left-border) calc(2*var(--line-width)), transparent calc(var(--line-width)));
    background-size: var(--grid-size) var(--grid-size);
    background-position: 10px 10px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: row;
    margin: 0;
    font-family: "VT323", monospace;
    color: white;
}

/* */

.pixel-corners,
.pixel-corners--wrapper {
    clip-path: polygon(0px calc(100% - 20px),
            4px calc(100% - 20px),
            4px calc(100% - 12px),
            8px calc(100% - 12px),
            8px calc(100% - 8px),
            12px calc(100% - 8px),
            12px calc(100% - 4px),
            20px calc(100% - 4px),
            20px 100%,
            calc(100% - 20px) 100%,
            calc(100% - 20px) calc(100% - 4px),
            calc(100% - 12px) calc(100% - 4px),
            calc(100% - 12px) calc(100% - 8px),
            calc(100% - 8px) calc(100% - 8px),
            calc(100% - 8px) calc(100% - 12px),
            calc(100% - 4px) calc(100% - 12px),
            calc(100% - 4px) calc(100% - 20px),
            100% calc(100% - 20px),
            100% 20px,
            calc(100% - 4px) 20px,
            calc(100% - 4px) 12px,
            calc(100% - 8px) 12px,
            calc(100% - 8px) 8px,
            calc(100% - 12px) 8px,
            calc(100% - 12px) 4px,
            calc(100% - 20px) 4px,
            calc(100% - 20px) 0px,
            20px 0px,
            20px 4px,
            12px 4px,
            12px 8px,
            8px 8px,
            8px 12px,
            4px 12px,
            4px 20px,
            0px 20px);
    position: relative;
}

.pixel-corners {
    border: 8px solid transparent;
}

.pixel-corners--wrapper {
    width: fit-content;
    height: fit-content;
}

.pixel-corners--wrapper .pixel-corners {
    display: block;
    clip-path: polygon(8px 24px,
            12px 24px,
            12px 16px,
            16px 16px,
            16px 12px,
            24px 12px,
            24px 8px,
            calc(100% - 24px) 8px,
            calc(100% - 24px) 12px,
            calc(100% - 16px) 12px,
            calc(100% - 16px) 16px,
            calc(100% - 12px) 16px,
            calc(100% - 12px) 24px,
            calc(100% - 8px) 24px,
            calc(100% - 8px) calc(100% - 24px),
            calc(100% - 12px) calc(100% - 24px),
            calc(100% - 12px) calc(100% - 16px),
            calc(100% - 16px) calc(100% - 16px),
            calc(100% - 16px) calc(100% - 12px),
            calc(100% - 24px) calc(100% - 12px),
            calc(100% - 24px) calc(100% - 8px),
            24px calc(100% - 8px),
            24px calc(100% - 12px),
            16px calc(100% - 12px),
            16px calc(100% - 16px),
            12px calc(100% - 16px),
            12px calc(100% - 24px),
            8px calc(100% - 24px));
}

/* ----- https://pixelcorners.lukeb.co.uk/?radius=8&multiplier=4&border=1&border_width=2&border_color=#0b0b0e */

.pixel-corners::after,
.pixel-corners--wrapper::after {
    content: "";
    position: absolute;
    clip-path: polygon(0px calc(100% - 20px),
            4px calc(100% - 20px),
            4px calc(100% - 12px),
            8px calc(100% - 12px),
            8px calc(100% - 8px),
            12px calc(100% - 8px),
            12px calc(100% - 4px),
            20px calc(100% - 4px),
            20px 100%,
            calc(100% - 20px) 100%,
            calc(100% - 20px) calc(100% - 4px),
            calc(100% - 12px) calc(100% - 4px),
            calc(100% - 12px) calc(100% - 8px),
            calc(100% - 8px) calc(100% - 8px),
            calc(100% - 8px) calc(100% - 12px),
            calc(100% - 4px) calc(100% - 12px),
            calc(100% - 4px) calc(100% - 20px),
            100% calc(100% - 20px),
            100% 20px,
            calc(100% - 4px) 20px,
            calc(100% - 4px) 12px,
            calc(100% - 8px) 12px,
            calc(100% - 8px) 8px,
            calc(100% - 12px) 8px,
            calc(100% - 12px) 4px,
            calc(100% - 20px) 4px,
            calc(100% - 20px) 0px,
            20px 0px,
            20px 4px,
            12px 4px,
            12px 8px,
            8px 8px,
            8px 12px,
            4px 12px,
            4px 20px,
            0px 20px,
            0px 50%,
            8px 50%,
            8px 24px,
            12px 24px,
            12px 16px,
            16px 16px,
            16px 12px,
            24px 12px,
            24px 8px,
            calc(100% - 24px) 8px,
            calc(100% - 24px) 12px,
            calc(100% - 16px) 12px,
            calc(100% - 16px) 16px,
            calc(100% - 12px) 16px,
            calc(100% - 12px) 24px,
            calc(100% - 8px) 24px,
            calc(100% - 8px) calc(100% - 24px),
            calc(100% - 12px) calc(100% - 24px),
            calc(100% - 12px) calc(100% - 16px),
            calc(100% - 16px) calc(100% - 16px),
            calc(100% - 16px) calc(100% - 12px),
            calc(100% - 24px) calc(100% - 12px),
            calc(100% - 24px) calc(100% - 8px),
            24px calc(100% - 8px),
            24px calc(100% - 12px),
            16px calc(100% - 12px),
            16px calc(100% - 16px),
            12px calc(100% - 16px),
            12px calc(100% - 24px),
            8px calc(100% - 24px),
            8px 50%,
            0px 50%);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #0b0b0e;
    display: block;
    pointer-events: none;
}

.pixel-corners::after {
    margin: -8px;
}

/* ----- https://pixelcorners.lukeb.co.uk/?radius=8&multiplier=4&border=1&border_width=2&border_color=#0b0b0e  */

h1 {
    font-size: 40px;
    color: #daf1fa;
    font-weight: 100;
    margin: 0;
    padding: 0;
}

p {
    font-size: 20px;
    color: #daf1fa;
    font-weight: 100;
    margin: 0;
    padding: 0;
}

.center-insides {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.info-flex-section {
    width: 900px;
    height: 100%;
    /* background-color: #8966e92f; */
}



.disc-menu-flex-section {
    width: 100%;
    height: 100%;
    /* background-color: #17ad3c36; */
    position: relative;
}

.info-card {
    position: relative;
    width: 500px;
    height: 600px;
    /* background-color: #2121247c; */
    border: solid 7px #000;
    background-image: url(../img/New\ Piskel\ \(1\).png);
    /* filter: brightness(0.5); */
    background-size: 8px 8px;
    padding: 5px 10px;
}

.controls {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    justify-content: space-evenly;
    align-items: center;
    padding: 10px;
}

.row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 0;
}

.controls p {
    cursor: pointer;
    transition: 0.2s;
    font-size: 30px;
}

.controls p:hover {
    color: #bec2fd;
    transform: scale(1.1);
}

.progress-bar-outer {
    width: calc(100% - 20px);
    background-color: #161618;
    height: 7px;
    margin: 10px;
}

.progress-bar-fill {
    --progress-percent: 0%;
    height: 100%;
    background-color: #3c3f55;
    width: var(--progress-percent);
    position: relative;
}

.progress-bar-knob {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    background-color: #606589;
    border-radius: 50%;
}

.bigger {
    font-size: 30px;
}

#back-button {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 40px;
    line-height: 20px;
    padding: 10px;
    cursor: pointer;
    transition: 0.2s;
    border-width: 4px;
    background-image: url(../img/New\ Piskel\ \(1\).png);
    background-size: 8px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#back-button:hover {
    color: #bec2fd;
    transform: translate(0, -5px);
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.cd-image {
    position: absolute;
    top: calc(50% - 375px);
    left: 400px;
    width: 750px;
    aspect-ratio: 1/1;
    /* animation: spin 10s linear infinite; */
}

.disc-menu-flex-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    gap: 3px;
    font-size: 30px;
    width: 100%;
    color: #daf1fa;
}

li {
    cursor: pointer;
    transition: 0.2s;
    font-size: 35px;
}

li:hover {
    color: #bec2fd;
    transform: translate(5px, 0);
}

#sng-01 {
    position: relative;
    left: 230px;

}

#sng-02 {
    position: relative;
    left: 360px;
}

#sng-03 {
    position: relative;
    left: 290px;
}

#sng-04 {
    position: relative;
    left: 340px;
}

#sng-05 {
    position: relative;
    left: 290px;
}

#sng-06 {
    position: relative;
    left: 330px;
}

#sng-07 {
    position: relative;
    left: 375px;
}

#sng-08 {
    position: relative;
    left: 210px;
}

#sng-09 {
    position: relative;
    left: 80px;
}

#sng-10 {
    position: relative;
    left: 150px;
    text-align: right;
}

#sng-11 {
    position: relative;
    left: 220px;
}

#sng-12 {
    position: relative;
    left: 220px;
}

#sng-13 {
    position: relative;
    left: 295px;
}

#sng-14 {
    position: relative;
    left: 260px;
}

#sng-15 {
    position: relative;
    left: 115px;
}

#sng-16 {
    position: relative;
    left: 280px;
}

#sng-17 {
    position: relative;
    left: 430px;
}

.selected {
    list-style: square;
    color: #7880fc;
}