/* GENERAL */

* {

    &::selection {

        color: #071413;
        background-color: #c9d3dd;;
    } 
}

.callout-heading {

    font-size: 2em;
    font-family: 'Argent-CF', serif;
    letter-spacing: -3%;
    font-weight: 300;
    line-height: calc(var(--unitC) + 1em);
    margin-bottom: 1rem;
    width: auto;
    background-color: transparent;
}

.section-heading {

    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    font-family: 'Articulat-CF', sans-serif;
    text-transform: uppercase;
    letter-spacing: 5%;
    line-height: 115%;
    font-size: calc(calc(var(--unitA) + calc(var(--unitB) + var(--unitC))) / 5);
    margin-bottom: var(--unitA);
    width: 100%;
}

.topic-heading {
    font-weight: 300;
    font-family: 'Montserrat', sans-serif;
    font-family: 'Articulat-CF', sans-serif;
    text-transform: uppercase;
    letter-spacing: 4%;
    line-height: 115%;
    font-size: min(calc(var(--unitC) * 1), var(--unitA));
    margin-bottom: var(--unitA);
    width: 100%;
    color: #ced1d2;
}

.body-text {

    font-size: 1rem;
    font-size: 0.9rem;
    font-family: 'Argent-CF', serif;
    letter-spacing: -1%;
    font-weight: 100;
    line-height: calc(var(--unitC) + 1rem);
    width: 100%;
    margin-bottom: 1em;
    padding: 1px;
    /* color: #33cdfe; */
    color: #bae3f0;
    color: #5DB1FF;
    color: #a3cff7;
}

.alt-voice {

    font-family: 'Anonymous', monospace;
    line-height: max(calc(var(--unitC) + 0.5rem), 150%);
    font-size: 0.6rem;
    width: 25em;
    margin-bottom: 1em;
}

.light-text .body-text {

    color: #def1f7;
}

.dark-text {

    color: #001c25;
}

figcaption {

    font-size: 0.5rem;
    text-align: center;
    font-family: 'Articulat-CF', sans-serif;
    padding: 1rem;
    color: #6f7775;
}


/* INTERIOR PAGES */

.drop-capped {

    --drop-color: #333;
    
    &::first-letter {

        box-sizing: border-box;
        font-family: "Montserrat", sans-serif;
        /* font-family: "Impact", sans-serif; */
        display: block;
        float: left;
        font-size: calc(3em + var(--unitC));
        line-height: 100%;
        font-weight: 900;
        padding: var(--unitC) calc(.05em + var(--unitC));
        margin-right: 0.1em;
        background-color: rgb(18, 18, 18);
        color: var(--drop-color);

        border: 0.5px solid var(--drop-color);
    }
}

.page-title {

    display: block;
    font-size: 1em;
    /* text-shadow: 1px 1px 0 #001c25; */

}

.client-name {

    font-size: var(--unitA);
    display: block;
    font-family: 'Argent-CF', serif;
    margin: var(--unitC) 0;
    font-weight: 100;
    letter-spacing: 0%;

    & b {

        opacity: 0;
    }
}

.project-name {

    font-size: var(--unitB);
    display: block;
    font-family: 'Articulat-CF', sans-serif;
    font-weight: 400;
    /* color: #ffffff; */
}

.superscript {
    font-size: 0.5em;
    position: relative;
    font-weight: 100;
    letter-spacing: 2%;
    top: -1em;
    color: #71b8fadd;
    /* color: #68b2f8; */
}


/* LINKS AND STUFF */

a {
    text-decoration: none;
}

a.linkOut {

    text-decoration: underline;
    color: rgb(136, 169, 182);
    color: #94cbde;

    &:hover {
        color: #c9d3dd;
    }
    &:visited {

        text-decoration: dotted;
    }
}

.light-text .linkOut {

    color: inherit;
}

em, cite, i {

    font-style: italic;
}


/* MEDIA QUERIES FOR THIS SET OF RULES */
@media screen and (min-width: 2400px) {
    
    .body-text {
        line-height: 125%;
    }
}

@media screen and (min-width: 1200px) {

    .page-title {
        
    } 
}

@media screen and (max-width: 800px) {

    .body-text {

        font-weight: 100;
        letter-spacing: 1%;
    }

    .splash-messaging {

        font-size: min(calc(calc(var(--unitB) * 2) + 1rem), 2rem);
        font-size: 1rem; !important
    }
}

@media screen and (max-width: 600px) {


    .body-text {

        font-weight: 100;
        letter-spacing: 6.5%;
    }

    .alt-voice {

        line-height: 210%;
    }

    .project-name {

        font-size: calc(var(--unitB) * 1.5);
    }
}

@media screen and (max-width: 400px) {


}