/*
Fonts
=====

Title: "Bungee"
Title Emphasis: "Bungee Shade"
Body: "Roboto"
Mono: "Roboto Mono"

Media Queries
=============

Small: <480px
Medium: <800px
Large: <1100px

 */

:root {
    --theme-05: hsl(45, 100%, 5%) !important;
    --theme-10: hsl(45, 100%, 10%) !important;
    --theme-15: hsl(45, 100%, 15%) !important;
    --theme-20: hsl(45, 100%, 20%) !important;
    --theme-30: hsl(45, 100%, 30%) !important;
    --theme-40: hsl(45, 100%, 40%) !important;
    --theme-50: hsl(45, 100%, 50%) !important;
    --theme-60: hsl(45, 100%, 60%) !important;
    --theme-70: hsl(45, 100%, 70%) !important;
    --theme-80: hsl(45, 100%, 80%) !important;
    --theme-85: hsl(45, 100%, 85%) !important;
    --theme-90: hsl(45, 100%, 90%) !important;
    --theme-95: hsl(45, 100%, 95%) !important;

    --primary-05: hsl(160, 28%, 5%) !important;
    --primary-10: hsl(160, 28%, 10%) !important;
    --primary-15: hsl(160, 28%, 15%) !important;
    --primary-20: hsl(160, 28%, 20%) !important;
    --primary-30: hsl(160, 28%, 30%) !important;
    --primary-40: hsl(160, 28%, 40%) !important;
    --primary-50: hsl(160, 28%, 50%) !important;
    --primary-60: hsl(160, 28%, 60%) !important;
    --primary-70: hsl(160, 28%, 70%) !important;
    --primary-80: hsl(160, 28%, 80%) !important;
    --primary-85: hsl(160, 28%, 85%) !important;
    --primary-90: hsl(160, 28%, 90%) !important;
    --primary-95: hsl(160, 28%, 95%) !important;

    --secondary-05: hsl(27, 80%, 5%) !important;
    --secondary-10: hsl(27, 80%, 10%) !important;
    --secondary-15: hsl(27, 80%, 15%) !important;
    --secondary-20: hsl(27, 80%, 20%) !important;
    --secondary-30: hsl(27, 80%, 30%) !important;
    --secondary-40: hsl(27, 80%, 40%) !important;
    --secondary-50: hsl(27, 80%, 50%) !important;
    --secondary-60: hsl(27, 80%, 60%) !important;
    --secondary-70: hsl(27, 80%, 70%) !important;
    --secondary-80: hsl(27, 80%, 80%) !important;
    --secondary-85: hsl(27, 80%, 85%) !important;
    --secondary-90: hsl(27, 80%, 90%) !important;
    --secondary-95: hsl(27, 80%, 95%) !important;

    --tertiary-05: hsl(36, 90%, 5%) !important;
    --tertiary-10: hsl(36, 90%, 10%) !important;
    --tertiary-15: hsl(36, 90%, 15%) !important;
    --tertiary-20: hsl(36, 90%, 20%) !important;
    --tertiary-30: hsl(36, 90%, 30%) !important;
    --tertiary-40: hsl(36, 90%, 40%) !important;
    --tertiary-50: hsl(36, 90%, 50%) !important;
    --tertiary-60: hsl(36, 90%, 60%) !important;
    --tertiary-70: hsl(36, 90%, 70%) !important;
    --tertiary-80: hsl(36, 90%, 80%) !important;
    --tertiary-85: hsl(36, 90%, 85%) !important;
    --tertiary-90: hsl(36, 90%, 90%) !important;
    --tertiary-95: hsl(36, 90%, 95%) !important;

    --banner-color: hsl(45, 100%, 10%) !important;

    --font-title: "Bungee";
    --font-title-emphasis: "Bungee Shade";
    --font-mono: "Roboto Mono";
}

html {
    background-color: var(--theme-90);
    color: var(--theme-10);
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 1rem;
}

body {
    display: grid;

    grid-template-areas:
        "header header header"
        ". main ."
        "footer footer footer";
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1rem 1fr 1rem;
    row-gap: 2rem;

    @media (min-width: 1100px) {
        grid-template-columns: 1fr 1100px 1fr;
    }

    min-height: 100vh;
    margin: 0 !important;
}

main {
    grid-area: main;
    /*min-height: calc(100vh - 180px);*/
}

header {
    grid-area: header;
    background: var(--theme-10);

    a {
        font-family: "Bungee", sans-serif;
        color: var(--secondary-60);
    }

    .link-group {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    nav {
        max-width: 1100px;
        margin: 0 auto;
    }

    nav:first-of-type {
        display: flex;
        justify-content: space-between;

        padding-top: 1rem;
        padding-bottom: 1rem;

        .home-link {
            font-size: 1.5rem;
            letter-spacing: 0.1rem;
        }
    }

    nav:not(:first-of-type) {
        background: var(--theme-20);
    }
}

footer {
    grid-area: footer;

    background: var(--theme-10);
    padding: 3rem 0;

    nav {
        max-width: 1100px;
        margin: 0 auto;

        display: flex;
        flex-wrap: wrap;
        justify-content: left;
        gap: 2rem;

        color: var(--tertiary-60);

        a {
            color: inherit;
            font-weight: inherit;
        }

        & > span {
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }
    }
}

/*******************************************************************************
 *
 * Text elements
 *
 *******************************************************************************/

a {
    display: inline-flex;
    gap: 0.2rem;

    color: var(--primary-70);
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}

b {
    font-weight: 600;
}

em {
    color: var(--primary-50);
    font-style: italic;
    font-weight: 400;
}

strong {
    color: var(--primary-50);
    font-weight: 600;
}

/*******************************************************************************
 *
 * Input
 *
 *******************************************************************************/

input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=tel],
input[type=url],
input[type=search],
input[type=date] {
    /*@apply transition px-1;*/
    border-bottom: 2px solid var(--secondary-50);
    background: var(--theme-90);

    &:focus {
        outline: none;
        border-color: var(--secondary-50);
    }
}

.button,
button,
input[type=button],
input[type=submit] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    transition: background-color 0.2s ease-in-out,
    color 0.2s ease-in-out;

    width: fit-content;
    padding: 0.5rem 1rem;
    border: 2px solid var(--primary-50);
    border-radius: 1.5rem;

    background: inherit;
    color: var(--primary-50);
    font-family: inherit;
    font-size: inherit;

    &:hover:not(:disabled) {
        color: var(--theme-90);
        background: var(--primary-50);
        text-decoration-line: none;

        cursor: pointer;
    }

    &:active:not(:disabled) {
        transform: scale(0.95);
    }

    &:disabled {
        color: var(--primary-70);
        border-color: var(--primary-70);

        &:hover {
            cursor: not-allowed;
        }
    }
}

textarea {
    border: 2px solid var(--secondary-50);

    &:focus {
        outline: none;
        border-color: var(--secondary-50);
    }
}

/*******************************************************************************
 *
 * Lists
 *
 *******************************************************************************/

li {
    & > ul > li {
        margin-left: 1rem;
    }
}

dl {
    dt {
        font-weight: 500;
        margin-top: 0.2rem;
    }

    dd {
        margin-left: 1rem;
    }
}

.lyric-list {
    list-style: none;
    padding: 0;
    gap: 2rem;

    li {
        display: flex;
        gap: 1rem;
        line-height: 1.8;

        a {
            color: var(--primary-30);
            font-weight: 400;
        }

        a + span {
            color: var(--secondary-60);
        }
    }
}

/*******************************************************************************
 *
 * Blocks
 *
 *******************************************************************************/

pre {
    font: inherit;
    overflow-x: auto;
}

blockquote {
    border-left: 2px solid var(--tertiary-50);
    padding: 0.5rem 1rem;
}

code {
    font-family: "Roboto Mono", monospace;
    font-size: inherit;
    font-weight: inherit;
}

details {
    summary {
        font-weight: 500;
        padding: 0.2rem 0;
    }

    & > div {
        border-left: 2px solid var(--tertiary-50);
        padding: 0 0.5rem;
        margin-left: 0.3em;
    }
}

/*******************************************************************************
 *
 * Headings
 *
 *******************************************************************************/

h1, h2, h3, h4, h5, h6, .title {
    align-items: baseline;

    color: var(--primary-50);
    font-family: "Bungee", sans-serif;
    font-size: revert;
    margin-top: 1rem;
    letter-spacing: 0.05em;

    & > em {
        color: inherit;
        font-family: var(--font-title-emphasis), sans-serif;
        font-style: inherit;
        font-weight: 400;
    }
}

h1 {
    font-size: 1.8rem;
}

h2 {
    font-size: 1.5rem;
}

h3, h4, h5, h6 {
    font-size: 1.2rem;
}

/*******************************************************************************
 *
 * Lyric
 *
 *******************************************************************************/

.lyric {
    p {
        margin-top: 2rem;
        line-height: 1.5;
    }

    .artist {
        margin-top: 0;
        color: var(--secondary-50);
        font-family: "Bungee", sans-serif;
    }
}

/*******************************************************************************
 *
 * Custom Classes
 *
 *******************************************************************************/

.font-title {
    font-family: "Bungee", sans-serif;
}

.font-title-emphasis {
    font-family: "Bungee Shade", sans-serif;
}

.font-body {
    font-family: "Roboto", sans-serif;
}

.font-mono {
    font-family: "Roboto Mono", monospace;
}

/*******************************************************************************
 *
 * Color Utility Classes
 *
 *******************************************************************************/

/* Theme Colors */
.bg-theme-05 {
    background-color: var(--theme-05);
}

.bg-theme-10 {
    background-color: var(--theme-10);
}

.bg-theme-15 {
    background-color: var(--theme-15);
}

.bg-theme-20 {
    background-color: var(--theme-20);
}

.bg-theme-30 {
    background-color: var(--theme-30);
}

.bg-theme-40 {
    background-color: var(--theme-40);
}

.bg-theme-50 {
    background-color: var(--theme-50);
}

.bg-theme-60 {
    background-color: var(--theme-60);
}

.bg-theme-70 {
    background-color: var(--theme-70);
}

.bg-theme-80 {
    background-color: var(--theme-80);
}

.bg-theme-85 {
    background-color: var(--theme-85);
}

.bg-theme-90 {
    background-color: var(--theme-90);
}

.bg-theme-95 {
    background-color: var(--theme-95);
}

.text-theme-05 {
    color: var(--theme-05);
}

.text-theme-10 {
    color: var(--theme-10);
}

.text-theme-15 {
    color: var(--theme-15);
}

.text-theme-20 {
    color: var(--theme-20);
}

.text-theme-30 {
    color: var(--theme-30);
}

.text-theme-40 {
    color: var(--theme-40);
}

.text-theme-50 {
    color: var(--theme-50);
}

.text-theme-60 {
    color: var(--theme-60);
}

.text-theme-70 {
    color: var(--theme-70);
}

.text-theme-80 {
    color: var(--theme-80);
}

.text-theme-85 {
    color: var(--theme-85);
}

.text-theme-90 {
    color: var(--theme-90);
}

.text-theme-95 {
    color: var(--theme-95);
}

/* Primary Colors */
.bg-primary-05 {
    background-color: var(--primary-05);
}

.bg-primary-10 {
    background-color: var(--primary-10);
}

.bg-primary-15 {
    background-color: var(--primary-15);
}

.bg-primary-20 {
    background-color: var(--primary-20);
}

.bg-primary-30 {
    background-color: var(--primary-30);
}

.bg-primary-40 {
    background-color: var(--primary-40);
}

.bg-primary-50 {
    background-color: var(--primary-50);
}

.bg-primary-60 {
    background-color: var(--primary-60);
}

.bg-primary-70 {
    background-color: var(--primary-70);
}

.bg-primary-80 {
    background-color: var(--primary-80);
}

.bg-primary-85 {
    background-color: var(--primary-85);
}

.bg-primary-90 {
    background-color: var(--primary-90);
}

.bg-primary-95 {
    background-color: var(--primary-95);
}

.text-primary-05 {
    color: var(--primary-05);
}

.text-primary-10 {
    color: var(--primary-10);
}

.text-primary-15 {
    color: var(--primary-15);
}

.text-primary-20 {
    color: var(--primary-20);
}

.text-primary-30 {
    color: var(--primary-30);
}

.text-primary-40 {
    color: var(--primary-40);
}

.text-primary-50 {
    color: var(--primary-50);
}

.text-primary-60 {
    color: var(--primary-60);
}

.text-primary-70 {
    color: var(--primary-70);
}

.text-primary-80 {
    color: var(--primary-80);
}

.text-primary-85 {
    color: var(--primary-85);
}

.text-primary-90 {
    color: var(--primary-90);
}

.text-primary-95 {
    color: var(--primary-95);
}

/* Secondary Colors */
.bg-secondary-05 {
    background-color: var(--secondary-05);
}

.bg-secondary-10 {
    background-color: var(--secondary-10);
}

.bg-secondary-15 {
    background-color: var(--secondary-15);
}

.bg-secondary-20 {
    background-color: var(--secondary-20);
}

.bg-secondary-30 {
    background-color: var(--secondary-30);
}

.bg-secondary-40 {
    background-color: var(--secondary-40);
}

.bg-secondary-50 {
    background-color: var(--secondary-50);
}

.bg-secondary-60 {
    background-color: var(--secondary-60);
}

.bg-secondary-70 {
    background-color: var(--secondary-70);
}

.bg-secondary-80 {
    background-color: var(--secondary-80);
}

.bg-secondary-85 {
    background-color: var(--secondary-85);
}

.bg-secondary-90 {
    background-color: var(--secondary-90);
}

.bg-secondary-95 {
    background-color: var(--secondary-95);
}

.text-secondary-05 {
    color: var(--secondary-05);
}

.text-secondary-10 {
    color: var(--secondary-10);
}

.text-secondary-15 {
    color: var(--secondary-15);
}

.text-secondary-20 {
    color: var(--secondary-20);
}

.text-secondary-30 {
    color: var(--secondary-30);
}

.text-secondary-40 {
    color: var(--secondary-40);
}

.text-secondary-50 {
    color: var(--secondary-50);
}

.text-secondary-60 {
    color: var(--secondary-60);
}

.text-secondary-70 {
    color: var(--secondary-70);
}

.text-secondary-80 {
    color: var(--secondary-80);
}

.text-secondary-85 {
    color: var(--secondary-85);
}

.text-secondary-90 {
    color: var(--secondary-90);
}

.text-secondary-95 {
    color: var(--secondary-95);
}

/* Tertiary Colors */
.bg-tertiary-05 {
    background-color: var(--tertiary-05);
}

.bg-tertiary-10 {
    background-color: var(--tertiary-10);
}

.bg-tertiary-15 {
    background-color: var(--tertiary-15);
}

.bg-tertiary-20 {
    background-color: var(--tertiary-20);
}

.bg-tertiary-30 {
    background-color: var(--tertiary-30);
}

.bg-tertiary-40 {
    background-color: var(--tertiary-40);
}

.bg-tertiary-50 {
    background-color: var(--tertiary-50);
}

.bg-tertiary-60 {
    background-color: var(--tertiary-60);
}

.bg-tertiary-70 {
    background-color: var(--tertiary-70);
}

.bg-tertiary-80 {
    background-color: var(--tertiary-80);
}

.bg-tertiary-85 {
    background-color: var(--tertiary-85);
}

.bg-tertiary-90 {
    background-color: var(--tertiary-90);
}

.bg-tertiary-95 {
    background-color: var(--tertiary-95);
}

.text-tertiary-05 {
    color: var(--tertiary-05);
}

.text-tertiary-10 {
    color: var(--tertiary-10);
}

.text-tertiary-15 {
    color: var(--tertiary-15);
}

.text-tertiary-20 {
    color: var(--tertiary-20);
}

.text-tertiary-30 {
    color: var(--tertiary-30);
}

.text-tertiary-40 {
    color: var(--tertiary-40);
}

.text-tertiary-50 {
    color: var(--tertiary-50);
}

.text-tertiary-60 {
    color: var(--tertiary-60);
}

.text-tertiary-70 {
    color: var(--tertiary-70);
}

.text-tertiary-80 {
    color: var(--tertiary-80);
}

.text-tertiary-85 {
    color: var(--tertiary-85);
}

.text-tertiary-90 {
    color: var(--tertiary-90);
}

.text-tertiary-95 {
    color: var(--tertiary-95);
}

.w-full-screen {
    width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: unset;
}

.w-full {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: unset;
}

.gap-1 {
    gap: 0.5rem;
}

.gap-2 {
    gap: 1rem;
}

.gap-3 {
    gap: 1.5rem;
}

.gap-4 {
    gap: 2rem;
}