html {
  /*background-color: #001220;*/
  background-image: url("/static/blob-haikei.svg");
  background-color: #001220;
  background-position: center top;
  background-size: auto cover;
  background-repeat: no-repeat;
  scroll-behavior: smooth;
  margin-top: -100px;
}
body {
    margin: 0;
    font-family: "Montserrat-Bold", sans-serif;
    color: #EFF1F3;
}
section {
    height: 25vh;
    padding: 25vw; /*0 clamp(4rem, 12vw, 20rem);*/
    display: grid;
    place-content: left;
    
    &:nth-of-type(1) {
        background-image: url("/static/wave-haikei-alone.svg");
        background-attachment: fixed;
        background-size: contain;
        background-position: center bottom;
        background-repeat: no-repeat;
        min-height: 400px;
        
    }
    &:nth-of-type(2) {
        background-color: #FBAE3C;
        place-content: start center;
        img {
          opacity: 10%;
          margin-right: auto;
          margin-left: auto;
          max-width: 25%;
        }
        p {
          &:nth-of-type(1) {
          font-size: clamp(2rem, 4vw, 5rem);
          color: #001220;
          }
          &:nth-of-type(2) {
          font-size: clamp(1rem, 2vw, 3rem);
          color: #001220;
          }
        }   
    }
    &:nth-of-type(3) {
        background-image: url("/static/layered-waves-haikei.svg");
        background-size: cover;
        background-repeat: no-repeat;
        place-content: start;
        p {
            &:nth-of-type(1) {
            margin-top: 200px;
            font-size: clamp(1.5rem, 3vw, 5rem);
            color: #EFF1F3;
            
            }
        }
        tr {
            font-size: clamp(1rem, 2vw, 3rem);
            color: #EFF1F3;
        }

        sub {
          opacity: 80%;
        }  
    }
    &:nth-of-type(4) {
      height: 10vh;
      padding: 12vh;
    }
}
div.img-wrapper {
}
div.background-blob {
  background-image: url("/static/blob-scene-haikei.svg");
  background-size: cover;
  background-repeat: no-repeat;
  padding: 600px
}
div.background-wave {
  background-image: url("/static/wave-haikei.svg");
  background-size: cover;
  background-repeat: no-repeat;
  padding: 600px;
}
div.color {
  background-color: #FBAE3C;
  background-image: url("/static/wave-haikei-alone.svg");
  background-size: cover;
  background-repeat: no-repeat;
  padding:600px;
}
div.wrapper {
  margin: 1vw;
  max-width: 90%;
}
div.container {
  float: left;
  font-family: "Montserrat-Bold", sans-serif;
  font-size: clamp(2rem, 2vw, 3rem);
  text-align: left;
  min-width: 200px;
  color: #EFF1F3;
}
div.img {
  img {
    margin-right: auto;
    width: clamp(15rem, 20vw, 25rem);
    /*border: 3px solid #FBAE3C;*/
    /*clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%);*/
  }
  filter: drop-shadow(5px 10px 4px #001220)
}
.parallax {
  background-image: url("/static/wave-haikei-alone.svg");
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  max-width: 500px;
}
a:link, a:visited, a:active {
  color: white;
  text-decoration: none;
}
a:hover {
  color: #FA7268;
  transform: scale(1.5);
  transition: all 0.5s ease-in-out 0s;
}
footer {
    position: fixed;
    bottom: 0;
    display: table;
    text-align: right;
    margin-left: auto;
    width: 100%;
}
h1 {
  display: block;
  font-size: 20px;
  float: left;
}  
ul {
  list-style-type: none;
  margin: 4px;
  padding: 0;
  overflow: hidden;
  border-bottom: 3px solid #FBAE3C;
}
li {
  float: right;
  font-size: 16px;
}
li a {
  display: block;
  text-align: center;
  padding: 5px 16px;
}
li a:hover:not(.active) {
}
.active {
  background-color: #FBAE3C;
  
}
.fade-in-text {
  animation: fadeIn 2s;
}
@font-face {
  font-family: "Montserrat-Bold";
  src: url("/static/Montserrat-Bold.ttf"), format("ttf");
}

@keyframes fadeIn {
0% {
  opacity: 0;
}
100% {
  opacity: 1;
}
}