.main {
width: auto;
height: auto;
text-align: center;
background:#F0FFFF;
}
.header {
width:1020px;
height:100px;
border:1px solid black;
font-size: 24px;
font-family: Georgia, serif;
font-size: 31px;
letter-spacing: -1.6px;
word-spacing: -1.2px;
font-weight: 700;
text-decoration: none;
text-shadow: 0px 3px 3px rgba(255,255,255,0.5), 1px -6px 4px rgba(84,7,23,0);
/*text-shadow: 2px 2px 0 #bcbcbc, 4px 4px 0 #9c9c9c, 10px 2px 4px rgba(206,89,55,0);*/
}
.indexmiddle
{
width:1200px;
height:550px;
border-top: 5px double #000000;
border-bottom: 5px double #000000;
font-family: Impact, Charcoal, sans-serif;
font-size: 15px;
letter-spacing: -0.4px;
word-spacing: 0.8px;
color: #e5e7e6;
font-weight: normal;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: none;
}
.indexmiddle1
{
width:1200px;
height:auto;
border-top: 5px double #000000;
border-bottom: 5px double #000000;
font-size: 15px;
letter-spacing: -0.4px;
word-spacing: 0.8px;
color: #e5e7e6;
font-weight: normal;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: none;
}
.middle
{
width:1200px;
height:670px;
border-top: 5px double #000000;
border-bottom: 5px double #000000;
font-family: Playfair Display, serif;
font-size: 15px;
letter-spacing: -0.4px;
word-spacing: 0.8px;
color: #e5e7e6;
font-weight: normal;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: none;
}
.cmiddle
{
width:1200px;
height:670px;
border-top: 5px double #000000;
font-family: Playfair Display, serif;
font-size: 15px;
letter-spacing: -0.4px;
word-spacing: 0.8px;
color: #e5e7e6;
font-weight: normal;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: none;
}
.font {
/*font-family: Comic Sans MS, cursive, sans-serif;*/
font-family: Playfair Display, serif;
font-size: 15px;
letter-spacing: 1px;
word-spacing: -0.4px;
color: #001133;
font-weight: 800;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: none;
}
.button
{
font-family: Georgia, serif;
padding: 10px 15px;
text-decoration: none;
font-weight: 700;
background-color: #134B71;
border: none;
margin: 4px 14px;
font-size: 18px;
color:#FFF7E6;
border-radius: 10px;
box-shadow: 0 5px #000;
}
.div_ab {
text-align: left;
width:900px;
line-height: 200%;
}
.footer
{
width:1020px;
height:60px;
text-align:center;
}
.c{
    color:blue;
}
.h{
    color:red;
}
.e{
    color:green;
}

.result {
    text-align:left;
}
.left {
    text-align:left;
}
.right {
    text-align:right;
}
.right:after {
    content:':';
    margin-right:5px;
}
.loader {
  border: 3px solid red;
  border-radius: 30%;
  border-top: 3px solid red;
  border-bottom: 3px solid red;
  width: 10px;
  height: 10px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.position-show{
position:absolute;
top:25px;
font-size:11px;
left:0px;
background:black ;
color: #f9e79f ;
letter-spacing:1px;
font-weight: 800;
}