:root{
    --crayola-red: #FF8811;
    --red-hover: #A35200;
    --crayola-light: #f15574;
    --pistachio: #65892F;
 }

html, body{
    all: initial;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 15pt;
    background-color: #434371;
    color: aquamarine;
}
main, .maincontainer{
    
    margin-left: 12.5%;
    margin-right: 12.5%;
}
a{
    color: var(--crayola-red);
    text-decoration: none;
}
a:hover{
    color: var(--red-hover);
    text-decoration: wavy;
}
header{
    text-align: center;
}
footer{
    text-align: center;
}
h2{
    text-align: center;
}
h3{
    color: teal;
}
main, .main_container{
/*margin-left: 25%;
margin-right: 25%;*/
width: 95%;
margin: 0 auto;
max-width: 1400px;
}
header{
    border-bottom: solid #3C3C67 5px;
}
footer{
    margin-top: 10px;
    border-top: solid #3C3C67 5px;
}
nav.header{
    padding-bottom: 5px;
}
nav.footer{
    padding-top: 5px;
}
div.center{
    margin: 0 auto;
    text-align: center;
}
div.pad_center{
    margin-left: 20%;
}
p.center{
    text-align: center;
}
h3.center{
    text-align: center;
}
.italic-text{
    font-style: italic;
}
figure{
    font-style: italic;
    text-align: center;
}
span.divider_head{
    font-size: 15pt;
    color: teal;
}
span.divider_nav{
    font-size: 10pt;
    color: teal;
}
span.bullet{
            /*A00000*/
    color: var(--crayola-red);
    font-weight: bold;
}
span.email{
    font-style: italic;
    color: var(--crayola-red);
}
ol.tabular{
    margin-left: 20%;
    margin-right: 25%;
    text-align: justify;
}

table tr, td, th{
    border: solid;
    border-width: 1px;
    border-color: teal;
    border-collapse: collapse;
    text-align: justify;
    
}
table.simple{
    margin-left: 20%;
    margin-right: 20%;
}
table.complex tr:nth-child(even){
    background-color: #4343ff;
}
td.num{
    text-align: center;
}
form{
    display: table;
}
span.form{
    display: table-row;
}
label{
    display: table-cell;
}
label.form-sublabel{
    color: #29a39f;
    margin-left: 5px;
    padding-left: 5px;
}
input{
    display: table-cell;
    margin-left: 5px;
}
ul{
    display: inline-block;
    text-align: left;
    margin-left: 20%;
    margin-right: 10%;
}
body.head_foot{
    text-align: center;
    border-width: 0;
    border: none;
    padding: 0;
    margin: 0;
}
.center_container{
    text-align: center;
    border-width: 5px;
    border: solid;
    border-color: #F7CB15;
    margin: 10px auto;
    width: 50%;
}
main.center_main{
    text-align: center;
}
img.intro
{
    width: 30%;
    border: solid;
    border-color: #F7CB15;
    border-radius: 40px;
}
.grid-container-calc{
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
label.calc{
    grid-column: 1 /span 3;
    grid-row: 1;
    color: var(--crayola-red);
    background-color: teal;
    text-align: right;
    border-style:inset;
    border-color: black;
    border-radius: 10px;
    border-width: 2px;
    padding-top: 1%;
    padding-bottom: 1%;
    font-weight: bold;
}
input.calc{
    grid-column: 1 /span 3;
    grid-row: 2;
    text-align: right;
    color: var(--crayola-red);
    background-color: teal;
    font-size: 20pt;
    font-weight: bold;
    border-radius: 10px;
}
button.calc{
    background-color: var(--crayola-red);
    font-size: 25pt;
    font-weight: bold;
    border-radius: 20px;
    width: 80%;
    padding-top: 4%;
    padding-bottom: 4%;
    border-style: outset;
    border-color: grey;
} 
.b-1{
    grid-column: 1;
    grid-row: 3;
}
.b-2{
    grid-column: 2;
    grid-row: 3;
}
.b-3{
    grid-column: 3;
    grid-row: 3;
}
.b-4{
    grid-column: 1;
    grid-row: 4;
}
.b-5{
    grid-column: 2;
    grid-row: 4;
}
.b-6{
    grid-column: 3;
    grid-row: 4;
}
.b-7{
    grid-column: 1;
    grid-row: 5;
}
.b-8{
    grid-column: 2;
    grid-row: 5;
}
.b-9{
    grid-column: 3;
    grid-row: 5;
}
.b-0{
    grid-column: 1/ span 3;
    grid-row: 6;
    /*width: 93.5%;*/
    padding-top: 0;
    padding-bottom: 0;
}
.b-plus{
    grid-column: 4;
    grid-row: 3;
}
.b-minus{
    grid-column: 4;
    grid-row: 4;
}
.b-mult{
    grid-column: 4;
    grid-row: 5;
}
.b-div{
    grid-column: 4;
    grid-row: 6;
}
.b-equal{
    grid-column: 4;
    grid-row: 2;
}
.b-clear{
    grid-column: 1/ span 4;
    grid-row: 7;
    width: 97%;
    padding-top: 1%;
    padding-bottom: 1%;
}

button.calc:hover{
    background-color: var(--red-hover);
}
button.calc:active{
    background-color: maroon;
    border-style: inset;
}
div.drawing{
    text-align: center;
}
canvas{
    border: solid 3px maroon;
}
/* MOBILE RULES */
/* Remove Initial */
/* Foundational Three */
/* Rule Overrides For Laptops / Small Screens */
@media screen and (min-width: 1081) and (max-width: 1400px){
    img.intro{
        width: 30%;
    }
}
@media screen and ( min-width: 981px ) and ( max-width: 1400px ) {
    img.intro{
        width: 37.5%;
    }
}
/* Rule Overrides For Tablet Devices */
@media screen and ( min-width: 601px ) and ( max-width: 980px )  {
    img.intro{
        width: 40%;
    }
}
/* Rule Overrides For Mobile Devices */
@media screen and ( min-width: 370px ) and ( max-width: 600px ) {
    img.intro{
        width: 75%;
    }
    ul{
        margin-left: 10%;
    }
    html, body{
        font-size: 12pt;
    }
}