@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
* {
    font-family: "Quicksand", sans-serif;
    box-sizing: content-box;
}

/*---------------------------------------------------------------
---                      T H E M E S                          ---
--- One theme per tab. The active one is chosen by [data-tab],
--- which tabs.js sets on the body.
---------------------------------------------------------------*/

body {
    --bg-color: #edeff5;
    --second-color: #6471A5;
    --font-color: rgb(0 0 0 / .9);
    --muted-color: rgb(0 0 0 / .55);
    /* kept as channels so panels can be faded, e.g. the awards backdrop */
    --panel-rgb: 248 249 251;
    --panel-color: rgb(var(--panel-rgb));
    --hairline-color: rgb(0 0 0 / .1);
    --menu-font-color: white;
}

body[data-tab="piano"] {
    --bg-color: #04060e;
    --second-color: #6b74c4;
    --font-color: rgb(255 255 255 / .9);
    --muted-color: rgb(255 255 255 / .6);
    --panel-rgb: 21 24 41;
    --hairline-color: rgb(255 255 255 / .12);
}

/*---------------------------------------------------------------
---                      L A Y O U T                          ---
---------------------------------------------------------------*/

html, body {
    /* hides the sideways overflow of the sliding profile image */
    position: relative;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body{
    display: flex;
    flex-direction: column;
    width: min(100%, 1000px);
    margin: auto;
    background-color: var(--bg-color);
    color: var(--font-color);
    padding-inline: 5rem;
    padding-top: 4rem;
    padding-bottom: 1rem;
    /* for smooth background color shift between tabs */
    transition: background-color 250ms linear, color 250ms linear;
}

main {
    display: flex;
    margin: auto;
    flex-direction: column;
    gap: 0;
}

.page:not([hidden]) {
    display: flex;
    flex-direction: column;
    animation: fadeUp 350ms ease-out;
}

.page > section {
    margin-top: 8rem;
}

.page > section:first-child {
    margin-top: 4rem;
}

h1 {
    font-weight: 500;
}

h2{
    font-weight: 500;
}

.hidden {
    /* do NOT use 'visibility: hidden', is kills querySelectors */
    opacity: 0;
    position: absolute;
    pointer-events: none;
}

.copyright {
    text-align: center;
    margin-top: 1rem;
}