@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200&display=swap');

body {
  margin: 0;
  font-family: 'Titillium Web', sans-serif;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  transition: all 1s;
}

#website_header {
  /* position: relative; */
  display: flex;

  /* flex-wrap: wrap; */
  align-items: center;
  padding: 0.5em;
  justify-content: center;
}

#website_logo {
  width: 128px;
  height: 128px;
}

#website_title_tagline {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#tagline {
  margin: 0;
  font-size: small;
  font-family: sans-serif;
}

#website_title {
  margin: 0;
}

#website_menu {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  background-color: #055861;
  color: white;
}

#website_menu li {
  font-weight: bold;
}

#website_menu a {
  color: inherit;
}

#website_menu ul {
  /* Remove bullets */
  list-style-type: none;

  /* Remove list indentation */
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}

#website_footer {
  border-top: 1px solid black;
}

.person_photo {
  /* filter: grayscale(50%) blur(3px); */
  transition: transform 0.5s ease-out;
}

.person_photo:hover {
  transform: skew(38deg) translateX(65px) translateY(28px);
  transition: transform 1s ease-in;
}

@media (max-width: 950px) {
  #website_menu ul {
    flex-direction: column;
  }
}