/*css*/

/*save as type3.css*/

body {background:#2471a3;
font-family: 'Open Sans',sans-serif;
height: 200vw;
width:100vw;
   overflow-x: hidden;
margin:0 auto;}


main{display: grid;
grid-template-columns:1fr 1fr 1fr 1fr;
grid-auto-rows:40vw;
    height: 200vw;
width:100vw;
    grid-auto-columns:80vw;
font-family: 'Open Sans',sans-serif;}

nav{height: 40vw;
width:10vw;
     color: #000000;
line-height: 3em;
font-weight: 300;
    font-size: 1em;
    font-family:'Open Sans',sans-serif;}

ul{list-style: none;}

ul li{
  line-height: 3em;
font-weight: 300;
    font-size: 1em;
text-align: center;
border: 2px solid;}

ul li a{
    text-decoration: none;
    background-color:#d4ac0d;
    color: #000000;
    display: block;
    text-align: center;
    line-height: 2em;
}

ul li a:hover{
    background-color:#ffffff;}

ul li ul li{display: none;}

ul li:hover ul li{display: block;}

.active{background-color:#F8edc6;}

a{display: grid;
    grid-column:2;
grid-row:3;
height: 2vw;
width:9vw;
background:#9c3;
transition: all .3s ease;}

a:hover, a:focus{color:#E8DAEF;
    height: 30vw;
background:#D4E6F1;}

.about{font-family: 'Open Sans',sans-serif;
grid-column:2;
grid-row:3;
font-size: 2em;
width: 49vw;
height: 15vw;}

.card{height: 100%;
    grid-column:2;
grid-row:6;
    text-align: center;
    font-size: 4em;
width: 100%;
  color: #F9E79F;   
display: grid;
 transition: all .3s ease;}

.card:hover{ color:#82E0AA;
    transform: rotateY(180deg);}

.card.side{backface-visibility: hidden;
height: 100%;
width: 100%;}


.button{display: grid;
       grid-column:2;
grid-row:1; 
    border: 0;
  color: #F9E79F;
font-size: 24em;
  border-radius: 4px;
  transition: all .3s ease;}

.button:active {
  color:#82E0AA;
  transform: translateY(3px);}


.box{display: grid;
    background: #aec6cf;
    text-align: center;
    color: #dc7633;
    grid-column:2;
grid-row:4;
border-radius: 6px;
    height: 60vw;
transition-property: background, border-radius;
transition-duration: 1s;
transition-timing-function: linear;}

.box:hover{color: #edbb99;
border-radius: 90%;}

h2{ display: grid;
     margin: 0;
    font-weight: 100;
    font-size: 1.5em;}

h3{ display: grid;
     margin: 0;
    font-weight: 100;
    font-style: italic;
    font-size: 1.5em;}

h4{ display: grid;
     margin: 0;
    font-weight: 600;
    font-size: 2em;}

h5{ display: grid;
    margin: 0;
    font-weight: 600;
    font-style: italic;
    font-size: 2em;}

h6{ display: grid;
     margin: 0;
 font-weight: 700;
    font-size: 3em;}

h7{display: grid;
     font-style: italic;
 font-weight: 700;
    font-size: 3em;}

.skew{display: grid;
    font-family: 'Open Sans',sans-serif;
grid-column:2;
grid-row:8;
font-size: 1em;
height: 90em;
width:30em;
line-height: 5em;
    font-weight: 300;}

h8{display: grid;
    font-weight: 700;

    font-size: 4em;}

h9{display: grid;
        font-style: italic;
 font-weight: 700;
    font-size: 4em;}

h10{display: grid;  
    grid-column: 1/span 2;
    font-size: 1em;
font-weight:900;
width:62vw;}

h11{display: grid;
     grid-column: 1/span 2;
 font-weight: 900;
    font-style: italic;
    font-size: 2em;}

h12{display: grid;
       grid-column: 1/span 3;
    font-size:3em;
font-weight: 500;
font-style:normal;
width:65vw;}

h13{display: grid;
        grid-column: 1/span 3;
   font-size:9em;
font-weight: 800;
font-style:italic;
width:62vw;}

h14{display: grid;
        grid-column: 1/span 4;
  font-weight: 500;
    font-style: italic;
    font-size: 4em;}

h15{display: grid;
        grid-column: 3/span 4;
  font-weight: 100;
  font-style: italic;
    font-size: 2em;}

h16{display: grid;
        grid-column: 1/span 4;
  font-weight: 100;
   transform: skewY(25deg);
    font-size: 2em;}


h17{display: grid;
        grid-column: 1/span 4;
  font-weight: 900;
      transform: skewX(35deg);
 
    font-size: 2em;}

h18{display: grid;
        grid-column: 2/span 4;
  font-weight: 900;
   transform: skewY(35deg);
    font-size: 2em;}

h19{display: grid;
        grid-column: 1/span 4;
  font-weight: 900;
    font-style: italic;
    font-size: 2em;}

.p{display: grid;
    font-size:2em;
font-family: 'Open Sans';}


.rotate{font-family: 'Open Sans',sans-serif;
     display: grid;
    font-size: 25em;
    color:#F5B7B1;
    grid-column:3;
grid-row:1;
transition: all .3s ease;}

.rotate:hover{color:#EC7063;}