@font-face {
    font-family: "Oi";
    src: local("Oi"), url("/Fonts/Oi-Regular.ttf"), format("truetype");
}

@font-face {
    font-family: "Groovy";
    src: local("Groovy"), url("/Fonts/Groovy\ Orange.otf"), format("OpenType Font");
}

@font-face {
    font-family: "DotoBlack";
    src: local("DotoBlack"), url("/Fonts/static/Doto-Black.ttf"), format("truetype");
}
@font-face {
    font-family: "Silkscreen";
    src: local("Silkscreen"), url("/Fonts/Silkscreen-Regular.ttf"), format("truetype");
}




::-webkit-scrollbar {
    width: 12px;
}



:root {
    --color-test : #c0b2b220 ;
    --text-color: #fff ;
    --main-color: #12487d;
    --secondary-color: #000000 ;
    --tri-color: #5ab8ee ;
    --background-color: #0c3053;
    --background-secondary-color: #5b8ec2;
    --background-third-color: #0c3053 ;
    --highlight-color: #8aa6c2;


    --backgroundLgt-color: #f57d89;
    

    --font-sizeBIG: 70px;
    --font-size: 30px;
    --font-sizeSMALL: 15px;
    --font-sizeverySMall: 13px;

    --Content-margin: 5px ;
    --Content-radius: 10px ;
    --Content-height: 2000px ;
    --Content-width: 750px;

    --transition-button: .25s ease-in-out ;

    --main-border: 2px solid;
    --Content-border: 2px dashed;
    --Content-padding: 10px;
    --Body-padding: 100px;
}

::selection {
    background: var(--highlight-color);
}


* {
    scrollbar-width: none;
    scrollbar-color: var(--background-secondary-color) var(--secondary-color);
}


::-webkit-scrollbar {
    width: 12px;
}


::-webkit-scrollbar-track {
    background: var(--secondary-color); 
}


::-webkit-scrollbar-thumb {
    background: var(--background-secondary-color); 
    border-radius: 10px;
    border: 3px solid var(--secondary-color); 
}











#Content p {
    margin-bottom: 20px;
}

#ArtistContainer {
    width: calc(var(--Content-width) * 0.9);
    margin: var(--Content-margin);
    padding: calc(var(--Content-padding) * 2);
    margin: 0 auto;
    font-family: sans-serif;
    background-color: var(--main-color);
    color: white;
    height: calc(var(--Content-height) * 0.5);
    overflow-y: scroll;
    border: var(--Content-border)  var(--secondary-color);
    border-radius: var(--Content-radius);
}

.artist-group {
    margin-bottom: 0;
}

.artist-header {
    font-size: 1.8rem;
    color: var(--secondary-switch);
    border-bottom: 1px solid #282828;
    padding-bottom: 8px;
    margin-bottom: 0px;
}

.song-stack {
    list-style: none;
    padding: 0px;
    margin: 15px;
}

.song-row {
    padding: 12px 10px;
    border-bottom: 1px solid #1e1e1e;
    color: var(--text-color);
    transition: all 0.2s ease;
    font-family: "Silkscreen";
    font-size: var(--font-sizeSMALL);
}

.song-row:hover {
    background-color: var(--background-secondary-color);
    color: var(--text-color);
    padding-left: 15px; 
    cursor: pointer;
}