@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');

*{
    box-sizing: border-box;
    color: #F4FBE8;
    font-family: "Fjalla One", Verdana, sans-serif;
} /*Responsiveness and changing the text color of everything to an off-white color*/

div {
    width: 100%;
}/*Makes it so that the div tags width can not be more than the screen*/

h1, h2, p {
    text-align: center; 
}/*Aligns the text of h1, h2, and p to the center*/

ul {
    list-style-type: none;
    padding: 0;
    text-align: center;
}/*Aligns text of the ul to center, removes padding, and removes the dots in front of the li*/

.class7 {
    background-color: #DEFE83;
    border-radius: 10px;
    padding: 10px;
}/*Changes the background color of the form to the same color as the logo for cohesiveness, creates a border-radius that curves the corner, creates a padding so it doesn't look crowded*/

.class7 p, .class7 h2, .class7 label{
    color: black;
} /*Since I changed the color of all of the writing in the document to white earlier, it was not visible on the lime background. This changed the color back to black for the form so it is visible*/

body {
    background-color: #1F3D2B; 
}/*Changes background color of everything to a dark green color that coordinates with the logo*/

.grid-container {
    display: grid;
    grid-template-rows: "logo" "header" "nav" "class1" "class2" "class3" "class4" "class5" "class7" "class6" "quiz";/*Created the rows for my @media statements*/
    grid-auto-columns: 1fr; /*Auto creates columns for my @media statements based off of how many I put in my @media statements*/
    gap: 10px;
    padding: 10px;
    align-items: stretch;
}/*Creates the container that I will later use for my @media statements*/

.nav ul {
    display: flex;
   justify-content: space-between;
    list-style-type: none;
    padding: 0;
    margin: 0;
    /*height: auto;*/ /*Removed because it was messing up my code, but I am not sure why, my code just started to work after I removed it*/
    min-height: 50px;/*Was having issues where my buttons would bi sect or there would not be enough space in the borders for my text, so this prevented that*/
}/*Changes my navigation bar to not have dots anymore and makes it responsive to become either a row or column depending on what I need*/

.quiz {
    border: 4px white solid;
    background-color: white;
    border-radius: 4px;
}

.quiz h2, .quiz h1, .quiz .button {
    color: #1F3D2B;
}

#quiz .button {
    width: 95%;
    padding: 10px;
    margin: 10px;
    text-align: left;
    border-radius: 4px;
    cursor: pointer;
}

.button:hover {
    background-color: #1F3D2B;
    color: white;
}

textarea, input, button {
    color: black;
}

.nav li a {
    padding: 5px;
    margin: 5px;;
    text-decoration: none;
} /*Removes underlines to the a statements in the navigation bar*/

textarea {
    width: 50%;
    max-width: 600px;
}/*Was having issues where if the screen got too small, then a scroll bar would appear, this prevented that by not
  * allowing the textarea to become bigger than the screens*/

.header {
    margin: 0;
    padding: 0;
    font-size: 20px;
    position: relative;
 }/*This increases the font size of my header*/

.nav li {
    border: 2px solid black;
    border-radius: 10px;
    text-align: center;
    flex: 1;
    width: 100%;
    padding: 2px;
    margin: 5px;
} /*This adds the border around each of my list items in my unordered list*/

.nav {
    width: 100%;
} /*This makes it so that the nav bar will fill in 100% of the space it can*/

 /*This set of @media statements only affect the page with an id of homepage*/
@media(max-width: 600px) {
    #homepage .logo{
        grid-row: 1;
        grid-column: 1 / 3;
    }
    #homepage .nav {
        grid-row: 1;
        grid-column: 3 / 7;
        display: flex;
    }
    #homepage .nav ul {
        flex-direction: column;
        width: 100%;
    }
    #homepage img {
        width: 100%;
    }
    #homepage .header {
        grid-row: 2;
        grid-column: 1 / 7
    }
    #homepage .class1 {
        grid-row: 3;
        grid-column: 1 / 4;
    }
    #homepage .pic1 {
        grid-row: 3;
        grid-column: 4 / 7;
    }
    #homepage .class2 {
        grid-row: 4;
        grid-column: 1 / 7;
    }
    #homepage .class3 {
        grid-row: 5;
        grid-column: 1 / 7;
    }
    #homepage .class4 {
        grid-row: 6;
        grid-column: 1 / 7;
    }
    #homepage .class5 {
        grid-row: 7;
        grid-column: 1 / 7;
    }
    #homepage .class6 {
        grid-row: 8;
        grid-column: 1 / 7;
    }
    #homepage .class7 {
        grid-row: 9;
        grid-column: 1 / 7;
    }
}/*For a phone screen*/

@media(min-width: 600px) and (max-width: 900px) {
    #homepage .logo{
        grid-row: 1;
        grid-column: 1 / 3;
    }
    #homepage img {
        width: 100%;
    }
    #homepage .header{
        grid-row: 1;
        grid-column: 3 / 9;
    }
    #homepage .nav {
        grid-row: 1;
        grid-column: 9 / 13;
    }
    #homepage .nav ul {
        flex-direction: column;
        width: 100%;
       
    }
    #homepage .class1 {
        grid-row: 2;
        grid-column: 5 / 10;
    }
    #homepage .pic1 {
        grid-row: 2;
        grid-column: 1 / 5;
    }
    #homepage .class2 {
        grid-row: 2;
        grid-column: 10 / 13;
    }
    #homepage .class3 {
        grid-row: 3;
        grid-column: 1 / 7;
    }
    #homepage .class4 {
        grid-row: 4;
        grid-column: 7 / 13;
    }
    #homepage .class5 {
        grid-row: 4;
        grid-column: 1 / 7;
    }
    #homepage .class6 {
        grid-row: 3;
        grid-column: 7 / 13;
    }
    #homepage .class7 {
        grid-row: 5;
        grid-column: 1 / 13;
    }
}

@media(min-width: 900px){
    #homepage .logo{
        grid-row: 1;
        grid-column: 1 / 3;
    }
    #homepage img {
        width: 100%;
    }
    #homepage .nav{grid-row: 1;
        grid-column: 3 / 13;
    }
    #homepage .nav ul {
        flex-direction: row;
        width: 100%;
        height: 22%;
    }
    #homepage .header{
        grid-row: 2;
        grid-column: 1 / 13;
    }
    #homepage .class1{
        grid-row: 3;
        grid-column: 3 / 8;
    }
    #homepage .pic1 {
        grid-row: 3;
        grid-column: 1 / 3;
    }
    #homepage .class2{
        grid-row: 3;
        grid-column: 8 / 13
    } 
    #homepage .class3{
        grid-row: 4;
        grid-column: 1 / 7;
    }
    #homepage .class4{
        grid-row: 5;
        grid-column: 7 / 13
    }   
    #homepage .class5{
        grid-row: 5;
        grid-column: 1 / 7;
    }
    #homepage .class6{
        grid-row: 4;
        grid-column: 7 / 13
    }   
    #homepage .class7{
        grid-row: 6;
        grid-column: 1 / 13;
    }
}

/*This set of @media statements only affects the treecareservices and lawncareservices page */
@media(max-width: 600px) {
    #treecareservices .logo, #lawncareservices .logo{
        grid-row: 1;
        grid-column: 1 / 3;
    }
    #treecareservices .nav, #lawncareservices .nav {
        grid-row: 1;
        grid-column: 3 / 7;
    }
    #treecareservices .nav ul, #lawncareservices .nav ul {
        flex-direction: column;
    }
    #treecareservices img, #lawncareservices img {
        width: 100%;
    }
    #treecareservices .header, #lawncareservices .header {
        grid-row: 2;
        grid-column: 1 / 7
    }
    #treecareservices .class1, #lawncareservices .class1 {
        grid-row: 3;
        grid-column: 1 / 7;
    }
    #treecareservices .class2, #lawncareservices .class2 {
        grid-row: 4;
        grid-column: 1 / 5;
    }
    #treecareservices .pic1, #lawncareservices .pic1 {
        grid-row: 4;
        grid-column: 5 / 7;
    }
    #treecareservices .class3,#lawncareservices .class3 {
        grid-row: 5;
        grid-column: 1 / 5;
    }
    #treecareservices .pic2, #lawncareservices .pic2 {
        grid-row: 5;
        grid-column: 5 / 7;
    }
    #treecareservices .class4, #lawncareservices .class4 {
        grid-row: 6;
        grid-column: 1 / 5;
    }
    #treecareservices .pic3, #lawncareservices .pic3 {
        grid-row: 6;
        grid-column: 5 / 7;
    }
    #treecareservices .class5, #lawncareservices .class5 {
        grid-row: 7;
        grid-column: 1 / 5;
    }
    #treecareservices .pic4, #lawncareservices .pic4 {
        grid-row: 7;
        grid-column: 5 / 7;
    }
    #treecareservices .class7, #lawncareservices .class7 {
        grid-row: 8;
        grid-column: 1 / 7;
    }
}/*For a phone screen*/

@media(min-width: 600px) and (max-width: 900px) {
    #treecareservices .logo, #lawncareservices .logo {
        grid-row: 1;
        grid-column: 1 / 2;
    }
    #treecareservices .nav, #lawncareservices .nav {
        grid-row: 1;
        grid-column: 5 / 7;
    }
    #treecareservices .nav ul, #lawncareservices .nav ul {
        flex-direction: column;
    }
    #treecareservices img, #lawncareservices img {
        width: 100%;
    }
    #treecareservices .header, #lawncareservices .header {
        grid-row: 1;
        grid-column: 2 / 5
    }
    #treecareservices .class1, #lawncareservices .class1 {
        grid-row: 3;
        grid-column: 1 / 7;
    }
    #treecareservices .class2, #lawncareservices .class2 {
        grid-row: 4;
        grid-column: 1 / 5;
    }
    #treecareservices .pic1, #lawncareservices .pic1 {
        grid-row: 4;
        grid-column: 5 / 7;
    }
    #treecareservices .class3,#lawncareservices .class3 {
        grid-row: 5;
        grid-column: 1 / 5;
    }
    #treecareservices .pic2, #lawncareservices .pic2 {
        grid-row: 5;
        grid-column: 5 / 7;
    }
    #treecareservices .class4, #lawncareservices .class4 {
        grid-row: 6;
        grid-column: 1 / 5;
    }
    #treecareservices .pic3, #lawncareservices .pic3 {
        grid-row: 6;
        grid-column: 5 / 7;
    }
    #treecareservices .class5, #lawncareservices .class5 {
        grid-row: 7;
        grid-column: 1 / 5;
    }
    #treecareservices .pic4, #lawncareservices .pic4 {
        grid-row: 7;
        grid-column: 5 / 7;
    }
   #treecareservices .class7, #lawncareservices .class7 {
        grid-row: 8;
        grid-column: 1 / 7;
    }
}

@media(min-width: 900px){
    #treecareservices .logo, #lawncareservices .logo {
        grid-row: 1;
        grid-column: 1 / 3;
    }
    #treecareservices img, #lawncareservices img {
        width: 100%;
    }
    #treecareservices .nav, #lawncareservices .nav {grid-row: 1;
        grid-column: 3 / 13;
    }
    #treecareservices .nav ul, #lawncareservices .nav ul {
        flex-direction: row;
        width: 100%;
        height: 22%;
    }
    #treecareservices .header, #lawncareservices .header {
        grid-row: 2;
        grid-column: 1 / 13;
    }
    #treecareservices .class1, #lawncareservices .class1 {
        grid-row: 3;
        grid-column: 1 / 13;
    }
    #treecareservices .class2, #lawncareservices .class2 {
        grid-row: 4;
        grid-column: 1 / 5
    } 
    #treecareservices .pic1, #lawncareservices .pic1 {
        grid-row: 4;
        grid-column: 5 / 7;
    }
    #treecareservices .class3,#lawncareservices .class3 {
        grid-row: 4;
        grid-column: 7 / 11;
    }
    #treecareservices .pic2, #lawncareservices .pic2 {
        grid-row: 4;
        grid-column: 11 / 13;
    }
    #treecareservices .class4, #lawncareservices .class4 {
        grid-row: 5;
        grid-column: 1 / 5
    }   
    #treecareservices .pic3, #lawncareservices .pic3 {
        grid-row: 5;
        grid-column: 5 / 7;
    }
    #treecareservices .class5, #lawncareservices .class5 {
        grid-row: 5;
        grid-column: 7 / 11;
    }
    #treecareservices .pic4, #lawncareservices .pic4 {
        grid-row: 5;
        grid-column: 11 / 13;
    }
   #treecareservices .class7, #lawncareservices .class7 {
        grid-row: 6;
        grid-column: 1 / 13;
    }
}


 /*This set of @media statements is for my faq page and my contact the developer page*/
@media(max-width: 600px) {
    #faq .logo, #contactme .logo {
        grid-row: 1;
        grid-column: 1 / 3;
    }
    #faq .nav, #contactme .nav {
        grid-row: 1;
        grid-column: 3 / 7;
    }
    #faq .nav ul , #contactme .nav ul {
        flex-direction: column;
    }
    #faq img, #contactme img {
        width: 100%;
    }
    #faq .header, #contactme .header {
        grid-row: 2;
        grid-column: 1 / 7
    }
    #faq .class1, #contactme .class1 {
        grid-row: 3;
        grid-column: 1 / 7;
    }
    #faq .class2, #contactme .class2 {
            grid-row: 4;
            grid-column: 1 / 7;
    }
    #faq .class3, #contactme .class3 {
            grid-row: 5;
            grid-column: 1 / 7;
    }
    #faq .class7, #contactme .class7 {
            grid-row: 6;
            grid-column: 1 / 7;
    }
}/*For a phone screen*/

@media(min-width: 600px) and (max-width: 900px) {
    #faq .logo, #contactme .logo{
        grid-row: 1;
        grid-column: 1 / 3;
    }
    #faq img, #contactme img {
        width: 100%;
    }
    #faq .header, #contactme .header{
        grid-row: 1;
        grid-column: 3 / 10;
    }
    #faq .nav, #contactme .nav {
        grid-row: 1;
        grid-column: 10 / 13;
    }
    #faq .nav ul, #contactme .nav ul {
        flex-direction: column;
        width: 100%;
        float: center;
    }
    #faq .class1, #contactme .class1 {
        grid-row: 2;
        grid-column: 1 / 13;
    }
    #faq .class2, #contactme .class2 {
            grid-row: 3;
            grid-column: 1 / 13;
        }
    #faq .class3, #contactme .class3 {
        grid-row: 4;
        grid-column: 1 / 13;
    }
    #faq .class7, #contactme .class7 {
        grid-row: 5;
        grid-column: 1 / 13;
    }
}

@media(min-width: 900px){
    #faq .logo, #contactme .logo{
        grid-row: 1;
        grid-column: 1 / 3;
    }
    #faq img, #contactme img {
        width: 100%;
    }
    #faq .nav, #contactme .nav{grid-row: 1;
        grid-column: 3 / 13;
    }
    #faq .nav ul, #contactme .nav ul {
        flex-direction: row;
        width: 100%;
        height: 22%;
    }
    #faq .header, #contactme .header{
        grid-row: 2;
        grid-column: 1 / 13;
    }
    #faq .class1, #contactme .class1{
        grid-row: 3;
        grid-column: 1 / 13;
    }
    #faq .class2, #contactme .class2 {
            grid-row: 4;
            grid-column: 1 / 13;
    }
    #faq .class3, #contactme .class3 {
        grid-row: 5;
        grid-column: 1 / 13;
    }
    #faq .class7, #contactme .class7 {
        grid-row: 6;
        grid-column: 1 / 13;
    }
}


/*This set of @media statements is for my developer page*/
@media(max-width: 600px) {
    #developer .logo{
        grid-row: 1;
        grid-column: 1 / 3;
    }
    #developer .nav {
        grid-row: 1;
        grid-column: 3 / 7;
    }
    #developer .nav ul {
        flex-direction: column;
    }
    #developer img {
        width: 100%;
    }
    #developer .header {
        grid-row: 2;
        grid-column: 1 / 7
    }
    #developer .class1 {
        grid-row: 3;
        grid-column: 1 / 7;
    }
    #developer .pic1 {
        grid-row: 4;
        grid-column: 1 / 7;
    }
    #developer .class2 {
        grid-row: 5;
        grid-column: 1 / 7;
    }
    #developer .class3 {
        grid-row: 6;
        grid-column: 1 / 7;
    }
    #developer .class7 {
            grid-row: 7;
            grid-column: 1 / 7;
    }
}/*For a phone screen*/

@media(min-width: 600px) and (max-width: 900px) {
    #developer .logo{
        grid-row: 1;
        grid-column: 1 / 3;
    }
    #developer img {
        width: 100%;
    }
    #developer .header{
        grid-row: 1;
        grid-column: 3 / 11;
    }
    #developer .nav {
        grid-row: 1;
        grid-column: 10 / 13;
    }
    #developer .nav ul {
        flex-direction: column;
        width: 100%;
        float: center;
    }
    #developer .class1 {
        grid-row: 2;
        grid-column: 1 / 7;
    }
    #developer .class2 {
        grid-row: 3;
        grid-column: 7 / 13;
    }
    #developer .pic1 {
        grid-row: 2;
        grid-column: 7 / 13
    }
    #developer .class3 {
        grid-row: 3;
        grid-column: 1 / 7;
    }
    #developer .class7 {
        grid-row: 4;
        grid-column: 1 / 13;
    }
}

@media(min-width: 900px){
    #developer .logo{
        grid-row: 1;
        grid-column: 1 / 3;
    }
    #developer .logo img {
        width: 100%;
    }
    #developer .nav{grid-row: 1;
        grid-column: 3 / 13;
    }
    #developer .nav ul {
        flex-direction: row;
        width: 100%;
        height: 22%;
    }
    #developer .header{
        grid-row: 2;
        grid-column: 1 / 13;
    }
    #developer .class1{
        grid-row: 3;
        grid-column: 1 / 10;
    }
    #developer .pic1{
        grid-row: 3;
        grid-column: 10 / 13;
    }
    #developer .pic1 img {
        width: 80%;
    }
    #developer .class2{
        grid-row: 4;
        grid-column: 1 / 7
    } 
    #developer .class3{
        grid-row: 4;
        grid-column: 7 / 13;
    }
    #developer .class7 {
        grid-row: 5;
        grid-column: 1 / 13;
    }
}


/*This set of @media statements is for my about the developer page*/
    @media(max-width: 600px) {
    #aboutme .logo{
        grid-row: 1;
        grid-column: 1 / 3;
    }
    #aboutme .nav {
        grid-row: 1;
        grid-column: 3 / 7;
    }
    #aboutme .nav ul {
        flex-direction: column;
    }
    #aboutme img {
        width: 100%;
    }
    #aboutme .header {
        grid-row: 2;
        grid-column: 1 / 7
    }
    #aboutme .class1 {
        grid-row: 3;
        grid-column: 1 / 7;
    }
    #aboutme .class2 {
        grid-row: 4;
        grid-column: 1 / 7;
    }
    #aboutme .class3 {
        grid-row: 5;
        grid-column: 1 / 7;
    }
    #aboutme .class4 {
            grid-row: 6;
            grid-column: 1 / 7;
    }
    #aboutme .class5 {
            grid-row: 7;
            grid-column: 1 / 7;
    }
    #aboutme .class7 {
            grid-row: 8;
            grid-column: 1 / 7;
    }
}/*For a phone screen*/

@media(min-width: 600px) and (max-width: 900px) {
    #aboutme .logo{
        grid-row: 1;
        grid-column: 1 / 3;
    }
    #aboutme img {
        width: 100%;
    }
    #aboutme .header{
        grid-row: 1;
        grid-column: 3 / 11;
    }
    #aboutme .nav {
        grid-row: 1;
        grid-column: 10 / 13;
    }
    #aboutme .nav ul {
        flex-direction: column;
        width: 100%;
        float: center;
    }
    #aboutme .class1 {
        grid-row: 2;
        grid-column: 1 / 7;
    }
    #aboutme .class2 {
        grid-row: 2;
        grid-column: 7 / 13;
    }
    #aboutme .class3 {
        grid-row: 3;
        grid-column: 1 / 7;
    }
    #aboutme .class4 {
        grid-row: 3;
        grid-column: 7 / 13;
    }
    #aboutme .class5 {
        grid-row: 4;
        grid-column: 1 / 13;
    }
    #aboutme .class7 {
        grid-row: 5;
        grid-column: 1 / 13;
    }
}

@media(min-width: 900px){
    #aboutme .logo{
        grid-row: 1;
        grid-column: 1 / 3;
    }
    #aboutme img {
        width: 80%;
    }
    #aboutme .nav{grid-row: 1;
        grid-column: 3 / 13;
    }
    #aboutme .nav ul {
        flex-direction: row;
        width: 100%;
        height: 22%;
    }
    #aboutme .header{
        grid-row: 2;
        grid-column: 1 / 13;
    }
    #aboutme .class1{
        grid-row: 3;
        grid-column: 1 / 7;
    }
    #aboutme .class2{
        grid-row: 3;
        grid-column: 7 / 13
    } 
    #aboutme .class3{
        grid-row: 4;
        grid-column: 1 / 7;
    }
    #aboutme .class4 {
        grid-row: 4;
        grid-column: 7 / 13;
    }
    #aboutme .class5 {
        grid-row: 5;
        grid-column: 1 / 13;
    }
    #aboutme .class7 {
        grid-row: 6;
        grid-column: 1 / 13;
    }
}



@media(max-width: 600px) {
    #quiz .logo{
        grid-row: 1;
        grid-column: 1 / 3;
    }
    #quiz .nav {
        grid-row: 1;
        grid-column: 3 / 7;
    }
    #quiz .nav ul {
        flex-direction: column;
    }
    #quiz img {
        width: 100%;
    }
    #quiz .quiz {
            grid-row: 2;
            grid-column: 1 / 7;
    }
    #quiz .class7 {
        grid-row: 3;
        grid-column: 1 / 7;
    }
}/*For a phone screen*/

@media(min-width: 601px) and (max-width: 900px) {
    #quiz .logo{
        grid-row: 1;
        grid-column: 1 / 3;
    }
    #quiz img {
        width: 100%;
    }
    #quiz .quiz{
        grid-row: 2;
        grid-column: 1 / 13;
    }
    #quiz .nav {
        grid-row: 1;
        grid-column: 3 / 13;
    }
    #quiz .nav ul {
        flex-direction: column;
        width: 100%;
        float: center;
    }
    #quiz .class7 {
        grid-row: 3;
        grid-column: 1 / 13;
    }
}

@media(min-width: 901px){
    #quiz .logo{
        grid-row: 1;
        grid-column: 1 / 3;
        order: -1;
    }
    #quiz img {
        width: 80%;
    }
    #quiz .nav{grid-row: 1;
        grid-column: 3 / 13;
    }
    #quiz .nav ul {
        flex-direction: row;
        width: 100%;
        height: 22%;
    }
    #quiz .quiz{
        grid-row: 2;
        grid-column: 1 / 13;
    }
    #quiz .class7{
        grid-row: 3;
        grid-column: 1 / 13;
    }
}