:root{
    --light_bg: #BFEBFF;
    --light_bg2: #98dbfa;
    --text_light: #FFFFFF;
    --yellow: #ffe900;
    --pink: #FF52A3;
    --blue: #2A9DF5;
    --sunset_red: #1e1f2a;
    --sunset_orangee: #5164DB;
    --babyblue: #33a6b2;
    --oceanblue: #425389;
    --cloud-scale: 1;
    --star-scale: 1;
    --cloud-v-start: 40px;
    --cloud-v-gap: 200px;
    --yellowy: #ffe900;
    --bluey: #a6e3d9;

    /* FOOTER CONTROLS (used by every page) */
    --footer-gap-top: 0vw;      /* space above the footer */
    --footer-gap-bottom: 2vw;    /* space below the footer */
    --footer-width: 80vw;        /* footer width on mobile */

    --grid-bottom-space: 13vw;
}

@font-face {
  font-family: 'Grobold';
  src: url('/assets/GROBOLD.woff2') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Canted';
  src: url('/assets/Canted.woff2') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* ---------- PAGE SCROLL ----------
   The page itself (the document) scrolls now, not an inner box.
   That is what gives iPhones the momentum fling AND the tap-the-status-bar-to-jump-to-top.
   IMPORTANT: never put overflow rules on BOTH html and body, or the body becomes the scroller
   and the status-bar tap stops working. */
.wrapper {
    display: flex;
    flex-direction: column;
    overflow-x: clip;     /* stops sideways scrolling from wide content (like the music cards) */
}

.fixed-top {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    z-index: 10;
}

.main {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
}

body {
    overflow-x: hidden;   /* fallback for older browsers */
    overflow-x: clip;     /* stops sideways scrolling without turning body into a scroll box */
}

/* hide the page scrollbar, like before */
html {
    scrollbar-width: none;
}
html::-webkit-scrollbar {
    display: none;
}

/* Your page backgrounds are gradients centered on the screen. Now that the whole page scrolls,
   "center" would become the middle of the entire page. This copies the body's background onto a
   layer pinned to the screen so the gradient stays where it was. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: inherit;
    pointer-events: none;
}

.header{
    margin-top: 40px;
    width: clamp(180px, 90vw, 600px);
    display: flex;
    justify-content: space-around;
    align-items: center;
}


.page-content {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cloud_container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.clouds {
    width: 100px;
    position: absolute;
    z-index: 1;
    will-change: transform;
    top: calc(var(--cloud-v-start) + (var(--i, 0) * var(--cloud-v-gap)));
}

.menu-item{
    font-family: 'Grobold', sans-serif;
    color: var(--text_light);
    text-decoration: none;
    font-size: 10px;
    z-index: 2;
}

.menu-item:hover{
    color: var(--pink);
    text-decoration: none;
}

.menu-item.active {
    padding: 5px;
    position: relative;
    color: var(--sunset_red);
    background-color: transparent;
    border: none;
    z-index: 1;
}

.menu-item.active::before {
    content: "";
    position: absolute;
    inset: 0;
    border: solid 5px var(--yellow);
    background-color: var(--yellow);
    transform: skew(-15deg);
    z-index: -1;
}   


.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20vw;
    row-gap: 10vh;
    padding-bottom: var(--grid-bottom-space);   /* controlled from :root above */
    position: relative;
    z-index: 5;
}

.footer{
    margin-bottom: 5vw;
    width: 45vw;
    z-index: 5;
}

@media (min-width:850px){
    .footer{
        width: 20vw;
    }
    .menu-item{
        font-size: 15px;
    }
}