:root {
    /*Main Colors*/
    --text: #050315;
    --background: #fbfbfe;
    --primary: #27ce29;
    --secondary: #ff6767;
    --accent: #9f1381;

    /* Shades */
    --text-50: #ebe9fc;
    --text-100: #d7d2f9;
    --text-200: #afa6f2;
    --text-300: #8779ec;
    --text-400: #5e4ce6;
    --text-500: #3620df;
    --text-600: #2b19b3;
    --text-700: #211386;
    --text-800: #160d59;
    --text-900: #0b062d;
    --text-950: #050316;

    --background-50: #ebebfa;
    --background-100: #d6d6f5;
    --background-200: #adadeb;
    --background-300: #8585e0;
    --background-400: #5c5cd6;
    --background-500: #3333cc;
    --background-600: #2929a3;
    --background-700: #1f1f7a;
    --background-800: #141452;
    --background-900: #0a0a29;
    --background-950: #050514;

    --primary-50: #eafbea;
    --primary-100: #d4f7d5;
    --primary-200: #a9efaa;
    --primary-300: #7ee780;
    --primary-400: #54de56;
    --primary-500: #29d62c;
    --primary-600: #21ab23;
    --primary-700: #18811a;
    --primary-800: #105611;
    --primary-900: #082b09;
    --primary-950: #041504;

    --secondary-50: #ffe5e5;
    --secondary-100: #ffcccc;
    --secondary-200: #ff9999;
    --secondary-300: #ff6666;
    --secondary-400: #ff3333;
    --secondary-500: #ff0000;
    --secondary-600: #cc0000;
    --secondary-700: #990000;
    --secondary-800: #660000;
    --secondary-900: #330000;
    --secondary-950: #1a0000;

    --accent-50: #fce8f8;
    --accent-100: #fad1f1;
    --accent-200: #f4a4e3;
    --accent-300: #ef76d5;
    --accent-400: #ea48c7;
    --accent-500: #e41bb9;
    --accent-600: #b71594;
    --accent-700: #89106f;
    --accent-800: #5b0b4a;
    --accent-900: #2e0525;
    --accent-950: #170312;


}

body {
    font-family: Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--background);
}

h1 , h2, h3 {
    color: var(--text);
}

/*Define a grid container for the banner header*/
.banner.header {
    /*Make the header sticky to the top*/
    position: sticky;
    top: 0;
    /*Set up grid*/
    display: grid;
    grid-template-columns: [left_col] auto [middle_col] auto [right_col] auto;
    grid-template-rows: [top_row] 33% [middle_row] 33% [bottom_row] 33%;
    /*Dimensions*/
    height: 75px;
    width: auto;
    /*Background*/
    background-color: var(--primary-100);
    background-image: none;
    background-blend-mode: multiply;
    /*border*/
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: var(--text);
    /*Font*/
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
}

/*Define a grid container for the banner footer*/
.banner.footer {
    /*Set up grid*/
    display: grid;
    grid-template-columns: [left_col] auto [middle_col] auto [right_col] auto;
    grid-template-rows: [top_row] 33% [middle_row] 33% [bottom_row] 33%;
    /*Dimensions*/
    height: 125px;
    width: auto;
    /*Background*/
    background-color: var(--primary-100);
    background-image: none;
    background-blend-mode: multiply;
    /*border*/
    border-style: solid;
    border-width: 1px 0px 0px 0px;
    border-color: var(--text);
    /*Font*/
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
}

/*Grid Item definition for Link in Header Banner*/
.banner.links.realign {
    /*Set up grid item*/
    grid-column-start: right_col;
    grid-column-end: span 1;
    grid-row-start: middle_row;
    grid-row-end: span 1;
    /*Alignment*/
    text-align: right;
    justify-self: end;
    align-self: center;
    /*Font*/
    font-size: 18;
    /*Spacing*/
    margin: 10px;
}

/*Grid item for some links in the left column of footer*/
.banner.links.lcol {
    /*Set up grid item*/
    grid-column-start: left_col;
    grid-column-end: span 1;
    grid-row-start: top_row;
    grid-row-end: bottom_row;
    /*Alignment*/
    text-align: left;
    /*Font*/
    font-size: x-large;
    /*Spacing*/
    margin: 10px;
}

/*Grid Item to hold the logo*/
.banner.logo {
    /*Set up grid item*/
    grid-column-start: left_col;
    grid-column-end: span 1;
    grid-row-start: middle_row;
    grid-row-end: span 1;
    /*Alignment*/
    text-align: left;
    justify-self: left;
    align-self: center;
    /*Fonts*/
    font-size: 24;
    /*padding*/
    margin: 10px;
}

/* Define style for the Logo */
.banner.logo.button {
    /*Font*/
    color: var(--text);
    /*Spacing*/
    padding: 10px;
    margin: 10px;
    /*size*/
    width:auto;
    height: auto;
    /*Remove underline from button*/
    text-decoration: none;
}

/*Grid item for some links in the bottom row of footer*/
.banner.copyright {
    /*Set up grid item*/
    grid-column-start: right_col;
    grid-column-end: span 1;
    grid-row-start: bottom_row;
    grid-row-end: span 1;
    /*Alignment*/
    text-align: right;
    /*Font*/
    font-size: small;
    /*Spacing*/
    margin: 10px;
}

/*Define style for banner links*/
.banner.links.button {
    /*Font*/
    color: var(--text);
    /*Spacing*/
    padding: 10px;
    margin: 10px;
    /*size*/
    width:auto;
    height: auto;
    /*Remove underline from button*/
    text-decoration: none;;
}

/*Define style for footer links*/
.banner.links.simple {
    /*Font*/
    color: var(--text);
    font-size: small;
    /*Spacing*/
    padding: 10px;
    margin: 10px;
}

/*50px tall, full width spacer*/
.spacer {
    margin-top: 50px;
}

/*Title bar*/
.title_bar {
    font-size: 48;
    /*
    border-top-style: solid !important;
    border-top-width: 3px !important;
    border-top: cadetblue;
    */
    border-bottom-style: solid !important;
    border-bottom-width: 2px !important;
    border-bottom: var(--primary);
}

/*Spread sections for home page*/

/*Container for each spread*/
.spread {
    /*Set up grid*/
    display: grid;
    grid-template-columns: [left_col] auto [middle_col] auto [right_col] auto;
    grid-template-rows: [top_row] auto [middle_row] 10% [bottom_row] auto;
    /*Dimensions*/
    height: 600px;
    width: auto;
    margin-left: 100px;
    margin-right: 100px;
    border-radius: 50px;
    /*background*/
    /*background-color: cadetblue;*/
    background-blend-mode: multiply;
    /*alignment*/
    text-align: center;
    align-content: center;
    justify-content: center;
    /* Make image fit within the container */
    background-size:cover;
}

/*Descriptive text for a spread*/
.spread.title {
    /*Position item within grid.*/
    grid-column-start: left_col;
    grid-column-end: span 3;
    grid-row-start: top_row;
    grid-row-end: span 1;
    /*size*/
    width: auto;
    height: auto;
    margin: 100;
    padding: 50;
    /*Style the box*/
    border-radius: 25px;
    background-color: var(--primary-300);
    /*font*/
    color: var(--text);
    font-size: 36;
    text-align: center;
    /*border: 1px solid plum;*/
}

/*center button for a spread*/
.spread.button {
    /*Position item within grid.*/
    grid-column-start: middle_col;
    grid-column-end: right_col;
    grid-row-start: middle_row;
    grid-row-end: bottom_row;
    /*Size*/
    width: 150px;
    height: 50px;
    padding: 5px;
    /*Colors*/
    border: 2.5px solid var(--text);
    border-radius: 25px;
    background-color: var(--secondary-200);
    /*Alignment*/
    text-align: right;
    /*Font*/
    color: var(--text);
    font-size: x-large;
    /*Remove underline from button*/
    text-decoration: none;
}

/*Detail the layout of the box for each feature*/
.feature {
    /*Background Color*/
    background-color: var(--primary-300);
    /*Set to grid*/
    display: grid; 
    grid-template-areas: 
        "left right";
    /*Size the box*/
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 50px;
    margin-bottom: 50px;
    padding: 25px;
    border-radius: 25px;
}

/* Place the feature image */
.feature.image {
    /*Position item within grid.*/
    grid-area: left;
    /*size*/
    width: auto;
    height: auto;
    text-align: center;
    /*border: 1px solid plum;*/
}

/* Place the Feature Text */
.feature.text {
    /*Position item within grid.*/
    grid-area: right;
    /*size*/
    width: auto;
    height: auto;
    padding-top: 250px;
    padding-bottom: 50px;
    /*font*/
    color: var(--text);
    font-size: 36;
    text-align: center;
    /*border: 1px solid plum;*/
}

/* Page Content Styling */
.page.content {
    /*background color*/
    background-color: var(--primary-300);
    /*Create the box*/
    padding: 25px;
    margin-left: 100px;
    margin-right: 100px;
    border-radius: 25px;
    width: auto;
    height: auto;
    /*Text*/
    text-align: left;
    color: var(--text);
}

/* Download Page Styling */
.download {
    /*Background Color*/
    background-color: var(--primary-200);
    /*Set to grid*/
    display: grid; 
    grid-template-areas: 
        "header header header"
        ". paragraph ."
        "footer1 . footer2"
        "apple . google";
    /*Size the box*/
    margin-left: 100px;
    margin-right: 100px;
    padding: 25px;
    border-radius: 25px;
}

/* Dowload Page Header */
.download.header {
    /*Position the header for the download page*/
    grid-area: header;
    margin: 50px;
    padding: 0px;
    /*Alignment*/
    text-align: center;
    justify-self: center;
    align-self: center;
    /*Font*/
    font-size: 48;
}

/* Download Page paragraph style */
.download.paragraph {
    /*Position the header for the download page*/
    grid-area: paragraph;
    margin: 50px;
    padding: 0px;
    /*Alignment*/
    text-align: center;
    justify-self: center;
    align-self: center;
    /*Font*/
    font-size: 18;
}

/* Apple App Store Button Box */
.download.apple.button.align {
    /*Position the header for the download page*/
    grid-area: footer1;
    margin: 50px;
    /*Alignment*/
    text-align: center;
    justify-self: center;
    align-self: center;
    /*Font*/
    font-size: 18;
}

/* Google Play Store Button Box */
.download.google.button.align {
    /*Position the header for the download page*/
    grid-area: footer2;
    margin: 50px;
    /*Alignment*/
    text-align: center;
    justify-self: center;
    align-self: center;
    /*Font*/
    font-size: 18;
}

/* Apple Copyright */
.download.apple.copyright {
    /*Position the header for the download page*/
    grid-area: apple;
    margin: 25px;
    padding: 0px;
    /*Alignment*/
    text-align: center;
    justify-self: center;
    align-self: center;
    /*Font*/
    font-size: 12;
}

/* Google Copyright */
.download.google.copyright {
    /*Position the header for the download page*/
    grid-area: google;
    margin: 25px;
    padding: 0px;
    /*Alignment*/
    text-align: center;
    justify-self: center;
    align-self: center;
    /*Font*/
    font-size: 12;
}

/*For large text fields. NOTE: Unused*/
input.large {
    height: 300;
    width: 600;
    vertical-align: top;
    text-align:justify;
    word-break: break-word;
    white-space: pre-line;
    overflow-wrap: break-word;
    -ms-word-break: break-word;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* Form Submit Button Style */
input.formButton {
    /*Size and shape*/
    height: 50;
    width: 200;
    /*Background*/
    background-color: var(--secondary-200);
    /*Text*/
    color: var(--text);
    font-size: medium;
    /* Border */
    border-radius: 12px;
    border: 2px solid var(--secondary-900);
    /* Set the cursor on hover */
    cursor: pointer;
}

/* Form alert style */
.alert.small {
    color: red;
    font-size: small;
}

/* Style the Form */
form {
    background-color: var(--primary-200);
    margin-left: 100px;
    margin-right: 100px;
    padding: 50px;
    border-radius: 50px;
}

/* Style the single line inputs of the form */
input {
    width: 100%;
    margin: 0px;
    box-sizing: border-box;
    padding: 12px 20px;
    margin: 8px 0;
    border: 2px solid var(--primary-800);
    border-radius: 6px;
}

/* Style large text input blocks */
textarea {
    /* Set the size */
    width: 100%;
    height: 200px;
    /* Describe the box */
    padding: 12px 20px;
    border: 2px solid var(--primary-800);
    border-radius: 6px;
}

button {
    padding: 0px;
    margin: 0px;
    height: min-content;
}