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

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

* {
  padding: 0;
  margin: 0;
  border: 0;
  z-index: 0;
  text-decoration: none;
  list-style: none;
  color: #fff;
}

html,
body {
  background-color: #2d2d2d;
  font-family: "Open Sans", sans-serif;
}

#nav {
  position: fixed;
  top: 0;
  width: 100%;
  height: 3em;
  font-size: 1.2em;
  background-color: #00000070;
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), radial-gradient(circle at 0% 100%, rgba(0, 0, 0, 1) 0%, rgba(147, 5, 5, 1) 100%);
  overflow: hidden;
  z-index: 12;
}

#nav h2 {
  float: left;
  position: relative;
  top: 0.3em;
  left: 5%;
}

#nav nav {
  float: right;
  position: relative;
  top: 0.85em;
  right: 3.5%;
}

#nav nav a {
  padding: 0px 0.7rem;
  transition: ease 0.6s;
  transform: translateY(0);
  will-change: transform;
}

#nav nav a:hover {
  color: #898989;
}

#hero {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(354deg, rgba(255, 65, 194, 1) 0%, rgba(255, 204, 46, 1) 100%);
  -webkit-backdrop-filter: blur(100px);
  -moz-backdrop-filter: blur(100px);
  backdrop-filter: blur(100px);
  background-size: 380% 380%;
  text-align: center;
  font-size: 1.6em;
  animation: gradient 8s ease infinite;
  text-align: center;
  overflow: hidden;
  width: 100%;
  height: 55vh;
  position: relative;
  top: 2.3em;
}

.hero-content {
  position: relative;
  top: 25%;
}

.more-info-section-1 {
  background-color: rgb(4, 160, 212);
  position: absolute;
  top: 58.7%;
  width: 100%;
  height: 41.3vh;
  overflow: hidden;
}

.more-info {
  position: absolute;
  height: 41.3vh;
  overflow: hidden;
  width: 100%;
  text-align: justify;
}

.more-info-section-1 h3 {
  float: right;
  position: relative;
  top: 25%;
  right: 12%;
}

.more-info-section-1 h1 {
  float: right;
  position: absolute;
  top: 33%;
  right: 12%;
}

.more-info-section-1 p {
  float: right;
  position: absolute;
  top: 50%;
  right: 10%;
}

.more-info-section-1 img {
  width: 470px;
  height: 250px;
  float: left;
  position: relative;
  left: 4em;
  top: 10%;
  cursor: pointer;
}

.more-info-section-2 {
  top: 100%;
  background-color: rgb(200, 66, 245);
}

.more-info-section-2 h3 {
  float: left;
  position: relative;
  top: 25%;
  left: 12%;
}

.more-info-section-2 h1 {
  float: left;
  position: absolute;
  top: 33%;
  left: 12%;
}

.more-info-section-2 p {
  float: left;
  position: absolute;
  top: 50%;
  left: 12%;
}

.more-info-section-2 img {
  width: 470px;
  height: 250px;
  float: right;
  position: relative;
  right: 4em;
  top: 11%;
  cursor: pointer;
}

@media screen and (max-height: 1365px) {

  .more-info-section-1 img,
  .more-info-section-2 img {
    width: 450px;
    height: 230px;
    top: 8%;
  }
}