KM_Design/V1/resources/css/components/hero.css

.hero-title {
  color: #F8FAFC;
  font-size: 17vmin;
  font-family: 'Mona-Sans';
  font-weight: 800;
  line-height: 15vh;
}

.hero-title2 {
  position: relative;
  top: 21px;
  left: 13px;
  color: #F8FAFC;
  font-family: "Moonstone History";
  font-size: 19vmin;
  line-height: 10vh;
}

.hero-container {
  z-index: -2;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background-color: black;
  background-size: cover;
  background-image: url("/resources/img/IMG_Accueil.png");
}

.hero-sub-container {
  position: fixed;
  z-index: -1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.hero-sub-container-separator {
  height: 400px;
  width: 2px;
  background-color: #F8FAFC;
  transform: rotate(15deg);
  margin: 100px;
}

.hero-sub-container-menu {
  display: flex;
  flex-direction: column;
}

.hero-sub-container-menu-item1 {
  font-size: 40px;
  margin-bottom: 50px;
  margin-left: 50px;
  padding: 10px 20px;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  color: #F8FAFC;
  text-decoration: none;
  transition: 0.5s;
  border-radius: 50px;
  background-color: #ff3c00;
}

.hero-sub-container-menu-item1:hover {
  cursor: pointer;
  background-color: #ff5e00;
}

.hero-sub-container-menu-item2 {
  font-size: 30px;
  margin-right: 60px;
  padding: 10px 20px;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  color: #F8FAFC;
  text-decoration: none;
  transition: 0.5s;
  border-radius: 50px;
  border: 3px solid #F8FAFC;
}

.hero-sub-container-menu-item2:hover {
  cursor: pointer;
  background-color: #ff5e00;
}

.hero-logo {
  width: 80%;
  max-width: 500px;
}

.hero-decoration-text {
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
  margin: 0 auto;
}

.hero-decoration-text span {
  color: #F8FAFC;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  display: inline-block;
  animation: marquee 5s linear infinite;
}

.hero-decoration-text-top {
  top: 62px;
  width: calc(100% - 220px);
}

.hero-decoration-text-bottom {
  bottom: 62px;
  width: calc(100% - 220px);
  transform: rotate(180deg);
}

.hero-decoration-text-left {
  position: absolute;
  transform: rotate(-90deg);
  transform-origin: 0 0;
  width: calc(100vh - 220px);
}

.hero-decoration-text-left-container {
  position: absolute;
  left: 62px;
  bottom: 110px;
}

.hero-decoration-text-right {
  position: absolute;
  transform: rotate(90deg);
  transform-origin: 0 0;
  width: calc(100vh - 220px);
}

.hero-decoration-text-right-container {
  position: absolute;
  right: 63px;
  top: 110px;
}

.hero-decoration-cross {
  position: absolute;
  height: 50px;
  width: 50px;
  color: #F8FAFC;
}

.hero-decoration-arrow {
  position: absolute;
  color: #F8FAFC;
  width: 20vmin;
  bottom: 150px;
  right: 180px;
}

#cross_up_right {
  top: 50px;
  right: 50px;
}

#cross_up_left {
  top: 50px;
  left: 50px;
}

#cross_down_left {
  bottom: 50px;
  left: 50px;
}

#cross_down_right {
  bottom: 50px;
  right: 50px;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-150px, 0);
  }
}

@media only screen and (max-width: 1800px) {
  .hero-title {
    font-size: 13vmin;
  }

  .hero-title2 {
    font-size: 26vmin;
  }

  .hero-decoration-text {
    display: none;
  }

  .hero-decoration-arrow {
    right: 45%;
    width: 10vmin;
    bottom: 180px;
  }
}