.banner {
  width: 100%;
  overflow: hidden;
  height: 100vh;
}

.banner > video {
  width: 100%;
}

.navbar > a {
  font-size: 30px;
  font-weight: bolder;
  margin-left: -15px;
}

.page-content > .hero > .text-content > .text-column {
  background-color: #b4b4b47a;
  /* backdrop-filter: blur(10px); */
  padding: 2rem;
  margin-top: 25rem;
  border-radius: 10px;
}

.page-content > .hero > .img-unifa > img {
  width: 554px;
  display: none;
  height: 553px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 0px solid #000;
  opacity: 0.8;
  background: url(<path-to-image>), lightgray 50% / cover no-repeat;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25),
    0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

/* media query */
/* extra large */
@media (max-width: 1200px) {
  .home .heart {
    transform: translateX(-50%) translateY(45px);
  }
  .page-content > .hero > .img-unifa > img {
    margin-top: 20px;
    text-align: center;
    width: 380px;
    height: 380px;
  }
}

/* laptop */
@media (max-width: 992px) {
  html {
    font-size: 75%;
  }
  .page-content > .hero > .img-unifa > img {
    margin-top: 20px;
    text-align: center;
    width: 300px;
    height: 300px;
  }
  .page-content > .hero > .text-content > .text-column {
    text-align: center;
  }

  .navbar-brand {
    font-size: 20px !important;
  }
}

/* tablet */
@media (max-width: 768px) {
  .page-content > .hero > .img-unifa > img {
    margin-top: 20px;
    text-align: center;
    width: 280px;
    height: 280px;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline;
    border: 0px solid #000;
    opacity: 0.8;
    background: url(<path-to-image>), lightgray 50% / cover no-repeat;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25),
      0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  }
  .page-content > .hero > .text-content > .text-column {
    text-align: center;
  }

  .navbar-brand {
    font-size: 20px !important;
  }
}

/* mobile phone */
@media (max-width: 576px) {
  html {
    font-size: 60%;
  }
  .page-content > .hero > .text-content > .text-column {
    margin-top: 5rem;
  }
  .page-content > .hero > .img-unifa > img {
    margin-top: 20px;
    text-align: center;
    width: 240px;
    height: 240px;
  }
  #img-banner {
    width: 100% !important;
    display: inline;
    margin-top: 20px;
    text-align: center;
    width: 200px;
    height: 200px;
  }

  .banner > video {
    display: none !important;
  }
}