header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25%;

  position: relative;

  background-image: url('../../img/header-background.webp');
  background-attachment: scroll;
  background-size: cover;
  background-position: center;
  height: 540px;

  &::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #1e63e2cc 0%, #0a267bcc 100%);
    z-index: 0;
  }

  a {
    z-index: 1;
    margin: 0;

    h1 {
      width: 100%;
      text-align: start;

      .logo {
        width: 100%;
        max-width: 500px;
        padding-inline: 15px;
      }
    }
  }

  .botao-meus-cursos {
    position: relative;
    z-index: 1;

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: white;
    border-radius: 60px;
    border: 2px solid white;

    color: #222061;
    font-weight: 900;
    font-size: 2.25rem;
    font-style: italic;

    width: 400px;
    height: 100px;

    overflow: hidden;
    text-decoration: none;

    transition: calc(2 * var(--delay-default));

    &::before {
      z-index: -1;
      content: '';
      position: absolute;
      width: 0;
      height: 0;

      clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
      transform: rotate(45deg);
      background-color: #d33931;
      transition: var(--delay-default);

    }

    &:hover::before,
    &:focus::before {
      width: 400px;
      height: 400px;
      transform: rotate(135deg);
    }

    &:hover,
    &:focus {
      color: rgb(255, 255, 255);
      /* text-shadow: 0 0 10px rgb(0, 0, 0); */
    }
  }
}


@media (max-width: 1400px) {
  header {
    justify-content: space-evenly;
    gap: 0;
    height: 320px;

    .botao-meus-cursos {
      width: 200px;
      height: 60px;
      font-size: 1.125rem;
    }
  }
}

@media (max-width: 768px) {
  header {
    flex-direction: column;
    gap: 50px;
    height: 400px;

    .botao-meus-cursos {
      width: 250px;
      height: 80px;
      font-size: 1.5rem;
    }
  }
}