* {
}

html {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  font-family: sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  align-items: space-between;
  width: 100%;
  max-width: 1200px;
}

header {
  background: white;
  padding: 30px;

  & nav {
    display: flex;
    justify-content: center;

    & ul {
      background: #e8e5e480;
      width: fit-content;
      display: flex;
      gap: 5px;
      padding: 4px;
      border-radius: 30px;

      & li {
        list-style: none;
        border-radius: inherit;

        a {
          display: block;
          padding: 10px 40px;
          border-radius: inherit;
          color: black;

          &:hover {
            background: #7f7f7f;
            color: white;
          }
          &:active {
            background: rgb(73, 72, 72);
            color: white;
            cursor: grabbing;
          }
        }
      }
    }
  }
}

main {
  flex-grow: 1;
}

footer {
  display: flex;
  justify-content: space-between;
  padding: 20px; /* @Abood: i added this to get more space between text and bottom */

  & #copyright-info {
    display: inline-flex;
    gap: 0.5vw;
    align-items: center;
  }

  & #company-logo {
    align-self: stretch;
    text-align: center;
    height: 28px;
  }

  & nav {
    & ul {
      display: flex;
      gap: 1vw;
      flex-grow: 1;

      & li {
        list-style: none;

        & a {
          color: inherit;
        }
      }
    }
  }
}

/* general selectors */
a {
  text-decoration: none;
}

/* general classes */
.container {
  width: 100%;
}