/** This is the main css style for Explicatio Tax for the Client Fuller the client Fuller ****/
/***Google fonts**/
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

/**Primary Color = #E9FFF9**/
/**Seconday Color = #9ED8DB**/
/**Accent 1 = #467599**/
/**Accent 2 = #D64045**/

/**em changes the text size with scale**/

body {
    background-color: white;
    font-family: "Nunito ", sans-serif;
    color:#467599;
    font-size: 0.7em;
}

.navigation {
    display: grid;
    grid-template-columns: 2fr 4fr;
    grid-template-rows: 1fr;
}

nav {
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-row: 1;
    grid-column: 2;

}
/** help with borders https://www.w3schools.com/css/css_border.asp**/
/** % fills in a certain amount of the container with itself**/ 
.nav-button {
    border-color: black;
    border-width: 5px;
    border-style: solid;
    background-color: #467599;
    color: white;
    width: 80%;
    height: 75%;
    padding: auto;
    grid-row: 1;

}

/**:hover is whem the mouse is hovering over the item **/
.nav-button:hover {
    color: black;
    background-color: #9ED8D8;
}

#logo1 {
    height: 70%;
    width: 70%;
    grid-column: 1;
    grid-row: 1;
    border-color: black;
    border-width: 5px;
    border-style: solid;
    justify-self: center;
    align-self: center;
    padding: 0;
}

#homepage {
    grid-column: 1;
}
#terminology {
    grid-column: 2;
}
#equation {
    grid-column: 3;
}
#contact {
    grid-column: 4;
}

/**I thought text shadows would look cool in it https://www.w3schools.com/css/css3_shadows.asp **/

nav a {
    color: white;
    font-size: 1.2em;
    text-decoration: none;
    text-shadow:0 0 0.2em #e9fff9, 0 0 0.4em #d2f0f0;
    display: block;
    align-content: center;
    height: 100%;
    width: 100%;

}

nav a:hover {
    color: black;
    font-size: 1.3em;
    text-shadow: 0 0 0.2em #d64045, 0 0 0.3em #d64045, 0 0 0.4em #d64045;
}

/***Home Page***/

#section1 {
    display: grid;
    background-color: #e9fff9;
    grid-template-columns: 2fr 1fr;
    padding: 2em;
    margin: 1em;
}

#img1 {
    width: 100%;
    height: auto;
    grid-column: 1;
    
}

.paragraph1 {
    grid-column: 2;
    padding-left: 1em;
}

#section2{
    display: grid;
    background-color: #e9fff9;
    grid-template-columns: 1fr 2fr;
    padding: 2em;
    margin: 1em;
}

.paragraph2 {
    grid-column: 1;
    padding-right: 1em;
}

#img2 {
    grid-column: 2;
    width: 100%;
    height: auto;
}

.paragraph {
    font-family: "Nunito Sans", sans-serif;
}

footer {
    text-align: center;
    background-color: #467599;
    color: #d64045;
    font-size: 2em;
}

/****Contact Page ****/

/** had to look up how to properly set up background images https://www.w3schools.com/css/css3_backgrounds.asp**/
/** https://www.w3schools.com/css/css_units_relative.asp**/
#background {
    min-height: 50vh;
    background-image:url(../images/contact1.png) ;
    background-size: cover;
    align-content: center;
    justify-items: center;
}

#background h2 {  
    display: block;
    background: white;
    text-align: center;

}

#feedback {
    display: grid;
    background-color: #9ED8D8;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    border-color: black ;
    border-style: solid;
    border-width: 2%;
    width: 70vw;
}

.information {
    grid-column: 1;
    padding-left: 10%;
}
.input {
    grid-column: 2;
    border-color: black;
    border-style: solid;
    border-width: 2%;
}

#submit {
    grid-column: 1/ span 2;
    grid-row: 5;
    justify-self: center;
    color: #d64045;
    background: #467599;
}

#submit:hover {
    background: #e9fff9;
    color: #467599;
    text-shadow: 0 0 0.2em darkslategrey, 0 0 0.3em darkslategrey;
}

#image7 {
    display: grid;
    justify-content: center;
}

#contact2 {
    padding-top: 20%;
    width: 60vw;
    padding-bottom: 0;
    margin-bottom: 0;
}

box {
    display: block;
    text-align: center;
    margin-top: 0;
    padding-top: 0;

}
box p {
    display: block;
    border-color:black ;
    border-style: solid;
    border-width: 1%;
    width: fit-content;
    height: 3em;
    justify-self: center;
    justify-content: center;
    margin-top: 0;
    padding-top: 3%;
    
}