@import url("https://fonts.googleapis.com/css2?family=Poiret+One&display=swap");

#loading {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: #404040;
  color: white;
  pointer-events: none;
  user-select: none;
}

#loading [async-src="/media/logo.png"] {
  position: fixed;
  transform: translate(-50%, 0%);
  opacity: 0;
  filter: brightness(10);
  z-index: 999;
}

#wave {
  position: fixed;
  width: 100vw;
  bottom: 0;
}
#wave > .bg-wave {
  background-color: rgb(164, 75, 55);
  height: 0vh;
}
.waves {
  position: relative;
  width: 100%;
  height: 15vh;
  margin-bottom: -7px; /*Fix for safari gap*/
  min-height: 100px;
  max-height: 150px;
}

.content {
  position: relative;
  height: 20vh;
  text-align: center;
  background-color: white;
}

/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height: 40px;
    min-height: 40px;
  }
  .content {
    height: 30vh;
  }
}

#load-bar {
  width: 100vw;
  height: 10px;
  background-color: white;
}

#border {
  display: flex;
  height: 5px;
  width: 100vw;
}
#border > div:nth-child(1) {
  height: 5px;
  flex: auto;
  background-color: rgb(164, 75, 55);
}
#border > div:nth-child(2) {
  height: 5px;
  flex: auto;
  background-color: rgb(85, 139, 203);
}
#border > div:nth-child(3) {
  height: 5px;
  flex: auto;
  background-color: rgb(237, 191, 114);
}

#highlighted-button {
  background-color: rgb(164, 75, 55);
  color: white;
  font-weight: bold;
}
.bg-1 {
  background-color: rgb(164, 75, 55) !important;
}
.bg-2 {
  background-color: rgb(85, 139, 203) !important;
}
.bg-3 {
  background-color: rgb(237, 191, 114) !important;
}
.cw {
  color: white;
}
.c-1 {
  color: rgb(164, 75, 55) !important;
}
.c-2 {
  color: rgb(85, 139, 203) !important;
}
.c-3 {
  color: rgb(237, 191, 114) !important;
}
[eye-catch="About"] {
  width: 100vw;
  height: 100vh;
  background-image: url("/media/bg1.png");
  background-repeat: no-repeat;
  background-size: cover;
}
[eye-catch="Work"] {
  width: 100vw;
  height: 100vh;
  background-image: url("/media/bg2.png");
  background-repeat: no-repeat;
  background-size: cover;
}
[eye-catch="Products"] {
  width: 100vw;
  height: 100vh;
  background-image: url("/media/bg3.png");
  background-repeat: no-repeat;
  background-size: cover;
}
[eye-catch="Products2"] {
  width: 100vw;
  height: 100vh;
  background-image: url("/media/bg4.png");
  background-repeat: no-repeat;
  background-size: cover;
}
[eye-catch="Products3"] {
  width: 100vw;
  height: 100vh;
  background-image: url("/media/bg5.png");
  background-repeat: no-repeat;
  background-size: cover;
}
[eye-catch="Company"] {
  width: 100vw;
  height: 100vh;
  background-image: url("/media/bg6.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
#view {
  opacity: 0;
}

[sync-from="#title"] {
  font-family: "Poiret One", cursive;
}

[constHide],
[hide] {
  display: none;
}

active {
  position: absolute;
  display: block;
  height: 60px;
  width: 60px;
  border-radius: 100%;
  background-color: #82b1ff;
  opacity: 0.5;
  pointer-events: none;
}

.shadow {
  filter: drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.6));
}
.pol {
  filter: drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.6));
}
img {
  pointer-events: none;
  user-select: none;
}