@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.woff2') format('woff2'),
        /* WOFF2 format */
        url('../fonts/Roboto-Regular.ttf') format('truetype');
    /* TrueType format */
}

@font-face {
    font-family: 'Roboto Bold';
    src: url('../fonts/Roboto-Bold.woff2') format('woff2'),
        /* WOFF2 format */
        url('../fonts/Roboto-Bold.ttf') format('truetype');
    /* TrueType format */
}

@font-face {
    font-family: 'Vibur';
    src: url('../fonts/Vibur-Regular.woff2') format('woff2'),
        /* WOFF2 format */
        url('../fonts/Vibur-Regular.ttf') format('truetype');
    /* TrueType format */
}

@font-face {
    font-family: 'Chivo Mono';
    src: url('../fonts/ChivoMono-VariableFont_wght.woff2') format('woff2'),
        /* WOFF2 format */
        url('../fonts/ChivoMono-VariableFont_wght.ttf') format('truetype');
    /* TrueType format */
}

:root {

    /* #1c2d4b */

    --clr--primary-000: hsl(218, 46%, 0%);
    --clr--primary-100: hsl(218, 46%, 5%);
    --clr--primary-200: hsl(218, 46%, 10%);
    --clr--primary-300: hsl(218, 46%, 15%);
    --clr--primary-400: hsl(218, 46%, 20%);
    --clr--primary-500: hsl(218, 46%, 36%);
    --clr--primary-600: hsl(218, 46%, 52%);
    --clr--primary-700: hsl(218, 46%, 68%);
    --clr--primary-800: hsl(218, 46%, 84%);
    --clr--primary-900: hsl(218, 46%, 100%);

    /* #745E67 */
    /* --clr--primary-000:     hsl(335, 10%, 0%);
    --clr--primary-100:     hsl(335, 10%, 10.25%);
    --clr--primary-200:     hsl(335, 10%, 20.5%);
    --clr--primary-300:     hsl(335, 10%, 30.75%);
    --clr--primary-400:     hsl(335, 10%, 41%);
    --clr--primary-500:     hsl(335, 10%, 52.8%);
    --clr--primary-600:     hsl(335, 10%, 64.6%);
    --clr--primary-700:     hsl(335, 10%, 76.4%);
    --clr--primary-800:     hsl(335, 10%, 88.2%);
    --clr--primary-900:     hsl(335, 10%, 100%);
     */

    /* #b8860b */

    --clr--secondary-000: hsl(43, 89%, 0%);
    --clr--secondary-100: hsl(43, 89%, 13.5%);
    --clr--secondary-200: hsl(43, 89%, 27%);
    --clr--secondary-300: hsl(43, 89%, 40.5%);
    --clr--secondary-400: hsl(33, 66%, 54%);
    --clr--secondary-500: hsl(43, 89%, 63.2%);
    --clr--secondary-600: hsl(43, 89%, 75.2%);
    --clr--secondary-700: hsl(43, 89%, 81.6%);
    --clr--secondary-800: hsl(43, 89%, 90.8%);
    --clr--secondary-900: hsl(43, 89%, 100%);

    /* #4A3B2E */
    --clr-tertiary-000: hsl(28, 23%, 0%);
    --clr-tertiary-100: hsl(28, 23%, 6%);
    --clr-tertiary-200: hsl(28, 23%, 12%);
    --clr-tertiary-300: hsl(28, 23%, 18%);
    --clr-tertiary-400: hsl(28, 23%, 24%);
    --clr-tertiary-500: hsl(28, 23%, 39.2%);
    --clr-tertiary-600: hsl(28, 23%, 54.4%);
    --clr-tertiary-700: hsl(28, 23%, 69.6%);
    --clr-tertiary-800: hsl(28, 23%, 84.8%);
    --clr-tertiary-900: hsl(28, 23%, 100%);

    /* #27282C */
    --clr--quaternary-000: hsl(228, 6%, 0%);
    --clr--quaternary-100: hsl(228, 6%, 4%);
    --clr--quaternary-200: hsl(228, 6%, 8%);
    --clr--quaternary-300: hsl(228, 6%, 12%);
    --clr--quaternary-400: hsl(228, 6%, 16%);
    --clr--quaternary-500: hsl(228, 6%, 32.8%);
    --clr--quaternary-600: hsl(228, 6%, 49.6%);
    --clr--quaternary-700: hsl(228, 6%, 66.4%);
    --clr--quaternary-800: hsl(228, 6%, 83.2%);
    --clr--quaternary-900: hsl(228, 6%, 100%);

    --clr-body-bg: var(--clr--primary-000);
    --clr-body-color: var(--clr--primary-900);

    --clr-nav-bg: var(--clr--primary-400);
    --clr-nav-color: var(--clr--primary-900);
    --clr-nav-link: var(--clr-nav-color);
    --clr-nav-link-hover: var(--clr--secondary-400);
    --clr-nav-sidebar-bg: hsla(218, 46%, 20%, 0.9);

    --clr-footer-bg: var(--clr--primary-800);
    --clr-footer-color: var(--clr--primary-300);

    --clr-title: var(--clr--secondary-400);

    --clr-white: var(--clr--primary-900);
    --clr-blue: var(--clr--primary-400);
    --clr-black: var(--clr--primary-000);
    --clr-gold: var(--clr--secondary-400);

    --clr-spotify-green: hsl(141, 73%, 42%);
    --clr-spotify-black: hsl(0, 11%, 9%);
    --clr-spotify-white: hsl(0, 0%, 100%);

    --ff-1: 'Roboto Bold', apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --ff-2: 'Roboto', pple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    ;
    --ff-3: 'Chivo Mono', Courier, monospace;
    --ff-4: 'Vibur', sans-serif;

    --font-size-fluid-00: clamp(.5rem, 1vw, 0.751rem);
    --font-size-fluid-0: clamp(.75rem, 2vw, 1rem);
    --font-size-fluid-1: clamp(1rem, 4vw, 1.5rem);
    --font-size-fluid-2: clamp(1.5rem, 6vw, 2.5rem);
    --font-size-fluid-3: clamp(2rem, 9vw, 3.5rem);

    --ff-default: var(--ff-2);
    --ff-logo: var(--ff-1);
    --ff-slogan: var(--ff-4);
    --ff-list-position: var(--ff-3);
    --ff-footer: var(--ff-1);
    --ff-title: var(--ff-1);

    --spacing-main-outer-edge: 0.75rem;

    --transition-time-default: 250ms;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    letter-spacing: 0.1em;
    line-height: 1.25em;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

img {
    display: inline-block;
    max-width: 100%;
}

.flex {
    display: flex;
    gap: var(--flex-gap, 1em);
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100svh;

    font-family: var(--ff-default);
    background-color: var(--clr--quaternary-000);
    color: var(--clr--quaternary-800);

    background-image: url(../images/robstenders-background.jpg);
    background-position: top;
    background-size: contain;
    background-repeat: no-repeat;

    position: relative;

    z-index: -2;
}

body::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--clr-body-bg);
    background-position: top;
    z-index: -1;
    opacity: 0.3;
    animation-delay: 1.5s;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-name: fadein;
}

@keyframes fadein {
    from {
        opacity: 0.3;
    }

    to {
        opacity: 0.9;
    }
}

/* Style the header and navigation bar */
header {
    background-color: var(--clr-nav-bg);
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
    color: var(--clr-nav-color);
    font-family: var(--ff-logo);
}

nav {
    height: 60px;
    background-color: var(--clr-nav-bg);
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    z-index: 9999;
    font-size: var(--font-size-fluid-0);
}

.nav-full {
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

.nav-mobile {
    height: 100%;
    display: none;
}

.home-link {
    justify-self: flex-start;
}

.links-container {
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

.nav-items {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

.nav-items--pages {
    justify-self: flex-start;
}

.nav-items--app {
    
}

nav a {
    height: 100%;
    padding: 0 20px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--clr-nav-color);
    font-family: var(--ff-logo);
}

nav a:hover {
    color: var(--clr-nav-link-hover);
}

nav svg {
    fill: var(--clr-nav-color);
}

#sidebar-active {
    display: none;
}

.open-sidebar-button,
.close-sidebar-button {
    display: none;
}

.nav-mobile {
    display: none;
}

@media screen and (max-width: 66.25rem) {

    .open-sidebar-button {
        display: block;
        margin-right: 2em;
    }

    .close-sidebar-button {
        display: none;
        margin-right: 2em;
    }

    .nav-items--pages {
        display: none;
    }

    .links-container {
        display: none;
    }

    .nav-full {
        justify-content: space-between;
        width: 100%;
    }

    .nav-mobile {
        display: none;
        position: absolute;
        grid-template-columns: 1fr;
        grid-row: auto;
        align-items: flex-start;
        justify-content: center;
        padding: 5em var(--spacing-main-outer-edge) var(--spacing-main-outer-edge) var(--spacing-main-outer-edge);
        background-color: var(--clr-nav-sidebar-bg);
        z-index: 999;
        top: 0;
        left: 0;
    }

    .nav-mobile-list {
        display: grid;
        grid-template-columns: 1fr;
        grid-row: auto;
        align-items: flex-start;
        justify-content: center;
        gap: 1em;
    }

    .nav-mobile-list a {
        padding: var(--spacing-main-outer-edge);

        display: grid;
        place-content: center;
        gap: 1em;

        border: var(--clr--primary-900) solid 2px;
        border-radius: var(--spacing-main-outer-edge);
    }

    .nav-mobile-list a:hover,
    .nav-mobile-list a:focus {
        background-color: var(--clr--primary-900);
    }

    .nav-mobile-list span {
        text-align: center;
        font-weight: bold;
        margin-block: 1rem;
    }

    @supports (backdrop-filter: blur(1rem)) {
        .nav-mobile {
            background: var(--clr-nav-sidebar-bg);
            backdrop-filter: blur(1rem);
        }
    }

    #sidebar-active:checked~.links-container {
        display: block;
    }
}

.active {
    color: var(--clr-nav-link-hover);
}

.slogan {
    font-family: var(--ff-slogan);
}

/* Style the main content section */
main {
    flex: 1;
    /* Grow to fill remaining space */
    padding-block: var(--spacing-main-outer-edge);
    padding-inline: var(--spacing-main-outer-edge);
    min-height: calc(100vh - 110px);
    /* Calculate the minimum height */
    /* 110px is the combined height of header and footer */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* section {
    margin-top: 3em;
} */

.section_title {
    font-size: var(--font-size-fluid-1);
    color: var(--clr-title);
    text-shadow: 40px 40px 0px rgba(0, 0, 0, 0);
    padding-block-end: 1.5rem;
}

.section_title i {
    margin-right: 0.5em;
}

.streams {
    display: grid;
    grid-template-columns: 1fr;
    align-items: top;
    justify-items: center;
    gap: 1rem;
    width: 100%;

    padding-block: 3rem;

    border-bottom: var(--clr--primary-400) dashed 3px;
}

.stream_cards {
    --min: 15ch;
    --gap: 5rem;

    display: grid;
    grid-gap: var(--gap);
    /* min() with 100% prevents overflow
    in extra narrow spaces */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
    width: 100%;

    align-items: start;
    justify-content: center;
    justify-items: center;

}

.stream_card {
    max-width: 18.75rem;

    display: grid;
    align-items: center;
    gap: 0.5em;
}

.stream_card__name {
    background-color: var(--clr--primary-400);
    color: var(--clr--primary-900);

    text-transform: uppercase;

    display: grid;
    place-content: center;

    font-size: 1.12em;

    padding-block: var(--spacing-main-outer-edge);
}

.stream_card__link {
    display: grid;
    place-content: center;

    font-size: 0.9em;

}

.stream_card__link a {
    color: var(--clr-nav-link);
    font-size: var(--font-size-fluid-00);
    text-decoration: none;
    text-transform: uppercase;
    transition: all var(--transition-time-default);
}

.stream_card__link a:hover,
.stream_card__link a:focus {
    color: var(--clr-nav-link-hover);
}

.lists {
    --min: 43ch;
    --gap: 5rem;

    display: grid;
    grid-gap: var(--gap);
    /* min() with 100% prevents overflow
    in extra narrow spaces */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
    width: 100%;

    align-items: start;
    justify-content: center;
    justify-items: center;

}

.episode {
    display: grid;
    align-items: center;
    justify-items: center;
    min-width: 40ch;
    border-radius: 0.75rem;
    overflow: hidden;
}

.episode__title {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font-size: var(--font-size-fluid-0);
    font-weight: bold;
    color: var(--clr-white);
    text-transform: uppercase;
    margin-block: 0;
    margin-inline: 0;
    background-color: var(--clr-white);
    color: var(--clr--secondary-400);
    width: 100%;
    padding-block-start: 0.5em;
    padding-block-end: 0;
    padding-inline: 1rem;
    text-align: right;
}

.episode__description {
    padding-block: 0.5rem;
    padding-inline: 1rem;

    background-color: var(--clr--primary-400);
    color: var(--clr--primary-900);

    font-size: var(--font-size-fluid-0);

}

.episode__description > p {
    line-height: 1.5rem;
}

.episode__broadcast{
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;

    padding-block: 0.5rem;
    padding-inline: 1rem;

    background-color: var(--clr--primary-500);
    color: var(--clr-white);

    width: 100%;
}

.episode__broadcast--station,
.episode__broadcast--timeslot,
.episode__broadcast--archive {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
}

.episode__broadcast--station a,
.episode__broadcast--timeslot a,
.episode__broadcast--archive a {
    color: var(--clr--secondary-400);
    text-decoration: none;
    transition: all 250ms;
}

.episode__broadcast--station a:hover,
.episode__broadcast--timeslot a:focus,
.episode__broadcast--archive a:hover,
.episode__broadcast--station a:focus,
.episode__broadcast--timeslot a:hover,
.episode__broadcast--archive a:focus {
    color: var(--clr--primary-400);
}

.episode__episode {
    
    display: grid;
    place-content: center;

    background-color: var(--clr-white);
    color: var(--clr--secondary-400);

    font-size: var(--font-size-fluid-0);
    
    padding-block: 0.5rem;
    padding-inline: 1rem;
    
    margin-block: 0;
    
    width: 100%;
}

.episode__episodes {
    display: grid;
    place-content: center;

    background-color: var(--clr--primary-400);
    color: var(--clr--primary-900);

    font-size: var(--font-size-fluid-0);
    
    padding-block: 1.25rem;
    padding-inline: 1rem;
    
    width: 100%;
}

.episode__spotify {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-content: center;

    background-color: var(--clr-spotify-black);
    color: var(--clr-spotify-white);

    width: 100%;
}

.episode__spotify picture {
    max-width: 180px;
    object-fit: cover;
    /* grid-column: 1 / 2;
    grid-row: 1 / -1; */
}

.episode__spotify span {
    display: grid;
    place-content: center;
    width: 100%;
}

.episode__spotify div {
    grid-column: span 2;

    display: grid;
    place-content: center;

    background-color: var(--clr-spotify-green);
    color: var(--clr-spotify-white);

    width: 100%;
}

.episode__spotify--link {
    width: 100%;
    color: var(--clr-spotify-white);
    text-decoration: none;
    transition: all 250ms;
    text-align: center;
    padding-block: 0.5rem;
    padding-inline: 1rem;
}

.episode__spotify--link:hover {
    color: var(--clr-spotify-black);
}

.episode__bubbling_under {
    align-self: center;

    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto;
    align-items: center;
    justify-content: center;
    gap: 1rem;

    font-size: var(--font-size-fluid-0);
    font-weight: bold;

    color: var(--clr-white);

    padding-block: 0.5rem;
    margin-block: 0;
}

.episode__icon {
    align-self: flex-start;
    text-align: center;
}

.episode__list {
    list-style: none;
    padding-inline-start: 0;
    color: var(--clr-white);
    width: 100%;
}

.episode__list li:nth-child(odd) {
    background-color: var(--clr-gold);
    color: var(--clr-white);
}

.episode__list li:nth-child(even) {
    background-color: var(--clr-white);
    color: var(--clr-gold);
}

.episode__list li:nth-child(odd) a,
.episode__list li:nth-child(even) a {
    color: inherit;
    text-decoration: none;
    transition: all 250ms;
}

.episode__list li:nth-child(odd) a:hover,
.episode__list li:nth-child(even) a:hover,
.episode__list li:nth-child(odd) a:focus,
.episode__list li:nth-child(even) a:focus {
    color: var(--clr--primary-400);
}

.episode__song {
    display: grid;
    grid-template-columns: minmax(min-content, max-content) 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        'p t'
        'p a';

    border-bottom: var(--clr-white) dashed 0.0625em;
}

.episode__more {
    display: grid;
    place-content: center;

    padding: 0.5em 1em;

    background-color: var(--clr-white);
}

.episode__more a {
    color: var(--clr--secondary-400);
    text-decoration: none;
    transition: all 250ms;
}

.episode__more a:hover,
.episode__more a:focus {
    color: var(--clr--secondary-200);
}

.episode__list li:last-child {
    border-bottom: none;
    /* Remove the bottom border for the last li */
}

.episode__song--position {
    grid-area: p;

    min-width: 4ch;

    display: grid;
    align-items: flex-start;
    justify-content: center;

    padding: 0.125em;
    background-color: var(--clr-gold);
    color: var(--clr-white);

    text-align: center;

}

.episode__song--no {
    display: grid;
    place-items: center;
    color: var(--clr-white);
    padding: 0.125em;
    text-align: center;
    width: 2em;
    font-size: var(--font-size-fluid-0);
    aspect-ratio: 1 / 1;
}

.episode__song--title {
    grid-area: t;
    padding: 0.5em 0.5rem 0.5em 0.5em;

    background-color: var(--clr-blue);

    font-size: var(--font-size-fluid-0);
    color: var(--clr-white);
    text-align: right;
}

.episode__song--artist {
    grid-area: a;
    padding: 0.5em 0.5rem 0.5em 0.5em;
    background-color: var(--clr--primary-300);
    font-size: var(--font-size-fluid-00);
    color: var(--clr-white);
    text-align: right;
}

.buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
    margin-bottom: 1em;

    grid-column: 1 / -1;
}

.btn {
    text-decoration: none;
    display: inline-block;
    text-align: center;
    width: fit-content;
    margin: 0 auto;
    padding-block: 0.5rem;
    padding-inline: 1rem;
    font-size: var(--font-size-fluid-0);
    border-radius: 0.5rem;
}

.btn--small {
    padding-block: 0.25rem;
    padding-inline: 0.75rem;
    font-size: var(--font-size-fluid-00);
}

.btn--light {
    background-color: var(--clr-white);
    color: var(--clr-black);
    transition: all 250ms;
}

.btn--light:hover,
.btn--light:focus {
    background-color: var(--clr-gold);
    color: var(--clr-white);
}

.btn--gold {
    background-color: var(--clr-gold);
    color: var(--clr-white);
    transition: all 250ms;
}

.btn--gold:hover,
.btn--gold:focus {
    background-color: var(--clr-white);
    color: var(--clr-black);
}

.biobak {
    display: grid;
    place-content: center;
}

.biobak_text {
    max-width: 56.25rem;
    margin-inline: auto;
}

.biobak_text a {
    color: var(--clr-gold);
    text-decoration: none;
}

.biobak_text a:hover,
.biobak_text a:focus {
    color: var(--clr-white);
}

/* Style the footer */
footer {
    background-color: var(--clr-footer-bg);
    color: var(--clr-footer-color);
    text-align: center;
    padding-block: calc(var(--spacing-main-outer-edge) / 2);
    padding-inline: calc(var(--spacing-main-outer-edge) / 2);

    font-family: monospace;

    display: flex;
    align-items: center;
    justify-content: flex-end;
}

@media screen and (max-width: 66.25rem) {
    .stream_cards {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 430px) {
    .section_title {
        font-size: var(--font-size-fluid-2);
    }

    .stream_cards,
    .lists {
        grid-template-columns: 1fr;
    }

    .stream_card__link a,
    .episode__song--artist,
    .bubblings__title {
        font-size: var(--font-size-fluid-0);
    }

    .episode__song--no,
    .episode__song--title {
        font-size: var(--font-size-fluid-1);
    }

}