/*learned box-sizing, margin, & padding from course tutorials*/
* { 
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #363E3F;
    line-height: 35px;
}

/*used Google font Josefin Sans for titles & links, and lato for body text
 learned font-size & font-family implementation from course tutorials*/
h1, h2, h3, a {
    font-family: 'Josefin Sans';
}

nav {
    margin-right: 7%;
    text-align: right;
}

/*learned properties from class tutorials*/
body {
    font-family: 'Lato', sans-serif;
    font-size: 1.125rem;
}

/*line-height learned from course tutorials*/
h1, h2, h3 {
    line-height: 40px;
}

/*learned following properties from class tutorials*/
#showcase > .container > h1 {
    margin-left: 35%;
    padding-top: 8rem;
    padding-bottom: 1rem;
    font-size: 2rem;
}

/* https://www.w3schools.com/css/css_font.asp */
li, a, button {
    font-family: 'Josefin Sans';
    font-weight: normal;
    color: white;
    text-decoration: none;
    font-size: 1rem;
}

.nav-links li {
    color: #DFDED8;
}

/*selecting class and element learned from class tutorials*/
.content a, #getInvolved a {
    border: #363E3F solid 0.5px;
    border-radius: 20px;
    color: #363E3F;
    padding: 2%;
    font-size: 1rem;
}

/*selecting class and element & hover state learned from class tutorials*/
.content a:hover, #getInvolved a:hover, #submission-button:hover{
    border: none;
    border-bottom: white solid 1px;
    color: white;
    border-radius: 0px;
    transition: all 0.3s ease 0s;
}

/* Entirety of this header section learned from: https://youtu.be/PwWHL3RyQgk 
addition of margin-property learned from class tutorials*/
header {
    margin: 1%;
    display: flex;
    justify-content: flex-end; 
    align-items: center;
    padding: 1rem 1rem;
}

/*learned this selection & properties from: https://youtu.be/PwWHL3RyQgk */
.logo {
    margin-right: auto;
    width: 7%;
    margin-left: 8%;
}

/*learned from:
 https://www.youtube.com/watch?v=Wm6CUkswsNw 
 https://www.w3schools.com/css/css_list.asp */
.nav-links, .driversbtn {
    list-style: none;
}

/*learned from:
 https://www.youtube.com/watch?v=Wm6CUkswsNw 
 https://www.w3schools.com/css/css_list.asp */
.nav-links li, .driversbtn li {
    /* Inline Block learned from lecture/lab */
    display: inline-block;
    padding: 0rem 1.5rem;
}

/*learned from course tutorials*/
img {
    width: 100%;
}

/*learned from:
 https://www.youtube.com/watch?v=Wm6CUkswsNw 
 https://www.w3schools.com/css/css_list.asp */
.nav-links li a, .driversbtn li a {
    /* https://youtu.be/PwWHL3RyQgk */
    transition: all 0.3s ease 0s;
    font-size: 1rem;

}

/*learned from:
 https://www.youtube.com/watch?v=Wm6CUkswsNw 
 https://www.w3schools.com/css/css_list.asp */
a.navbtn,a.learnmore, a.drivers { 
    /* https://www.w3schools.com/css/css_border.asp */
    cursor: pointer;
    /* https://youtu.be/PwWHL3RyQgk */
    transition: all 0.3s ease 0s;
}

/* Hover learned from lab/lecture code */
/*learned from:
 https://www.youtube.com/watch?v=Wm6CUkswsNw 
 https://www.w3schools.com/css/css_list.asp */
a.navbtn:hover ,a.learnmore:hover, a.drivers:hover{
    background: none;
    color: #AEB1B2;
    border-bottom: #AEB1B2 solid 1px;
    font-weight:bold;
}


/*learned from:
 https://www.youtube.com/watch?v=Wm6CUkswsNw 
 https://www.w3schools.com/css/css_list.asp */
/* Focus learned from lab/lecture code */
a.navbtn:focus,a.learnmore:focus, a.drivers:focus {
    border-width: 0.25rem;
} 

/*learned all highlight classes from: https://thirtyeightvisuals.com/blog/low-highlight-heading-links-squarespace*/
.displace-highlight {
    background: linear-gradient(180deg,rgba(255,255,255,0) 50%,#F0A99F 50%);
}

.inequity-highlight {
    background: linear-gradient(180deg,rgba(255,255,255,0) 50%, #9FBEDB 50%);
}

.cost-highlight {
    background: linear-gradient(180deg,rgba(255,255,255,0) 50%, #FFC872 50%);
}

/*margin property learned from class tutorials*/
#intro h2 {
    margin-left: 2%;
}

/*learned properties from class tutorials*/
#intro {
    background: #DFDED8;
    margin: 0% 10% 0% 10%;
    padding: 5%;
}


/*following properties learned from class tutorials*/
.page-title {
    text-align: center;
    margin-top: 5%;
    padding: 3%;
    color: white;
}

/*learned properties from class tutorials*/
#response {
    padding: 5%;
    margin: 0% 10% 0% 10%;
    background: #DFDED8;
}

/*learned properties from class tutorials*/
#response h2, p {
    margin: 5%;
}

/*learned properties from class tutorials*/
#response img {
    width: 90%;
    margin: auto;
}

/*learned properties from class tutorials*/
#response h2 {
    margin-bottom: 3%;
}

/*following properties learned from class tutorials*/
.content {
    margin: 0% 10% 0% 10%;
    padding: 5%;
    background: #DFDED8;
}

/*following properties learned from class tutorials*/
.content > img, .content > img {
    width: 90%;
    margin: auto;
}


/*following properties learned from class tutorials*/
/*> symbol learned from: https://css-tricks.com/almanac/selectors/c/child/*/
#showcase > .container > img {
    width: 400%;
    height: auto;
} 

/*learned properties from class tutorials*/
/*learned how to select more than one element through class tutorials*/
.content div h3, p {
    margin: 5%;
}

/*learned properties from class tutorials*/
.content div a {
    margin: 5%;
}

/** Forms Section**/
/* this entire section learned from: https://www.w3schools.com/html/html_forms.asp */
#optional-message {
    resize:none;
    width:100%;
    height:auto;
    min-height: 6rem;
}

#getInvolved {
    background-color:#DFDED8;
    padding:3rem 2% 3rem 2%;
    margin: 10% 10% 10% 10%;

}

.form-left-content h2, p {
    margin: 5%;
}
/* Applying and Using this section done with the help of my friend Kris*/
.form-content {
    width: 80%;
    margin: 5%;
}

.form-content input, textarea {
    border-radius: 12px;
    border: solid #363E3F 0.5px;
    padding: 1%;
}

/* https://css-tricks.com/snippets/css/clear-fix/ & Kris for help */
.clearfix {
    clear:both;
}

/* https://www.w3schools.com/css/css_form.asp */
.form-content > input {
    width:100%;
    min-height:2rem;
    margin-bottom:0.5rem;
}

/* https://stackoverflow.com/questions/2694683/how-to-hide-element-label-by-element-id-in-css */
.form-content > label {
    display:none;
}

/*margin-left property learned from class tutorials*/
#feedback {
    margin: 2%;
}

/*this entire section learned from: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp */
@media only screen and (max-width: 50rem) {
    header {
        display: block;
        text-align:center;
        padding:0.5rem 0;
    }

    .logo {
        /* https://www.w3schools.com/cssref/pr_class_cursor.asp */
        cursor: pointer;
        margin: auto;
        width: 15%;
    }

    nav {
        display:block;
        text-align: center;
    }

    .nav-links li {
        display: block;
        padding: 0 1rem;
    }
    
    #optional-message {
        resize:none;
        width:100%;
        height:auto;
        min-height: 12.5rem;
    }
    
    #getInvolved {
        background-color:#DFDED8;
    }
    
    .form-content {
        float:none;
        width: 90%;
        margin: auto;
    }

    .form-left-content {
        float:none;
        width: 100%;
        margin: auto;
    }
    
    .form-left-content > h2{
        margin-top:0;
        margin-bottom:0.5rem;
    }

    .form-left-content > p{
        margin-bottom:0.5rem;
    }

    .form-content > input {
        width:100%;
        min-height:2rem;
        margin-bottom: 0.5rem;
    }

    a.navbtn {
        margin-bottom: 0.5rem;
        /* https://www.w3schools.com/css/css_border.asp */

        /* https://www.youtube.com/watch?v=PwWHL3RyQgk&t=7s */
        cursor: pointer;
        transition: all 0.3s ease 0s;
    }


    /* https://www.w3schools.com/cssref/sel_firstchild.asp */
    .nav-links > li:first-child {
        margin-top: 1rem;
    }

    .nav-links > li {
        margin-bottom: 1rem;
    }
    
  }

  #line img {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/*properties learned from class tutorials*/
a {
    margin: 0%;
    padding: 0%;
}

a:hover {
    font-style: italic;
}

/*learned these properties from class tutorials*/
#submission-button {
    font-family:'Josefin Sans';
    width: 50%;
    margin-left: 25%;
    border: #363E3F solid 0.5px;
    border-radius: 20px;
    color: #363E3F;
    background: none;
    padding: 2%;
    font-size: 1rem;
}


/*referenced from .center class from: https://www.w3schools.com/css/css_align.asp*/
#survey a {
    text-align: center;
    width: 60%;
    margin: 5%;
}