:root {

    --primary-clr: #446CC7;
    --secondary-clr: #3FC0F4;
    --accent-clr: #FF8FBB;

    --body-color: hsla(244, 42%, 32%, 1);

    --display: 'Creepy Sunday', serif;
    --body: 'Bricolage Grotesque', sans-serif;

}        
    
    body {
        font-size: 1rem;
        color: #332F72;
        line-height: 1.6;
    }
    
    main {
        margin: 0;
        text-align: center;
        max-width: 800px;
    }
    
    h1 {
        font-family: var(--display);
        font-weight: bold;
        font-size: 3rem;
        line-height: 1;
        margin: 1em auto;
    }
    
    h2 a {
        font-family: var(--display);
        font-weight: bold;
        color: var(--primary-clr);
        font-size: 2.25rem;
        line-height: 1.2;
        padding-bottom: 1em;
        transition: 200ms;
    }
    
    h2 a span {
        color: var(--secondary-clr);
        transition: 200ms;
    }

    h2 a:hover span {
        color: var(--accent-clr);
    }

    h3 {
        font-family: var(--display);
        font-weight: 900;
        font-size: 1.6em;
        line-height: 1.2;
    }
    
    a {
        color: var(--secondary-clr);
        font-weight: 600;
        text-decoration: none;
    }
    
    a:hover {
        color: var(--accent-clr);
        transition: 0.2s
    }

    b {
        color: var(--primary-clr);
        /* text-transform: uppercase; */
        font-weight: 800;
    }
    
    p {
        margin: 1em;
        font-family: var(--body);
        font-weight: 400;
    }
    
/*  NAVIGATION */

    nav {
        margin: 3em auto 2em auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .nav-image {
        margin: 0;
        padding-block: 1em;
    }
    
    .nav-links {
        margin: 3em auto 1em auto; 
        font-family: var(--display);
        font-weight: bold;
    }
    
    nav ul {
        margin: 0;
        list-style-type: none;
        text-align: left;
        font-size: 3rem;
        line-height: 1.1;
        padding-left: 1em;
    }

    nav ul li ul {
        font-size: 0.9em;
    }

    .back {
        display: flex;
        flex-direction: column;
        gap: 0.5em;
        z-index: 9;
        position: fixed;
        bottom: 1em;
        left: 1em;
        opacity: 15%;
        transition: all 200ms;
    }
    
    .back a {
        color: var(--header-clr);
        font-size: 2rem;
        line-height: 0;
        transition: all 200ms;
    }
    
    .back:hover {
        opacity: 100%;
        color: var(--accent-clr)
    }

    .art {
        margin: 0;
        display: flex;
        flex-flow: row wrap;
    }

    .art img {
        max-height: 450px;
        max-width: 400px;
        padding: 1em 0em;
    }

    button {
        padding: 0.125em 0.75em;
        font-family: var(--display);
        font-size: 1.25rem;
        font-weight: 900;
        border-radius: 0.5em;
    }

    .primary {
        color: #fff;
        background: var(--body-color);
        border: 1px solid var(--body-color);
        transition: background ease 100ms;
    }

    .primary:hover {
        background: var(--accent);
        border: 1px solid var(--accent);
    }

    .chara b {
        font-family: 'Bright Dreams';
        font-size: 1em;
        font-weight: normal;
        /* letter-spacing: 0.05em; */
        text-transform: capitalize;
    }

@media all and (min-width: 700px) {
    
    main {
        margin: auto;
        /* max-width: 70ch; */
    }

    section {
        margin: 3em auto;
        width: 75ch;
    }
    
    h1 {
        margin-block: .5em;
    }
    
    p {
        margin: 1em auto;
    }
    
    nav {
        width: 100%;
        flex-direction: row;
        margin-block: 2em;
        position: relative;
    }
    
    .nav-image {
        max-width: 100%;
        padding: 0;
        margin-left: 3em;
        position: relative;
        z-index: 1;
    }
    
    .nav-links {
        padding: 4em 2em 2em 0em;
        margin-left: -3em;
        margin-top: -1.2em;
        position: relative;
        z-index: 2;
    }
    
    .art {
        margin: 0;
        padding: 0;
        display: flex;
        flex-flow: row wrap;
    }
    
    .art p {
        padding: 2em;
    } 

}