:root{
    --is-primary-font: 'DM Mono', monospace;
    --is-secondary-font: 'Open Sans', sans-serif; 
    --is-header-color: #39291A;
    --header-size: 3rem;
    --is-accent-color: #CA935F;
    --is-background-color: #ECE4DB;
}


body {
    font-family: 'Open Sans';
    background-color: #ECE4DB; 
    overflow: hidden;
    color: var(--is-header-color);
    background-size: cover;
}
#bg-home {
    background-image: url(/images/svgs/background-home.svg);
}

#bg-about {
    background-image: url(/images/svgs/background-about.svg);

}

/* Makes Element BG Transparent*/
.is-clear {
    background-color: transparent;
}

/* Title Overrides */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--is-primary-font); 
    color: var(--is-header-color);
}

.title {
    color: var(--is-header-color);
}

.subtitle {
    font-size: 2rem
}


/* Layout Depth */
.back {
    z-index: 0;
}

.middle {
    z-index: 2;
}

.front {
    z-index: 3;
}

/* Buttons */
.button { 
    background: linear-gradient(317.7deg, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0.4) 105.18%), #ECE4DB;
    background-blend-mode: soft-light, normal;
    border-radius: 20px;
    border: none;
}

 

.button:hover {
    box-shadow: -10px -10px 20px #FAFBFF, 10px 10px 20px rgba(202, 147, 95, 0.8);

}

/* Misc. Helpers*/

.is-vampire {
    box-shadow: none;
}


.is-in {
    box-shadow: inset -2.5px -2.5px 5px #FAFBFF, inset 2.5px 2.5px 5px rgba(202, 147, 95, 0.8);

}

.is-out { 
    box-shadow: -10px -10px 20px #FAFBFF, 10px 10px 20px rgba(202, 147, 95, 0.8);
}

.brand {
    font-family: var(--is-primary-font);
    letter-spacing: 2px;
    font-weight:800;
    box-shadow: -10px -10px 20px #FAFBFF, 10px 10px 20px rgba(202, 147, 95, 0.8);
}

.is-accent {
    background-color: var(--is-accent-color);
    color: white;
}

.is-accent:hover {
    color: white;
}