@charset "UTF-8";

@import url(./global.css);
@import url(./variaveis.css);

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  min-width: 300px;
}

main section {
  display: flex;
  flex-direction: column;
  gap: 3rem;

  .with-backg {
    background: linear-gradient(135deg, var(--app-color-primary-30), var(--app-color-primary-50));
    align-items: center;
    border-radius: 0.5rem;
    box-shadow: 0 20px 32px 2px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    max-width: 84%;

    img {
      max-width: 75%;
    }
  }
}

article {
  width: 85%;
}

.col-reverse {
  flex-direction: column-reverse;
}

.first {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
  gap: 1.5rem;

  h2 {
    align-self: flex-start;
  }
}

.second.with-img {
  width: 100%;

  .titles {
    width: 84%;
  }
}

.first#center {
  gap: 2.5rem;
  align-items: center;
  text-align: center;

  h1 {
    span {
      color: var(--app-color-secondary);
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    }
  }

  .date-and-time {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .date,
    .time,
    .online {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    
    .online {
      gap: 0.5;
    }
  }
}

.first .item {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.625rem;
  width: 95%;

  .emoji {
    translate: 0 3px;
  }
}

.first#faq {
  h2 {
    align-self: center;
  }
}

.second,
.second .titles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;

  img {
    width: 100%;
  }
}

.second .titles {
  padding: 1.5rem 0 0.25rem;
  gap: 1.5rem;

  h4 {
    background-color: rgb(var(--app-color-primary-rgb), 0.16);
    font-size: 0.875rem;
    width: 280px;
    padding: 0.25rem 0;
  }

  h2 {
    font-size: 1.75rem;
    max-width: 350px;
    background: var(--app-color-secondary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .btn {
    color: var(--app-color-primary-shade);
    font-size: 0.875rem;
    font-weight: bold;
    text-transform: uppercase;
    padding: 0.75rem 1rem;
    border: 1px solid var(--app-color-primary-shade);
    border-radius: 1.25rem;
  }
}

.content-sub .first,
.content-sub .second {
  h1 {
    text-align: center;
  }

  p {
    width: 95%;
    text-align: justify;
  }
}

.feedback {
  img {
    width: 100%;
  }
}

footer {
  width: 100%;
  color: var(--app-color-text);
}

footer .separator {
  translate: -3rem 0;
}

footer .container {
  font-size: 0.75rem;
  padding: 0.5rem 0;
  max-width: 960px;
  margin: 0 auto;
}

footer a {
  color: var(--app-color-secondary);
  text-decoration: none;
  font-weight: bold;
}

footer a:hover {
  text-decoration: underline;
}

.text-clipboard-backdrop {
  display: none;
  position: relative;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;

  span {
      display: block;
      background-color: #4CAF50;
      color: white;
      text-align: center;
      padding: 1rem;
      border-radius: 0.5rem;
      position: fixed;
      top: 15%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: calc(100% - 48px);
      max-width: 500px;
      box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.3);
      
  }

  &::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.2);
  }
}



@media only screen and (min-width: 403px) {
  main section article.first#center {
    .date-and-time {
      .online {
        gap: 0.75rem;
      }
    }
  }
}


@media only screen and (min-width: 490px) {
  main {
    max-width: 521px;
    box-shadow: 0 0 30px 16px rgba(var(--app-color-secondary-rgb), 0.3);
  }

  main section {
    gap: 4rem;

    article {
      max-width: 440px;
    }
  }

  main .separator,
  footer .separator {
    translate: -2rem 0;
  }

  main section .second {
    background-color: var(--app-color-primary-10);
    border-radius: 0.5rem;

    .btn {
      border-radius: 1.5rem;
    }

    img {
      border-radius: 0.5rem;
    }
  }
}

@media only screen and (min-width: 870px) {
  main {
    max-width: 1024px;
  }

  main section {
    flex-direction: row;
    align-items: center;
  }

  main section.col-reverse,
  main section.reverse {
    flex-direction: row-reverse;
  }

  main section article {
    width: 100%;

    &#faq {
      min-width: 570px;
    }
  }

  main section .first {
    align-items: stretch;
  }

  main section .first#center {
    align-items: flex-start;
    text-align: left;
  }

  main section .first .item {
    width: 100%;
  }

  main section.content.about-us {
    flex-direction: column;
  }

  main .separator,
  footer .separator {
    translate: -3rem 0;
  }
}