html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,figure,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

    html {
      font-size:21px;
      margin: 0;
    }

    h1 {
      font-size: 100rem;
    }

    h2 {
      font-size: 15rem;
    }

    h3 {
      font-weight: 300;
      font-size: 5.5rem;
    }

    h4 {
      font-weight: 300;
      font-size: 30em;
    }

    h5 {
      font-size: 45em;

    }

    p {
      font-size: 1.9em;
      line-height: 2.8rem;
    }

    p.neuton {
      letter-spacing: .5px;
    }

    a {text-decoration: none; color: black;}

    section {
      display: grid;
      width: 100%;
    }

    @keyframes rubik {
      0%   {border-radius: 0px 0px 0px 0px; background-color: #ff7e16;}
      25% {border-radius: 60px 170px 170px 60px; background-color: #ff9138;}
      100% {border-radius: 0px 0px 0px 0px; background-color: #ff7e16;}
    }

    @keyframes header {
      0%   {opacity: 1;}
      50% {opacity: 0;}
      100% {opacity: 1;}
    }

    #navbar {
      background-color: rgba(229, 229, 229, .3);
      position: absolute;
      z-index: 9;
      background-color: #e5e5e5;
      cursor: move;
      text-align: center;
      box-shadow: 0px 0px 10px gray;
      top: 35em;
      left: 2em;
      transform: rotate(12deg);
    }
    #navbarheader {
      padding: 10px;
      cursor: move;
      z-index: 10;
      background-color: darkgray;
      color: #fff;
      animation-name: header;
      animation-duration: 1s;
    }
    #navbar a {
      float: left;
      display: block;
      color: black;
      align-items: center;
      padding: 20px 30px;
      text-decoration: none;
      font-size: 20px;
      transition: all .4s ease 0s;
    }
    #navbar a:hover {
      background: white;
      opacity: .8;
      color: black;
    }

    .rubik {
      font-family: 'Rubik', sans-serif;
    }
    .neuton {
      font-family: 'Neuton', serif;
    }
    .monoton {
      font-family: 'Monoton', cursive;
    }

    .light { font-weight: 300;}
    .regular { font-weight: 400;}
    .medium { font-weight: 500;}
    .bold { font-weight: 700;}
    .black { font-weight: 900;}

    .n_exlight { font-weight: 200;}
    .n_exbold { font-weight: 800;}

    .italic {
      font-style: italic;
    }

    .colorlight {color: #ffc899;}
    .colorregular {color: #ffb87c;}
    .colormedium {color: #ffa65e;}
    .colorbold {color: #ff9138;}
    .colorblack {color: #ff7e16;}

    .ncolorexlight {color: #e1ccff;}
    .ncolorlight {color: #d0adff;}
    .ncolorregular {color: #bf8eff;}
    .ncolorbold {color: #ac6dff;}
    .ncolorexbold {color: #9f56ff;}


    .section1 {
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: 100vh;
      grid-gap: none;
      justify-items: center;
      align-items: center;
      background-color: #ff9138;
      color: #ffc899;
    }

    .section2 {
      grid-template-columns: 1;
      grid-template-rows: 115vh;
      justify-items: center;
      align-items: center;
      color: #ffc899;
    }

    .section3 {
      grid-template-columns: 1fr 4fr 4fr;
      grid-template-rows: 40vh;
      letter-spacing: 3em;
    }

    .section4 {
      grid-template-columns: .5fr 3fr 1.75fr;
    }

    .section5 {
      grid-template-columns: 1fr 3fr 3fr 1fr;
      grid-template-rows: repeat(5, 1fr);
      justify-items: center;
      grid-row-gap: 2vh;
      padding-top: 13em;
      padding-bottom: 20em;
    }

    .section6 {
      grid-template-columns: 1fr 3fr 3fr 1fr;
      justify-items: center;
      align-items: center;
      background-color: #ff7e16;
      color: white;
      height: 100vh;
      margin-bottom: 4em;
    }
    .section6:hover {
      animation-name: rubik;
      animation-duration: 5s;
    }

    .section7 {
      grid-template-columns: 1fr 6fr 1fr;
      grid-template-rows: repeat(5, 30em);
      justify-items: center;
      color: #ffa65e;
    }
    .r1 {opacity: .4;}
    .r2 {transform: rotate(20deg); opacity: .4;}
    .r3 {transform: rotate(40deg); opacity: .4;}
    .r4 {transform: rotate(60deg); opacity: .4;}
    .r5 {transform: rotate(70deg); opacity: .4;}
    .r6 {transform: rotate(90deg); opacity: .4;}

    .section8 {
      grid-template-columns: 1fr 4fr 2fr;
      grid-template-rows: repeat(2, 6em);
      color: #ffa65e;
      padding-top: 30em;
      height: 20vh;
    }

    .nsection1 {
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: 100vh;
      grid-gap: none;
      justify-items: center;
      align-items: center;
      background-color: #9f56ff;
      color: #d6b7ff;
    }

    .nsection2 {
      grid-template-columns: repeat(9, 1fr);
      grid-template-rows: repeat(3, 20vh);
      justify-items: center;
      color: #9f56ff;
      padding-top: 6em;
    }

    .nsection3 {
      grid-template-columns: 1;
      justify-items: center;
      color: #9f56ff;
      padding-top: 5em;
    }

    .nsection4 {
      grid-template-columns:  1fr 60vw 1fr;
      justify-items: center;
      color: rgb(0,0,0,.7);
      padding-top: 2em;
    }

    .nsection5 {
      grid-template-rows: 130vh 150vh 120vh;
      justify-items: center;
      color: #9f56ff;
      margin-top: -25em;
    }

    .nsection6 {
      grid-template-columns: 10em repeat(2, 1fr) 10em;
      grid-template-rows: 10em 10em;
      justify-items: center;
      align-items: center;
      position: relative;
      background-color: #9f56ff;
      color: white;
      height: 100vh;
    }
    .nsection6:before {
      content: '';
      position: absolute;
      top: 0; right: 0;
      border-top: 200px solid white;
      border-left: 200px solid #9f56ff;
      width: 0;
    }

    .nsection7 {
      grid-template-columns: 1fr 6fr 1fr;
      grid-template-rows: repeat(5, 1fr);
      justify-items: center;
      grid-row-gap: 2vh;
      padding-top: 13em;
      padding-bottom: 20em;
      animation-name: neuton;
      animation-duration: 7s;
      animation-iteration-count: infinite;
    }
    @keyframes neuton {
      0%   {opacity: 1;}
      25% {opacity: .5;}
      50% {opacity: 0;}
      100% {opacity: 1;}
    }

    .nsection8 {
      grid-template-rows: 5em 23em;
      justify-items: center;
      align-items: center;
      color: #9f56ff;
      height: 80vh;
    }
    .rotate_word {transform: rotate(90deg);}

    .msection1 {
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: 100vh;
      grid-gap: none;
      justify-items: center;
      align-items: center;
      background-color: #ff5470;
      color: #ffb5c1;
    }

    .msection2 {
      justify-items: center;
      align-items: center;
      color: #ff5470;
      height: 75vh;
    }

    .msection3 {
      grid-template-columns: repeat(9, 1fr);
      grid-template-rows: repeat(3, 20vh);
      justify-items: center;
      background-color:#ff5470;
      color: white;
      padding-top: 6em;
      height: 70vh;
    }

    .msection4 {
      justify-items: center;
      align-items: center;
      height: 40vh;
    }
    .msection5 {
      justify-items: center;
      align-items: center;
      color: #ff5470;
      margin-top: -10em;
    }
    .msection6 {
      justify-items: center;
      align-items: center;
      background-color: #ff5470;
      color: white;
    }

    .bottomnav{
      align-items: center;
      justify-items: center;
      position: relative;
      color: #ff5470;
      height: 50vh;
      color: black;
    }
    .bottomnav a {
      transition: all .4s ease 0s;
    }
    .bottomnav:hover a {
      color: gray;
    }



    </style>