/*-------font------------*/
      
      @import url('https://fonts.googleapis.com/css?family=Nosifer');
      @import url('https://fonts.googleapis.com/css?family=Monoton|Nosifer');
      @import url('https://fonts.googleapis.com/css?family=Chau+Philomene+One|Monoton|Nosifer|Poiret+One|Saira+Condensed');
      /*-------rset css------------*/
      
      *,
      body,
      html {
          margin: 0;
          padding: 0;
      }
      
      body {
          font-family: 'Chau Philomene One', sans-serif;
          font-family: 'Monoton', cursive;
          font-family: 'Nosifer', cursive;
          font-family: 'Poiret One', cursive;
          font-family: 'Saira Condensed', sans-serif;
          height: 100%;
          font-size: calc(14px + (22 - 14) * ((100vw - 300px) / (1600 - 300)));
      }
      /*---------------Grid with floats-------------------*/
      
      img {
          width: 100%;
          margin: 8px 0;
          display: block;
          border: 0px solid rgba(252, 144, 134, 0.596);
          border-radius: 15px;
          box-shadow: -2px 4px 19px 0px rgb(76, 77, 86);
          -webkit-transition: all 0.7s ease;
          transition: all 0.7s ease;
      }
      
      img:hover {
          -webkit-transform: scale(0.8);
          -ms-transform: scale(0.8);
          transform: scale(0.8);
      }
      
      h1 {
          /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f85032+0,f16f5c+50,f6290c+51,f02f17+71,e73827+100;Red+Gloss+%231 */
          background: rgb(248, 80, 50);
          /* Old browsers */
          background: -moz-linear-gradient(top, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
          /* FF3.6-15 */
          background: -webkit-linear-gradient(top, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
          /* Chrome10-25,Safari5.1-6 */
          background: linear-gradient(to bottom, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
          /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
          filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827', GradientType=0);
          /* IE6-9 */
          text-align: center;
          display: block;
          color: whitesmoke;
          font-family: 'Nosifer', cursive;
      }
      
      h2 {
          border-bottom: 5px solid rgb(255, 51, 33);
          display: block;
          padding-top: 25px;
          text-align: center;
          font-family: 'Nosifer', cursive;
      }
      
      main {
          background: rgba(248, 238, 238, 0.5);
          display: grid;
          padding-bottom: 5px;
          text-align: center;
      }
      /*-------grid floats------------*/
      
      #grid-floats {
          width: 90%;
          margin: 0 auto;
          text-align: center;
          padding-top: 25px;
          list-style: none;
          position: relative;
          display: block;
      }
      
      #grid-floats .grid-item {
          border: 2px solid rgba(252, 144, 134, 0.19);
          border-radius: 15px;
          width: 21%;
          float: left;
          margin: 10px auto;
          padding: 1%;
          margin-right: 1%;
          position: relative;
          display: block;
          height: 550px;
          line-height: 1.5em;
      }
      
      #grid-floats .grid-item:hover {
          border: 2px solid rgb(255, 51, 33);
      }
      /*------- end grid floats------------*/
      /*-----Media Query--------*/
      /*-----pc--------*/
      
      @media only screen and (min-width:769px) {
          #grid-floats .grid-item:nth-child(1) {
              width: 45%;
          }
      }
      /*-----tablet--------*/
      
      @media only screen and (min-width:321px) and (max-width:768px) {
          #grid-floats .grid-item:nth-child(-n+2) {
              width: 45%;
              height: 450px;
          }
          #grid-floats .grid-item:nth-child(n+3) {
              width: 29%;
              height: 450px;
          }
      }
      /*------mobile-------*/
      
      @media only screen and (max-width:320px) {
          #grid-floats .grid-item:nth-child(1) {
              width: 90%;
              height: 300px;
              margin: 5px;
          }
          #grid-floats .grid-item:nth-child(n+2) {
              width: 45%;
              height: 410px;
          }
      }
      /*----- end Media Query--------*/
      /*----- grid-flex--------*/
      
      #grid-flex {
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          flex-wrap: wrap;
          width: 90%;
          margin: 0 auto;
          text-align: center;
          padding-top: 25px;
          list-style: none;
          justify-content: center;
      }
      
      #grid-flex .grid-item {
          border: 2px solid rgba(252, 144, 134, 0.19);
          border-radius: 15px;
          width: 21%;
          margin: 10px auto;
          padding: 1%;
          margin-right: 1%;
          display: block;
          box-sizing: border-box;
      }
      
      #grid-flex .grid-item:hover {
          border: 2px solid rgb(255, 51, 33);
      }
      /*-----Media Query--------*/
      /*-----pc--------*/
      
      @media only screen and (min-width:769px) {
          #grid-flex .grid-item:first-child {
              flex: 35%;
          }
      }
      /*-----tablet--------*/
      
      @media only screen and (min-width:321px) and (max-width:768px) {
          #grid-flex .grid-item:nth-child(-n+2) {
              flex: 35%;
          }
          #grid-flex .grid-item:nth-child(n+3) {
              flex-basis: 29%;
          }
      }
      /*------mobile-------*/
      
      @media only screen and (max-width:320px) {
          #grid-flex .grid-item:nth-child(1) {
              flex: 100%;
          }
          #grid-flex .grid-item:nth-child(n+2) {
              flex-basis: 45%;
          }
      }
      /*----- end Media Query--------*/
      /*----- animation--------*/
      
      h1 {
          animation-duration: 3s;
          animation-name: slidein;
          animation-iteration-count: 1;
          animation-direction: alternate;
      }
      
      @keyframes slidein {
          from {
              margin-left: 100%;
              width: 300%;
          }
          to {
              margin-left: 0%;
              width: 100%;
          }
      }
      
      h2 {
          display: flex;
          justify-content: center;
          overflow: hidden;
          border-right: .10em solid rgba(248, 238, 238, 0.5);
          margin: 0 auto;
          letter-spacing: .15em;
          animation: typing 3s steps(30, end), blink-caret .5s step-end infinite;
      }
      /* The typing effect */
      
      @keyframes typing {
          from {
              width: 0
          }
          to {
              width: 100%
          }
      }