@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

:root {
    --background-under: #040404; 
    --background-highlight: #121212;
    --background-elevated-base: #1f1f1f;
    --background-elevated-highlight: #2a2a2a;
    --background-elevated-dark: #121313;
    --spotify-destaque-verde: #1DB954;  
    --spotify-card-cinza: #28282898;   
    --spotify-texto-branco: #FFFFFF;   
    --spotify-texto-cinza: #B3B3B3;
    --spotify-fonte-jakarta: "Plus Jakarta Sans", sans-serif;
}

* {
    box-sizing: border-box;
    text-decoration: none;
}

body {
    height: 100vh;
    background-color: var(--background-under);
    color: var(--spotify-texto-branco);
    font-family: var(--spotify-fonte-jakarta);
    overflow: hidden;
    padding: 0.5rem;
    gap: 0.5rem;
    display: grid;
    grid-template-columns: 420px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "menu menu"
        "sidebar main"
        "footer footer";
}

.menu {
    grid-area: menu;
    background-color: var(--background-under);
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.main {
    grid-area: main;
    background-color: var(--background-highlight);
    border-radius: 8px;
    display: flex;
}


.sidebar {
    grid-area: sidebar;
    background-color: var(--background-highlight);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

.footer {
    grid-area: footer;
    background-color: var(--background-highlight);
    display: flex;
    padding: 12px;
    background-image: linear-gradient(90deg, #af2896, #509bf5);
}