@font-face {
  font-family: "Clear Sans";
  font-style: normal;
  font-weight: 100;
  src: local("ClearSans-Thin"), local("Clear Sans Thin"), url("../fonts/ClearSans-Thin.woff2") format("woff2")
}

@font-face {
  font-family: "Clear Sans";
  font-style: normal;
  font-weight: 300;
  src: local("ClearSans-Light"), local("Clear Sans Light"), url("../fonts/ClearSans-Light.woff2") format("woff2")
}

@font-face {
  font-family: "Clear Sans";
  font-style: normal;
  font-weight: 400;
  src: local("ClearSans"), local("Clear Sans"), url("../fonts/ClearSans-Regular.woff2") format("woff2")
}

@font-face {
  font-family: "Clear Sans";
  font-style: italic;
  font-weight: 400;
  src: local("ClearSans-Italic"), local("Clear Sans Italic"), url("../fonts/ClearSans-Italic.woff2") format("woff2")
}

@font-face {
  font-family: "Clear Sans";
  font-style: normal;
  font-weight: 500;
  src: local("ClearSans-Medium"), local("Clear Sans Medium"), url("../fonts/ClearSans-Medium.woff2") format("woff2")
}

@font-face {
  font-family: "Clear Sans";
  font-style: italic;
  font-weight: 500;
  src: local("ClearSans-MediumItalic"), local("Clear Sans Medium Italic"), url("../fonts/ClearSans-MediumItalic.woff2") format("woff2")
}

@font-face {
  font-family: "Clear Sans";
  font-style: normal;
  font-weight: 700;
  src: local("ClearSans-Bold"), local("Clear Sans Bold"), url("../fonts/ClearSans-Bold.woff2") format("woff2")
}

@font-face {
  font-family: "Clear Sans";
  font-style: italic;
  font-weight: 700;
  src: local("ClearSans-BoldItalic"), local("Clear Sans Bold Italic"), url("../fonts/ClearSans-BoldItalic.woff2") format("woff2")
}

@font-face {
    font-family: 'FOT-Yuruka Std';
    src: local("FOT-Yuruka Std"), url("../fonts/YurukaStd.woff2") format("woff2");
}

body {
  background: linear-gradient(135deg, #b000fa 0%, #2674fc 100%); 
  background-attachment: fixed;
  font-family: 'Clear Sans';
  color: #FFF;
  margin: 0;

  h1, h2, h3, h4, h5, h6 {
    font-family: 'FOT-Yuruka Std';
  }
  
  h1 {
    color: #FFF;
  
    span {
      font-weight: light;
    }
  }
}

.waves {
  width: 100%;
  position: fixed;
  top: 0;
}

#waves_a {
  height: 900px;
  background: url('../images/waves-a.svg') no-repeat;
  background-size: 100% 900px;
  opacity: 0.3;
  z-index: -2;
}

#waves_b {
  height: 1100px;
  opacity: 0.1;
  z-index: -1;
  background: url('../images/waves-b.svg') no-repeat;
  background-size: 100% 1100px;
}

article {
  max-width: 960px;
  margin: 50px auto 0;
  display: block;

  header {
    text-align: center;

    h1 {
      font-size: 62pt;
      font-weight: normal;
      font-style: normal;
      margin: 0;
      padding: 0;
      -webkit-text-stroke: 30px rgba(0,0,0,0.3);
      paint-order: stroke fill;
      letter-spacing: -7px;
    }

    img {
      width: 222px;
      margin-bottom: -30px;
    }
  }

  h1 {
    text-align: center;
    span {color: #BBB}
  }

  section {
    padding: 0 0 100px;
    p {font-style: italic}

    text-align: center;
    
    img {
      margin: 100px 4px 100px;
      width: 150px;
    }

    &.main {
      max-width: 840px;
      padding: 0 30px;
      margin: 0 auto;
      font-size: 23px;
      span {font-family: 'FOT-Yuruka Std'; font-style: normal}
      h1 {
        font-size: 38px;
        span {color: #635be6; font-size: 42pt}
      }
    }
  }
}

#watermark {
  position: fixed;
  width: 750px;
  margin-left: -375px;
  bottom: -320px;
  overflow: hidden;
  left: 50%;
  opacity: 0.04;
  z-index: -1;
}

footer {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  padding-top: 33px;
  max-width: 1180px;
  padding: 33px 50px 100px;
  margin: 50px auto 0;
  overflow: hidden;

  a {
    float: right;
    color: #FFF
  }
}