/* 
COURSE: PROG1041 - Intro to Programming
PURPOSE: Web Map Webpage
AUTHOR: Carlyle A.
DATE: October 1, 2024
REV01: October 8, 2024
REV02: October 17, 2024
SUBMISSION DATE: October 24, 2024
*/

/* This block should be included in all CSS files to set some important default structure properties */
* {
    box-sizing: border-box;
}
 
html,
body {
    font-size: 14px;
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}
/* End block */

/* typography */
h1,
h2 {
    font-family: "Lora", serif;
}

h3,
h4,
p { 
    font-family: "Poppins", sans-serif;
}

/* Web Page Colors for Reference (RGB): */
/* Light Orange - rgb(251,209,177 */
/* Dark Orange - rgb(245,160,78); */
/* Navy - rgb(57,83,112) */
/* Pale Blue (background) - rgb(242,248,239); */

/* header style - added background image*/

.main-header {
    background-color: rgb(242,248,239);
    background-image: url("../img/AdobeStock_crayons_crop.png");
    background-repeat: repeat-x;
    background-position: center top;
    background-attachment: absolute;
    background-size: 50%;
    padding: 8rem 2rem 1rem;
    color: rgb(57,83,112);
    text-align: left;
    }

.main-header h1{
    font-size: 32pt;
}

.main-header h4 {
    font-weight: 400;
    margin-top: -1rem;
}

/* main div style */

.main-div {
    display: flex;
}

/* aside style */
.main-aside {
    background-color: rgb(242,248,239);
    flex: 0 0 25%;
    padding: 2rem;
    color: rgb(57,83,112);
    text-align: justify;
}
.main-aside ul,
ol {
    font-family: poppins;
    text-align: left;
}

/* reset block for margins in aside */

.main-aside h3 { 
    margin: 0;
}

/* section style */

.main-section {
    background-color: rgb(242,248,239);
    flex: 0 0 75%;
    padding: 2em;
    text-align: left;
}

.map-title {
    color: rgb(245,160,78);
    font-family: "Lora";
    margin-top: 0em;
}

/* bordered section to contain web map eventually */
.bordered {
    border-style: solid;
    border-width: 3px;
    border-color: rgb(245,160,78);
    padding: 2em;
}

/* footer style */

.footer-div {
    display: flex;
}

.footer-left {
    background-color: rgb(101,193,190);
    color: rgb(57,83,112);
    flex: 0 0 30%;
    padding: 5rem;
    text-align: center;
}

.footer-right {
    background-color: rgb(101,193,190);
    color: rgb(57,83,112);
    flex: 0 0 70%;
    padding: 2rem 3rem;
    text-align: left;
}

.back-to-top-div {
    background-color: rgb(57,83,112);
    color: rgb(242,248,239);
    padding: 1rem;
    text-align: center;
}

/* images/map */
.logo {
    width: 70%;
}

.leaflet {
    height: 800px;
}

/* links */

a {
    color: rgb(242,248,239); 
    font-weight: bold; 
    font-family: poppins;
    text-decoration: none;
}
a:visited { 
    text-decoration: none; 
    color: rgb(242,248,239);
}


/*Mobile Media Query*/
@media only screen and (max-width: 750px) {
 
    /*Changes the header image so that it isn't tiny on mobile*/
    .main-header { 
        background-size: 200%;
        background-repeat: no-repeat;
    }

    /* changes header font size so it fits better on mobile */
    .main-header h1{
        font-size: 20pt;
    }

    /*Changes the column/container from horizontal to vertical - Body*/
    .main-div {
        flex-direction: column;
    }
 
    .main-aside {
        flex: 0 0 100%;
        width: 100%;
    }

    /*Changes the column/container from horizontal to vertical - Footer*/
    .footer-div {
        flex-direction: column;
    }
 
    .footer-left {
        flex: 0 0 100%;
        width: 100%;
    }
}