body{
    color: black;
    font-family: 'Nunito Semibold';
    text-align: center;
}
#content{
    display: grid;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-template-columns: 160px repeat(5, auto)  160px;
    grid-template-rows: auto auto auto;
    max-width: 1280px;
    margin: 0 auto;
    grid-template-areas:
            ". header header header header header ."
            "aside1  form form display display display aside2"
            ". footer footer footer footer footer .";
}
/* tablet grid */
@media screen and (max-width: 1150px){
    #content{  
        background-color: white;
        display: grid;
        grid-template-columns: repeat(5, auto);
        grid-template-rows: auto auto auto ;
        grid-gap: 10px;
        margin: 0 auto;
        grid-template-areas:
            "header header header header header"
            "aside1 form form form aside2"
            "display display display display display "
            "footer footer footer footer footer";
    }
    .hidetablet {
        display: none !important; 
    }
}
/* phone grid */
@media screen and (max-width: 800px){
    #content{  
        background-color: white;
        display: grid;
        grid-template-columns: repeat(5, auto);
        grid-template-rows: auto auto auto ;
        grid-gap: 10px;
        margin: 0 auto;
        grid-template-areas:
            "header header header header header"
            "form form form form form "
            "display display display display display "
            "footer footer footer footer footer";
    }
    .hidetablet { /* hidden elements on tablet should still be hidden on phone */
        display: none !important; 
    }
    .hidephone {
        display: none !important; 
    }
}
#content div{
    background: #e1e6eb;
    padding: 30px;
}
#results#results{ /* selector is double to give precedence over media query */
    border-style: solid;
    border-width: 2px;
    padding-top: 0px;
}
#chart#chart{ /* selector is double to give precedence over media query */
    padding: 0px;
}
#content .one{
    background: #c7d0d9;
    grid-area: header;
}
#content .two{
    background: #c7d0d9;
    grid-area: form;
    display: flex; 
    align-items: center; /* vertical centering  with flex */
  justify-content: center; /*   horizontal centering with flex */
    display: block;


}
#content .three{
    background: #c7d0d9;
    grid-area: display;
    display: flex;
    align-items: center; /* vertical centering with flex */
    justify-content: center; /* horizontal centering with flex */
}
#content .four{
    position: relative; 
    padding: 0px;
    display: flex; 
    align-items: center; /* vertical centering with flex*/
    justify-content: center; /* horizontal centering with flex */
}
#content .five{
    position: relative; 
    padding: 10px;
    display: flex; 
    align-items: center; /* vertical centering with flex*/
    justify-content: center; /* horizontal centering with flex */
}
#content .six{
    grid-area: aside1;
    padding: 0px !important;
}
#content .seven{
    grid-area: aside2;
    padding: 0px !important;
}
#content .nine{
    background: #c7d0d9;
    grid-area: footer;
}
form{
    border-style: solid;
    border-width: 2px;
    padding: 5px;
}
img{
    border-style: solid;
    border-width: 2px;
    max-width:100%;
    max-height:100%;
}
#formula{
    width: 80%;
    border-style: none;
    /* For vertical centering in div */
    position: absolute; 
    top: 50%; 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
}
#turtle{
    border-style: none;
    object-fit: cover;
    /* For vertical centering in div */
    position: absolute; 
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
#calcselect{
    margin: 20px auto;
}
#form_and_results{
    margin: auto;
}
/* .afterclick{
    grid-template-rows: auto 750px auto ;
} */

#form div{
    padding: 5px;
}
#form input[type=number]{
  width: 60px;
}
input#tstatYes:checked ~ div#id1{
    display:none;
  }
input#tstatNo:checked ~ div#id1{
    display:block;
}
input#tstatYes:checked ~ div#id2{
    display:block;
 }
 input#tstatNo:checked ~ div#id2{
    display:none;
 }
td input{
    width: 60px;
}
#id2{
    /* display: inline;
    line-height: 15px; */
    margin:20px;
    border: 2px solid grey;
}