@media only screen and (orientation: landscape) {
  .bar-top-logo{
      height: clamp(4rem, 5vw, 10.5rem);
  }
}

@media only screen and (orientation: portrait) {
  .bar-top-logo{
      height: clamp(8rem, 10vw, 15rem);
  }
}

.bar-top-container{
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background: rgba(21, 96, 130);
  position: sticky;
  top: 0;
  margin: 0;
  z-index: 2;
  column-gap: 10px;
}

.bar-top-subject-container{
  display: flex;
  flex-direction: row;
  column-gap: 20px;
  align-items: center;
}

.bar-top-action-container{
  display: flex;
  flex-direction: row;
  column-gap: 20px;
  padding-right: 10px;
  align-items: center;
  margin-right: 20px;
}

.bar-top-title{
  color: white;
  font-style: italic;
  text-shadow: 4px 3px 0 #7A7A7A;
}