@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/InterVariable.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/InterVariable-Italic.woff2") format("woff2");
}

* {
    margin: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
}

body {
    background: linear-gradient(180deg, #CBEFF3 0%, #B6CDE8 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
}


svg {
    user-select: none
}

ul {
    margin: 0;
    padding: 0
}

li {
    list-style: none
}

b, strong {
    font-weight: 600
}

img {
    user-select: none
}

a {
    text-decoration: none;
    color: currentColor
}

canvas {
    max-width: initial
}

summary {
    display: flex;
    list-style: none;
    -webkit-appearance: none;
    appearance: none
}

summary::-webkit-details-marker {
    display: none
}

#version {
    position: fixed;
    bottom: 4px;
    right: 4px;
    font-size: var(--ro-fs-1)
}

@media screen and (max-width:767px) {
    #version {
        display: none
    }
}


#player-container {
    height:80vh;
    width: 80vw;
    background-color: white;
    margin: auto;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 8px;
    box-shadow: rgba(18, 18, 18, 0.1) 1px 6px 20px 0px;
}