---
---

@import "base";

body {
  height: 100vh;
  background-color: #222222;
  color: white;
}

.page-header {
  padding-top: 3em;
  height: 35%;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%),
    url("/assets/happy-people.jpg");
  background-position: 50% 20%; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  h1 {
    margin: 0;
    font-size: 2rem;
    font-weight: normal;
    span {
      color: #ee2020;
    }
  }

  nav {
    margin-top: 1.5em;
    ul {
      display: flex;
      li a {
        padding: 0.5em;
        color: white;
        text-decoration: none;
        &:hover {
          color: #ff2020;
        }
      }
    }
  }
}

@media only screen and (min-width: 1024px) {
  .page-header {
    height: 50%;
    h1 {
      font-size: 3rem;
    }
  }
}
