/*
Theme Name: Template
Author: Rory Schillo
Version: 1.0
*/

:root {
    --bg1: #E9ECF2;
    --bg2: #2D4B97;
    --bg3: #D06E11;
    --bg4: #778DA9;
    --fg1: #000;
    --fg2: #FFFFFF;
    --fg3: #D06E11;
    --fg4: #2D4B97;
}

html 
{ 
    scroll-behavior: smooth; 
}

a:link, 
a:visited,
a:hover ,
a:active { 
    text-decoration: none; 
}

body {
    background-color: var(--bg1);
    color: var(--primary-fg);
    scroll-behavior: smooth;
    line-height: 1.25;
    margin: 0;
    font-size: 18px;
    font-family: sans-serif;
}

h1 {
    font-size: 38px;
    color: var(--fg4);
    font-weight: bold;
}

h2 {
    font-size: 28px;
    color: var(--fg4);
    font-weight: normal;
}

img {
    display: block;
}

.mouse-point {
    cursor: pointer;
}

.white-bg {
    background-color: var(--bg1);
    width: 100%;
    padding: 1px;
    box-sizing: border-box;
}

.window {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -5;
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

.anchor {
    height: 1px;
}

.flex {
    display: flex;
}

.align-center {
    align-items: center;
}

.content-center {
    align-content: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.hidden {
    visibility: hidden;
}

.full-width {
    width: 100%;
}

.img-darken {
    filter: brightness(0.7);
}

@media only screen and (min-width: 700px) {
    .narrow {
        display: none;
    }

    .wide {
        display: block;
    }

    .default-container {
        width: 75%;
        margin: 0 auto;
    }

    .thin-container {
        width: 65%;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 1450px) {
    .default-container {
        width: 95%;
        margin: 0 auto;
    }

    .thin-container {
        width: 85%;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 1150px) {
    .narrow {
        display: block;
    }

    .wide {
        display: none;
    }

    .mobile-hide {
        display: none !important;
    }

    body {
        font-size: 16px;
    }

    h1 {
        font-size: 32px;
    }
    
    h2 {
        font-size: 26px;
    }
}