#navbar {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto;
    justify-items: center;
}

#welcome {
    align-self: center;
    justify-self: center;
}

#logo {
    justify-self: start;
    max-width: 40%;
    height: auto;
}

#main-doc1{
    background: linear-gradient(to left, #567, #678 20%, #124 80%);

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 25px auto;
    align-items: center;
    color: white;
}


 input, select {
    width: 70%;
    height: 40px;
    margin: 10px;
  }

 #text-doc {
     margin: 40px;
     text-align: justify;
     line-height: 20px;
     font-family: 'Hind Madurai', sans-serif;
 }

 #main-doc1 h1 {
     grid-column: 1/3;
     text-align: center;
     padding-top: 15px;
     font-family: 'Anton', sans-serif;
 }

 figure{
     text-align: center;
 }

figcaption {
    font-family: 'Anton', sans-serif;
}

 #developer {
     max-width: 50%;
     height: auto;
 }

 #main-doc2 p {
   margin-left: 20%;
   margin-right: 20%;
   text-align: center;
}

figcaption {
    font-size: larger;
}

 #main-doc2 {
    width: 100%;
    text-align: justify;
    margin-top: 10px;
 }


 #main-doc3 {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: auto auto;
     background-color: silver;
     grid-column-gap: 20px;
     text-align: justify;
     padding-left: 20px;
     padding-right: 20px;
 }

 #main-doc3 h2 {
     grid-column: 1/4;
     text-align: center;
     font-family:'Anton', sans-serif;
 }

 section header {
     text-align: center;
 }

 form {
   display: grid;
   grid-template-columns: auto;
   grid-template-rows: repeat(5, auto);
   justify-items: center;
   grid-row-gap: 20px;
 }


 #footers {
     display: flex;
     flex-direction: row;
 }

 #foot2, #foot1 {
   margin: auto;
 }

 #foot1 header {
    font-family: 'Coda Caption', sans-serif;
 }

 @media (max-width: 700px){
    #navbar {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto auto auto;
        justify-items: center;
    }


    #logo2, #logo3 {
        display: none;
    }

    #main-doc1{
        background-color: rgba(90, 90, 111, 0.3);
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto auto auto;
        align-items: center;
    }
   
    input, select {
       margin-left: 10px;
       width: 90%;
       height: 40px;
       margin: 10px;
     }



    #main-doc1 h1 {
        grid-column: 1/2;
        text-align: center;
        padding-top: 15px;
    }

    #text-doc h3 {
        text-align: center;
    }

    #main-doc3 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        background-color: silver;
        grid-row-gap: 20px;
        text-align: justify;
        padding-left: 10px;
        padding-right: 10px;
    }
   
    #main-doc3 h2 {
        grid-column: 1/2;
        text-align: center;
        font-family:'Anton', sans-serif;
    }

    #foot2 {
        display: none;
    }
    #foot1 {
        text-align: center;
    }
   
 }