:root {
  --color-bg-lightest: white;
  --color-bg-lighter: #f5f9fe;
  --color-bg-light: #d9eafd;
  --color-bg-dark: #828c97;
  --color-bg-darker: #41464b;
  --color-bg-darkest: black;

  --color-fg-lightest: white;
  --color-fg-lighter: #fbfcfe;
  --color-fg-light: #e8f2fd;
  --color-fg-dark: #6b747c;
  --color-fg-darker: #2e3135;
  --color-fg-darkest: black;

  --color-header-fg: var(--color-fg-lighter);
  --color-header-bg: var(--color-bg-dark);
  --color-header-border-bottom: var(--color-bg-light);

  --color-hamburger-fg: var(--color-fg-lightest);
  --color-menu-hover-bg: var(--color-bg-dark);  

  --header-height: 6rem;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%; 
}

body {
  display: flex;
  overflow: hidden;
  font-family: helvetica, sans-serif;
  font-weight: 300;
}

.hamburger {
  z-index: 10;
  position: fixed;
  left: 1.2rem;
  top: 1rem;
  background-color: var(--color-bg-darker, darkgray);
  color: var(--color-fg-lightest, white);
  border: none;
  cursor: pointer;
  font-size: 2.5rem;

  width: 3.5rem;
  height: 3.5rem;

  &.rotate90Deg {
    transform: rotate(90deg);
  }

  &:hover {
    background-color: var(--color-menu-hover-bg, gray);
    border-radius: 0.5rem;
  }

}


nav {
  width: 20rem;
  height: 100vh;
  background-color: var(--color-bg-darker, darkgray);
  padding-top: 6rem;
  font-size: 1.6rem;


  &.active {
    width: 6rem;
  }

  ul {

    a {
      display: flex;
      gap: 1rem;
      padding: 1rem 1.8rem;
      color: var(--color-menu-fg, white);
      text-decoration: none;
      white-space: nowrap;
      &:hover {
        background-color: var(--color-menu-hover-bg, gray);
      }

    }
  }
}

main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

header {
  height: var(--header-height, 6rem);
  display: flex;
  align-items: center;
  padding: 2rem;
  background-color: var(--color-header-bg, white);

  a {
    color: var(--color-header-fg, white);
    text-decoration: none;
    padding: 1rem;
    border-radius: 0.5rem;

    &:hover {
      background-color: var(--color-bg-darker, black);
    }
  }

}

article {
  padding: 0;
  width: 100%;
  height: calc(100vh - var(--header-height, 6rem));

  overflow: hidden;

  iframe {
    width: 100%;
    height: 100%;
    border: none;
  }
}

.email {
  color: green;
  margin: 0 0.5rem;
  font-family: arial;
}


@media (max-width: 600px) {
  .hamburger {
    background-color: var(--color-header-bg, white);

    &.rotate90Deg {
      background-color: var(--color-bg-darker, darkgray);
    }
  }

  header {
    padding-left: 5.5rem;
  }

  nav {
    position: fixed;
    left: -25rem;
    top: 0;

    &.active {
      left: 0;
      width: 20rem;
    }
  }

}