@import url("var.css");

header {
  position: relative;
}

.logo {
  height: 12dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-alegra {
  position: absolute;
  right: 5%;
  top: 50%;
}

.logo img {
  width: 10vw;
}

.logo-alegra img {
  width: 6vw;
}

@media (min-width: 1200px) and (max-width: 3000px) {
  .logo img {
    width: 15vw;
  }
  .logo-alegra img {
    width: 6vw;
  }
}



@media (min-width: 1025px) and (max-width: 1200px) {
  .logo img {
    width: 20vw;
  }
  .logo-alegra img {
    width: 10vw;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .logo img {
    width: 25vw;
  }
  .logo-alegra img {
    width: 10vw;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .logo img {
    width: 30vw;
  }
  .logo-alegra img {
    width: 15vw;
  }
}

@media (max-width: 480px) {
  .logo img {
    width: 40vw;
  }
  .logo-alegra {
    right: 5%;
    top: 45%;
  }

  .logo-alegra img {
    width: 15vw;
  }
}