/*Divisions*/

html, body{
 background-image: url("cloud.jpg");
 background-size: cover;
 font-family:"Comic Sans MS";
}

img{
    border-radius: 20px;
}

/*H1*/

h1, h2, p, ol, ul, li{
    margin:10px;
    font-family:"Comic Sans MS";
    color:#000000;
}

h1{
    font-size: 2em;
}

h2{
    font-size: 1.5em;
}

p, ul, ol, li{
    font-size: 1em;
}

/*Main*/

main{
 width:990px;
 height:735px;
 border:5px solid #000;
 margin: auto;
 margin-top: -8px;
 position:relative;
 z-index:0;
}

epic{
    width:550px;
    height:550px;
    top: 13%;
    left: 30%;
    margin: auto;
    margin-top: -8px;
    position:absolute;
    z-index:0;
}

.scaler {
    position: absolute;
    animation: scale 1s infinite linear;
    animation-direction: alternate;    
}

.spinner {
    animation: spin 0.5s infinite linear;
    animation-direction: alternate;
}

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

@keyframes scale {
    100%{
        transform: scaleX(0.1) scaleY(0.1);
    }
}

video1{
    width: 990px;
    height: 475px;
    margin: auto;
    margin-top: -8px;
    position: relative;
    z-index: 0;
    top: 210px;
    right: 5px;
}

/*Header*/

header{
 width:990px;
 height:140px;
 font-size: 45px;
 background-color:#3b79ff;
 border:5px solid #000;
 position:absolute;
 top: -5px;
 left: -5px;
 z-index:1;
}

header2{
    width:990px;
    height:140px;
    font-size: 45px;
    border:5px solid #000;
    position:absolute;
    top: -5px;
    left: -5px;
    z-index:1;
}

/*Nav*/

nav{
 width:990px;
 height:65px;
 background-color:#3b79ff;
 border-top:5px solid #000;
 position:absolute;
 top: 140px;
 left: 0px;
 z-index:1;
}

nav2{
    width:990px;
    height:65px;
    border-top:5px solid #000;
    position:absolute;
    top: 140px;
    left: 0px;
    z-index:1;
}

nav2 a:link, nav2 a:hover, nav2 a:visited{
 background-color: #3b79ff;
 font-family:"Comic Sans MS";
 font-weight: bold;
 font-size:1.2em;
 text-decoration: none;
 padding: 2px 15px 2px 15px;
 border: 2px solid #000;
 border-radius: 6px;
 margin: 5px;
}

nav2 a:link{
 color:rgb(142, 172, 255);
 background: #fff;
}

nav2 a:hover{
 color:rgb(239, 250, 255);
 background: #3f91fc;
}

nav2 a:visited{
 color:rgb(255, 255, 255);
}

nav2 ul{
 text-align: center;
 padding-top: 7px;
}

nav2 ul li{
 display: inline;
 list-style: none;
}

navheader{
    width:100%;
    height:60px;
    background-color:#3b79ff;
    border-top:2px solid #000;
    border-bottom: 2px solid #000;
    position:absolute;
    left: 0px;
    top: 0px;
    z-index:2;
}

navheader2{
    width:100%;
    height:60px;
    border-top:2px solid #000;
    border-bottom: 2px solid #000;
    position:absolute;
    left: 0px;
    top: 0px;
    z-index:2;
}

navheader2 a:link, navheader2 a:hover, navheader2 a:visited{
 background-color: #3b79ff;
 position: relative;
 font-family:"Comic Sans MS";
 font-weight: bold;
 font-size: 1.2em;
 text-decoration: none;
 padding: 2px 15px 2px 15px;
 border: 2px solid #000;
 border-radius: 6px;
 z-index: 2;
 margin: 5px;
}

navheader2 a:link{
    color:rgb(142, 172, 255);
    background: #fff;
}
   
navheader2 a:hover{
    color:rgb(239, 250, 255);
    background: #3f91fc;
}
   
navheader2 a:visited{
    color:rgb(255, 255, 255);
}
   
navheader2 ul{
    text-align: center;
    padding-top: 7px;
}
   
navheader2 ul li{
    display: inline;
    list-style: none;
}

/*Aside*/

aside{
    width:195px;
    height:470px;
    font-size: 1em;
    background-color: #3b79ff;
    position:absolute;
    top:210px;
    padding-left: 8px;
    z-index:1;
}

aside2{
    width:195px;
    height:475px;
    font-size: 1em;
    position:absolute;
    top:210px;
    padding-left: 8px;
    z-index:1;
}

/*Section*/

section{
    width:785px;
    height:470px;
    border:5px solid #000;
    position:absolute;
    top:205px;
    left:200px;
    z-index:1;
}

/*Footer*/

footer{
 width:990px;
 height:55px;
 font-size: 10px;
 background-color:#3b79ff;
 position:absolute;
 top: 680px;
 left: 0px;
 z-index:0;
}

footer2{
    width:990px;
    height:50px;
    font-size: 10px;
    position:absolute;
    top: 685px;
    left: 0px;
    z-index:1;
}

footer2 a:link, a:hover, a:visited{
    color: black;
    text-decoration: none;
}

/*Article*/

article{
 width:610px;
 height:140px;
 border:5px solid #000;
 position:relative;
 top: 5px;
 left: 160px;
 margin-bottom:5px;
 z-index:2;
 font-weight: 600;
 border-radius: 25px;
}

/*Figure*/

figure{
 width: 140px;
 height: 140px;
 border: 5px solid #000;
 background-color: #6a99ff;
 position: absolute;
 bottom: -10px;
 right: 580px;
 margin-bottom: 5px;
 z-index:2;
 border-radius: 25px;
}

/*Class*/

.title{
 width:1000px;
 height:200px;
 border:0px solid #000;
 position:fixed;
 z-index:1;
 font-size: 5em;
 top: 30%;
 left: 15%;
}

.opacity{
    opacity: 0.4;
}

.opacity2{
    opacity: 0.6;
}