@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes boxShadow {
    0% {   box-shadow: rgb(255 255 255 / 47%) 0px 0px 0px; }
    100% {   box-shadow: rgb(255 255 255 / 47%) 0px 0px 10px; }
  }
@keyframes getBigger {
  0% { transform: scale(0); }
  50% { transform: scale(0); }
  100% { transform: scale(1); }
}

@keyframes neon3 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #cab243, 0 0 70px #cab243, 0 0 80px #cab243, 0 0 100px #cab243, 0 0 150px #cab243;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #cab243, 0 0 35px #cab243, 0 0 40px #cab243, 0 0 50px #cab243, 0 0 75px #cab243;
  }
}


* {
  color: #ffffffcf;
  font-family: 'Inter', sans-serif;
}

body {
    background:
    linear-gradient(black, black), url("./images/bg_desktop.jpeg");
    background-size: cover;
    background-repeat: no-repeat;
    padding: 5vh 20vw;
    margin: 0;
    background-blend-mode: saturation;
}

@media all and (max-width: 600px) {
    body {
        background:
        linear-gradient(black, black), url("./images/bg_mobile.jpeg");
        background-size: 100%;
    }
}

.content {
  animation: fadeIn 1s forwards, boxShadow 2s 1s forwards;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80vh;
  backdrop-filter: blur(10px);
  padding: 50px;
  border-radius: 50px;
  box-shadow: rgb(255 255 255 / 47%) 0px 0px 10px;
}

h1 {
  margin-bottom: 0;
  font-size: 40px;
  text-align: center;
}

h2 {
  margin-top: 0;
  margin-bottom: 50px;
}

.pitch {
  margin-bottom: 50px;
  text-align: justify;
}

hr {
  border-top: #2c2816;
  box-shadow: 0px 1px 4px 0px #baaf8766;
  margin-bottom: 30px;
  width: 100%;
}

a {
  cursor: pointer;
  color: #cb9b51;
}

a:hover {
    color: #462523;
}

.button {
  animation: getBigger 2s;
  background: #cb9b51;
  box-shadow: 0 0 10px rgb(255 255 255 / 47%);
  border-radius: 10px;
  padding: 10px 10px;
  color: #fff;
  margin-bottom: 10px;
      border-width: 0.5px;
}
.button a {
  color: #fff;
}

.button:hover {
  box-shadow: 0 0 6px rgb(255 255 255 / 47%);
}
.button:active {
  box-shadow: 0 0 4px rgb(255 255 255 / 47%);
  text-shadow: 0 0 0.5px rgb(255 255 255 / 47%);
}


i {
  color: #cab243;
  cursor: pointer;
}

i:hover {
    cursor: pointer;
    color: #cab243;
    animation: neon3 1.5s ease-in-out infinite alternate;
}

.social_networks {
  margin-top: 40px;
}

.social_networks i {
  font-size: 30px;
}

footer {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

footer p {
  font-size: 12px;
  margin: 0;
  color: #060606;
  margin-bottom: 10px;
}

.gold_letters {
    background-image: linear-gradient( to right, #462523 0, #cb9b51 22%, #f6e27a 45%, #f6f2c0 50%, #f6e27a 55%, #cb9b51 78%, #462523 100% );
    color: transparent;
    -webkit-background-clip: text;
}