html {
  min-height: stretch;
}

body {
  font-family: "Alan Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: 0.9rem;
  color: white;
}

#background {
  background-image: url(resources/bg2_bottom.png), url(resources/bg_up.png);
  background-position: center bottom, center top;
  background-size: 100%, 100%;
  background-repeat: no-repeat, no-repeat;
  background-color: #ce3442;
}

img.logo {
  display: block;
  margin: 80px auto 80px auto;
}

div.note {
  max-width: 720px;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  padding: 48px;
  border-radius: 8px;
}

p {
  margin: auto;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

p.caption {
  max-width: none;
  margin: 40px;
  font-size: 0.75rem;
  text-align: right;
}

div.discord {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
}

div.discord span {
  vertical-align: 10px;
  margin-left: 10px;
}

a {
  font-weight: 700;
  text-decoration: none;
  color: #ffc73f;
}

a:hover {
  text-decoration: underline;
}

div.discord a {
  color: #6665d2;
  font-size: 1rem;
  text-align: center;
}

hr {
  max-width: 360px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  margin: 120px auto;
}

img.emoji {
  display: block;
  margin: 5rem auto;
}

.container-text > p {
  font-size: 1rem;
  text-align: justify;
}

blockquote {
  text-align: center;
  font-style: italic;
}

.discord-container {
  text-align: justify;
  background: rgb(0 0 0 / 14%);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 2rem;
}

hr {
  border: 0;
  height: 1px;
  background-color: #ccc;
  margin: 20px 0; /* Espaçamento vertical */
  margin: 1.5rem auto;
}

.discord > a {
  background: aliceblue;
  padding: 0.5rem 0.8rem;
  border-radius: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.25s;
}

.discord > a:hover {
  color: white;
  text-decoration: none;
  scale: 1.05;
  background: linear-gradient(45deg, #163d56, #152744);
  transition: 0.15s;
}

.discord > a:hover > img {
  scale: 1.05;
  filter: brightness(2.5) grayscale(1);
  transition: 0.15s;
}

p.--contact {
  margin-top: 1rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  background: rgb(185 185 185 / 8%);
}

@media (max-width: 768px) {
  body {
    font-size: clamp(0.85rem, 2.5vw, 0.9rem);
  }

  img.logo {
    margin: 40px auto;
  }

  div.note {
    padding: clamp(16px, 5vw, 24px);
  }

  p {
    font-size: clamp(0.9rem, 2.8vw, 1.1rem);
  }

  p.caption {
    margin: clamp(12px, 3vw, 20px);
    font-size: clamp(0.7rem, 2vw, 0.75rem);
  }

  div.discord a {
    font-size: clamp(0.95rem, 3vw, 1rem);
  }

  hr {
    margin: clamp(40px, 10vw, 60px) auto;
  }

  img.emoji {
    margin: clamp(40px, 8vw, 60px) auto clamp(50px, 10vw, 70px) auto;
  }
}

@media (max-width: 480px) {
  body {
    font-size: clamp(0.9rem, 4vw, 1rem);
  }

  img.logo {
    margin: 30px auto;
    max-width: 80vw;
    height: auto;
  }

  div.note {
    padding: clamp(16px, 6vw, 20px);
  }

  p {
    font-size: clamp(1rem, 4.5vw, 1.1rem);
  }

  p.caption {
    margin: clamp(10px, 4vw, 16px);
    font-size: clamp(0.75rem, 3vw, 0.8rem);
  }

  div.discord a {
    font-size: clamp(1rem, 4vw, 1.1rem);
  }

  hr {
    margin: clamp(30px, 8vw, 40px) auto;
  }

  img.emoji {
    margin: clamp(30px, 7vw, 40px) auto clamp(40px, 8vw, 50px) auto;
    max-width: 90vw;
    height: auto;
  }

  blockquote {
    margin-left: 0;
    margin-right: 0;
  }
}