@media screen {
  .print-header{
  visibility: hidden;
  display: none;
  }
}


header {
  overflow: hidden;
  /* background-color: rgba(4, 87, 90, 1); */
  background: radial-gradient(1000px 500px at 10% 0%,
              rgba(4, 87, 90, 1), transparent 30%),
              radial-gradient(900px 400px at 90% 10%,
              rgb(34, 116, 118), transparent 85%),
              rgb(57, 102, 103);
  padding-top: 10px;
  padding-bottom: 15px;
  font-family: 'Epilogue', sans-serif;
  font-weight: 400;
  position: relative;
  z-index: 5;
  display: flex;
}

.header-logo{
  margin-left: 10%;
  flex-basis: 20%;
}

.header-right {
  float: right;
  margin-left: 10%;
  margin-top: 16px;
  z-index: 5;
  flex-basis: 60%;
}

header span a {
  float: left;
  color: white;
  padding: 12px 20px;
  text-decoration: none;
  font-size: 17px;
  border-radius: 6px;          /* subtle polish */
  display: inline-block;       /* ensures transform works nicely */
  transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
  will-change: transform;
}

header a.header-logo > img{
  max-width: 125px;
  margin-left: 17%;
  position: relative;
  transition: transform 180ms ease, filter 180ms ease;
}

.header-right span a:hover,
.header-right span a:focus-visible {
  background-color: rgba(15, 96, 99, 0.55);   /* softer than solid */
  transform: translateY(-1px);                  /* slight lift */
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);      /* optional, subtle */
  outline: none;
}

/* Pressed state */
.header-right span a:active {
  transform: translateY(0px);
  box-shadow: none;
}

/* Active/current page state */
.header-right span a.active {
  background-color: rgba(19, 96, 99, 0.285);
  font-weight: 600;
}

.header-right span a:hover::after,
.header-right span a:focus-visible::after {
  transform: scaleX(1);
}

header a.header-logo > img:hover,
header a.header-logo > img:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.05);
  outline: none;
  background-color: rgba(20, 133, 137, 0.55);;
}
header a.active {
  font-weight: bold;
}


@media screen and (max-width: 900px) {
  header a, .header-logo {
    float: none;
    flex-direction: column;
  }
  
  .header-right {
    float: none;
    margin-top: 5%;
    flex-direction: column;
  }

  header a.header-logo > img{
    max-width: 150px;
}

}