/* Define Variables */

@font-face {
    font-family: 'sansationbold';
    src: url('../fonts/Sansation-Bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    }
@font-face {
    font-family: 'sansationregular';
    src: url('../fonts/Sansation-Regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    }

.open-sans-textfont {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    }

.sansationregular { font-family: 'sansationregular', serif; }
.sansationbold { font-family: 'sansationbold', serif; }

:root {
    
    --dark-text: rgba(41, 50, 65, 1);
    --light-text: #dbdbdb;
    
    --button-background: rgba(116,182,168);
    --dark-background: #0e5c66;
    --light-background: #2b7079;
    
    --light-line: rgba(101, 150, 164, 1);
    --dark-line: rgba(49, 118, 134, 1);
    
    --header-font-color: rgba(255, 255, 255, 1);
    --subheader-font-color: black;
    
    --Text-font-Size: 14px;
    --SubSubHeader-font-Size: 1em;
    --SubHeader-font-Size: 1em;
    --Header-font-Size: 1.4em;

    --Text-font-weight: 500;
    --SubSubHeader-font-weight: 600;
    --SubHeader-font-weight: 700;
    --Header-font-weight: 800;

    --primary-100:#1c6e5b;
    --primary-200:#509d88;
    --primary-300:#ffffff;
    --accent-100:#f3eae6;
    --accent-200:#a5a19f;
    --text-100:#ffffff;
    --text-200:#e0e0e0;
    --bg-100:#74B6A8;
    --bg-200:#6aac9e;
    --bg-300:#458679;

    --color-100:#0C6877;
    --color-200:#8EAFC0;
    --color-300:#2F7786;

    --primary-color: #f8f9fa;
    --secondary-color: #343a40;
    --tertiary-color: #007bff;
    --septenary-color: rgba(61, 90, 128, 1);
    --octonary-color: rgba(152, 193, 217, 1);
    --nonary-color: rgba(224, 251, 252, 1);
    --denary-color: #F29200;
    --eleventh-color: rgba(41, 50, 65, 1);
    
    --Text-font: 'Open Sans', sans-serif;
    --Header-font: 'Sansationbold', sans-serif;
    --SubHeader-font: 'Sansationregular', sans-serif;
    
    --Border-definition: 3px solid #000;
    --Border-radius: 9px;
    --Box-Shadow: 0 0 30px rgba(0,0,0,.5);
}

/* Reset default styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--Text-font);
}

/* Set Standard Layout Details */

/* Set font and background color */
body {
    background-color: var(--dark-background);
    min-height: 100dvh;
    justify-items: left;
    font-family: var(--Text-font);
    font-size: var(--Text-font-Size);
    text-align: -webkit-center;
}

/* Add some styles to headings */
h1 {
    font-family: var(--Header-font);
    font-size: var(--Header-font-Size);
    font-weight: var(--Header-font-weight);
    /* margin: 1em; */
    letter-spacing: -1px;
}

h2 {
    font-family: var(--SubHeader-font);
    font-size: var(--SubHeader-font-Size);
    font-weight: var(--SubHeader-font-weight);
    color: var(--primary-100);
    padding: 1em;
}

h3 {
    font-family: var(--SubSubHeader-font);
    font-size: var(--SubSubHeader-font-Size);
    font-weight: var(--SubSubHeader-font-weight);
}

/* Add some styles to paragraphs */
p {
    line-height: 1;
}
/* Index.php Styling */
.header { 
    font-size: 1.5em;
    font-weight: 700;
    font-family: var(--Header-font);

    img {
        width: 60%;
        height: auto;
    }
}

.header h3 {
    font-size: 1.1em;
    font-weight: 700;
    font-family: var(--Header-font);
    color: var(--denary-color);
    padding-bottom: 10px;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* border: var(--Border-definition); */
    border-radius: 25px;
    width: 99dvw;
    height: auto;
    text-align: center;
    font-size: 1.5em;
    font-weight: 700;
    font-family: var(--Header-font);
    color: var(--dark-text);
    background-color: white;
}

.footer {
    background-color: var(--dark-background);
    color: var(--light-text);
    padding: 1em;
    text-align: center;
    font-size: .9em;
    font-weight: 300;
    font-family: var(--Header-font);
}