/* main.css */

:root {
    --darkBlue: rgba(23, 30, 38, 1.0);
    --navy: rgba(39, 50, 64, 1.0);
    --blue: rgba(67, 77, 89, 1.0);
    --blueAlt: rgba(112, 137, 156, 1.0);
    --lightBlue: rgba(199, 214, 217, 1.0);
    --tan: rgba(191, 165, 142, 1.0);
    --lightBrown: rgba(166, 133, 114, 1.0);
    --brown: rgba(63, 51, 51, 1.0);
    --darkBrown: rgba(38, 29, 1, 1.0);
    --goldShine: linear-gradient(45deg, #b08d57, #d9c7a1, #8c6b40, #e4d7b6, #b08d57);
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato/Lato-Regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Lato-Light';
    src: url('../fonts/Lato/Lato-Light.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Lato-Bold';
    src: url('../fonts/Lato/Lato-Bold.ttf') format('truetype');
    font-display: swap;
}

html, body, .container, .content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 100%;
    font-family: 'Lato', sans-serif;
    font-display: swap;
    font-size: 1.0rem;
    font-weight: 400;
    color: white;
}

html {
    scroll-behavior: smooth;
    background-color: var(--darkBlue);
}

body {
    max-width: 1200px;
}

h2, h3, h4 {
    margin: 0;
    padding: 0;
    font-family: 'Lato-Bold', sans-serif;
    font-display: swap;
    font-weight: 700;
}

h5 {
    margin: 0;
    padding: 0;
    font-family: 'Lato-Light', sans-serif;
    font-display: swap;
    font-weight: 100;
}

p {
    margin: 0;
    padding: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

/* main */
#main-container {
    height: inherit;
    overflow: hidden;
}

main, section, article {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

main {
    background: linear-gradient(150deg, var(--blue) 0%, var(--navy) 30%, var(--darkBlue) 100%);
}

.gold-h3-title {
    flex: 0 0 auto;
    margin: 20px;
    font-family: 'Lato-Bold', sans-serif;
    font-size: 1.5rem;
    font-weight: bolder;
    text-transform: uppercase;
    background: var(--goldShine);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

@media
only screen and (min-width: 300px) and (max-width: 575px){

}

@media
only screen and (min-width: 576px) and (max-width: 935px){
    
}