h1 {font-family: 'Bungee', cursive; font-size: 25px; display: inline; text-align: right;}
h2 {font-family: 'Gugi', cursive; font-size: 20px; display: inline;}
h3 {font-family: 'Do Hyeon', sans-serif; font-size: 55px; display: inline;}
h4 {font-family: 'Poiret One', cursive; font-size: 25px; display: inline;}
h6 {font-family: 'Arimo', sans-serif; font-size: 15px; display: inline;}
p {font-family: 'Arimo', sans-serif; display: inline;}
p {font-size: 25px; text-align: center;}
body {text-align: center; background-color: #efe6d2; margin: 0;}
a {text-decoration:none;}
a.logo {color: white;}
a.btn {color: black;}

a:hover {
    color: olive;
    -webkit-transition: color 1.5s; /* Safari */
    transition: color 1.5s;
}

a:active {
    color: olive;
}

hr { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); }

.zone1 {
width: 80%;
background-color: #97948c;
border-radius: 10%;
border-width: 5px;
box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,1);
padding: 1%;
margin: auto;
overflow: auto;
}

.arith {
width: 60%;
background-color: #ebe8d4;
border-radius: 0% 0% 0% 10%;
border-width: 5px;
box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,.5);
padding: 1%;
float: left;
overflow: auto;
}

.arith2 {
width: 40%;
background-color: #ebe8d4;
border-radius: 10%;
border-width: 5px;
box-shadow: inset 0px 0px 15px 0px rgba(0,0,0,.75);
padding: 1%;
margin: auto;
overflow: auto;
}

.padder {
height: 25%;
}

.button2 {
width: 25%;
background-color: #e79f53;
border-radius: 15px;
border-width: 5px;
box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,1);
padding: 1%;
margin: auto;
}

.button3 {
width: 35%;
background-color: #8baea8;
border-radius: 15px;
border-width: 5px;
box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,1);
padding: 2%;
margin: auto;
}

.zone4 {
width: 35%;
background-image: url("calcback2.png");
    background-repeat:no-repeat;
    background-size:100% 100%;
border-radius: 0% 10% 10% 0%;
border-width: 5px;
box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,1);
padding: 1%;
margin: auto;
overflow: auto;
}

.button {
    background-color: #5e7d62;
    border: none;
    color: white;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 25px;
    margin: 4px 4px;
    cursor: pointer;
}
.button5 {border-radius: 10%; box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,1);}

.formB {
border-radius: 10%; 
width: 40%;
text-align: right;
box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,1);
    border: none;
    color: black;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 25px;
    margin: 4px 4px;
    cursor: pointer;

}

.buttonb {
    background-color: #9ea559;
    border: none;
    color: white;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 25px;
    margin: 4px 4px;
    cursor: pointer;
}
.buttonb5 {border-radius: 10%; box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,1);}

.upper {
width: 100%;
    background-color: #9ea559;
margin: 0;
padding: 1px;
}

.lower {
width: 100%;
height: 300px;
    background-color: #5e7d62;
margin: 0;
padding: 3px;
}

#header {
width: 100%;
    background-color: #9ea559;
margin: 0;
padding: 2%;
}

#main {
width: 100%;
height: 50%;
    background-image: url("calcback2.png");
    background-repeat:no-repeat;
    background-size:100% 100%;
margin: 0;
    padding-top: 5%;
    padding-bottom: 2%;
}

#footer {
width: 100%;
height: 100%;
    background-color: #5e7d62;
margin: 0;
padding: 3px;
}

.buttonM {
display: inline-block;
border-radius: 10%; 
box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,1);
margin: 1.2% auto 1.2% auto;
padding: 10px;
}

.buttonH {
width: 15%;
display: inline;
border-radius: 5%; 
box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,.5);
margin: 1%;
padding: 1%;
}

.current {
width: 15%;
display: inline;
border-radius: 5%; 
box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,.1);
margin: 1%;
padding: 1%;
}

meter {
size: 200%;
}