/* Legacy Fonts */
@import url(https://fonts.googleapis.com/css2?family=Inter&display=swap); /* Inter font. */
@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,600,700"); /* Roboto font. */

/* Brand Fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans&display=swap'); /* DM Sans */
@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@700&display=swap'); /* Zilla Slab */
@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab+Highlight:wght@700&display=swap'); /* Zilla Slab Highlight */

/* Fonts CSS
    font-family: 'DM Sans', sans-serif;
    font-family: 'Zilla Slab', serif;
    font-family: 'Zilla Slab Highlight', cursive;
*/

/*
Note to self: 
    . = class
    # = id
*/

/* COLORS
#FEEEDF
#F2A74E
#395767
#6C4A38
#E3872E
#9DC1D3
#C8E3F1
*/

/****** GENERAL ELEMENTS ******/

* {
    font-family: 'DM Sans', "Inter", sans-serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    width: 100%;
}

body {
    position: relative;
    min-height: 100%;
    background-color: #FEEEDF;
}

h1 {
    text-align: center;
}

p {
    font-size: 14px;
    margin-top: 0px;
    margin-bottom: 8px;
}

nav a {
    color: #000000;
    display: flex;
    text-decoration: none;
    vertical-align: center;
    font-size: 20px;
    padding: 0px 8px;
}

button {
    font-size: 16px;
    
    border-radius: 6px;
    padding: 4px 10px;
}

input {
    font-size: 16px;
    
    border-radius: 4px;
    padding: 4px;
}

.dark button {
    color: #FFFFFF;
    background-color: #425466;
}

.large button {
    height: 50px;
    width: 300px;
    min-height: 50px;
    min-width: 300px;
}


/****** DEVELOPER ******/

/* DEV TOOL: Used to check the border properties of an element. */
#testborder {
    border-style: outset;
    border-width: 5px;
    border-color: red;
}

/* DEV TOOL: Used to check the border properties of an element. */
.testborder {
    border-style: outset;
    border-width: 5px;
    border-color: red;
}

/* DEV TOOL: Used to check the border properties of an element. */
.testborder-all * {
    border-style: outset;
    border-width: 1px;
    border-color: blue;
}


/****** GENERAL HEADER BAR ******/

/* Defines the header bar. */
header {

    display: flex;
    align-items: center;
    padding: 8px;
    
    background-color: #FEEEDF;
    width: 100%;
    min-height: 60px;
    z-index: 10;
}

/* All elements on the header bar. */
header * {
    display: flex;
    align-items: center;
    height: 48px;
    margin: 0;
    padding: 0px 8px;
}

/* Paragraph elements on the header bar. */
header p {
    color: #395767;
    font-size: 32px;
}


/****** GENERAL FOOTER BAR ******/

/* Defines the footer bar. */
footer {
    display: flex;
    position: relative;
    background-color: #395767;
    width: 100%;
    padding: 8px;
    z-index: 10;
}

footer div {
    width: 100%;
}

/* Paragraph elements on the footer bar. */
footer p {
    color: #FFFFFF;
    font-size: 24px;
}

footer img.logo {
    display: flex;
    height: 48px;
    background-color: #FFFFFF;
    border-radius: 50%;
}

footer .copyright {
    text-align: right;
}

/****** GENERAL CONTENT CONTAINER ******/

/* Used on the main content container. */
.content-container {
    /* height: 100%; */
}


/****** GENERAL PROPERTIES ******/

/* Font colors */
.fc-lightorange { color: #FEEEDF }
.fc-mediumorange { color: #F2A74E }
.fc-darkorange { color: #E3872E }
.fc-brown { color: #6C4A38 }
.fc-darkblue { color: #395767 }
.fc-mediumblue { color: #9DC1D3 }
.fc-lightblue { color: #C8E3F1 }

/* Font sizes */
.fs16 { font-size: 16px; }
.fs20 { font-size: 20px; }
.fs24 { font-size: 24px; }
.fs28 { font-size: 28px; }
.fs32 { font-size: 32px; }
.fs36 { font-size: 36px; }
.fs40 { font-size: 40px; }
.fs44 { font-size: 44px; }
.fs48 { font-size: 48px; }
.fs64 { font-size: 64px; }
.fs72 { font-size: 72px; }
.fs80 { font-size: 80px; }
.fs88 { font-size: 88px; }

/* Margins. */
.m-auto { margin: auto; }
.m0 { margin: 0; }
.m0_8 { margin: 0px 8px; }
.m0_16 { margin: 0px 16px; }
.m32 { margin: 32px; }
.m32_0 { margin: 32px 0px; }

/* Padding */
.pad0 { padding: 0px; }
.pad4_0 { padding: 4px 0px; }
.pad8 { padding: 8px; }
.pad8_16 { padding: 8px 16px; }
.pad16 { padding: 16px; }
.pad32 { padding: 32px; }

/* Wrapping method. */
.no-wrap {
    white-space: nowrap;
}

/* Defines something as a flex display. */
.flex {
    display: flex;
}

.flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

.flex-row * {
    display: flex;
    vertical-align: middle;
    padding: 0px 8px;
}

.flex-column {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.justify-self-c {
    justify-self: center;
}

/* Min-max viewport widths. */
.vw50 {
    width: 50vw;
    min-width: 640px;
}

.vw65 {
    width: 65vw;
    min-width: 640px;
}

.vw75 {
    width: 75vw;
    min-width: 640px;
}

/*** Miscellaneous ***/
.shadow-box {
    box-shadow: 0px 0px 2px black;
}

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

.spacer {
    flex-grow: 1;
}

.align-text-c {
    text-align: center;
}