@font-face {
  font-family: "baunk";
  src: url("../fonts/baunk-subset.woff2") format("woff2"),
    url("../fonts/baunk-subset.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
}

:root {
  /* color */
  --color-dark: #000;
  --color-light: #fff;
  --color-light-glass: #1f1f1fa8;
  --color-dark-glass: #aaaaaaa8;
  /* font family */
  --font-primary: "Literata", sans-serif;
  /* font sizing */
  --font-base: 20px;
  --font-xs: 0.75rem;
  --font-sm: 1rem;
  --font-med: 1.5rem;
  --font-lg: 2rem;
  /* border */
  --glass-border: 1px solid #606060;
  --border-radius: 10px;
  /* grid */
  --grid-template-columns: repeat(3, 1fr);
  --grid-template-rows: repeat(12, 1fr);
  --grid-gap: 12px;
  /* padding */
  --body-padding: 30px 20px;
  /* blur */
  --blur-small: blur(2px);
}

::selection {
  background-color: var(--color-light);
  color: var(--color-dark);
}

html {
  height: 100%;
  width: 100%;
  font-size: var(--font-base);
}

body {
  height: 100%;
  width: 100%;
  font-family: var(--font-primary);
  background-color: var(--color-dark);
  padding: var(--body-padding);
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
button {
  font-family: var(--font-primary);
  color: var(--color-light);
  font-size: var(--font-xs);
  width: fit-content;
}

p,
a {
  line-height: 120%;
  font-weight: 400;
  letter-spacing: 0.1px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius);
}

main {
  display: grid;
  grid-template-columns: var(--grid-template-columns);
  grid-template-rows: var(--grid-template-rows);
  grid-gap: var(--grid-gap);
  width: 100%;
  height: 100%;
}

main section {
  transition: all 0.5s ease-in-out;
  opacity: 0;
  filter: var(--blur-small);
}

/* menu */
nav {
  position: fixed;
  display: grid;
  grid-template-columns: var(--grid-template-columns);
  grid-template-rows: var(--grid-template-rows);
  grid-gap: var(--grid-gap);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: var(--body-padding);
  box-sizing: border-box;
  pointer-events: none;
  z-index: 1000;
}

nav button,
nav a {
  width: 100%;
  height: 100%;
  background-color: var(--color-light-glass);
  border: var(--glass-border);
  border-radius: var(--border-radius);
}

nav button#menuToggle {
  grid-column: 1 / span 1;
  grid-row: 12 / span 1;
  position: relative;
  overflow: hidden;
  pointer-events: all !important;
}

nav button#menuToggle p {
  transition: filter 0.5s ease-in-out;
}

nav.active button#menuToggle p {
  filter: var(--blur-small);
}

nav button p {
  bottom: calc(var(--grid-gap) + 4px);
  left: calc(var(--grid-gap) + 4px);
  position: absolute;
}

nav div {
  width: 100%;
  height: 0%;
  position: relative;
  transition: all 0.7s cubic-bezier(0.6, 0, 0.3, 1);
  overflow: hidden;
  margin-top: auto;
  filter: var(--blur-small);
  pointer-events: none;
}

nav div p.external {
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--color-dark-glass);
}

nav #home {
  grid-row: 2 / span 4;
}

nav #works {
  grid-row: 2 / span 4;
  grid-column: 2 / span 2;
}

nav #about {
  grid-row: 6 / span 2;
  grid-column: 1 / span 3;
}

nav #reel {
  grid-row: 8 / span 4;
  grid-column: 1 / span 2;
}

nav #downloads {
  grid-row: 8 / span 4;
  grid-column: 3 / span 1;
}

nav.active {
  pointer-events: all;
}

nav.active + main section {
  filter: blur(8px) brightness(0.5) !important;
  pointer-events: none !important;
}

nav div.active {
  height: 100%;
  filter: blur(0px);
}

nav div.active button {
  pointer-events: all;
}

nav div button.here {
  cursor: default !important;
}

nav div button.here p {
  opacity: 0;
}

/* transitions */
main section.transitioned {
  opacity: 1 !important;
  filter: blur(0px) !important;
}

/* tablet breakpoint */
@media (min-width: 650px) {
  :root {
    /* grid */
    --grid-template-columns: repeat(6, 1fr);
    --grid-template-rows: auto repeat(12, 1fr);
  }

  nav button#menuToggle {
    grid-column: 1 / 3;
    grid-row: 13 / span 1;
  }

  nav #home {
    grid-row: 2 / span 4;
    grid-column: 1 / span 2;
  }

  nav #works {
    grid-row: 2 / span 4;
    grid-column: 3 / span 4;
  }

  nav #about {
    grid-row: 6 / span 2;
    grid-column: 1 / span 4;
  }

  nav #reel {
    grid-row: 8 / span 4;
    grid-column: 1 / span 4;
  }

  nav #downloads {
    grid-row: 6 / span 6;
    grid-column: 5 / span 2;
  }
}

/* desktop breakpoint */
@media (min-width: 1024px) {
  :root {
    /* grid */
    --grid-template-columns: repeat(8, 1fr);
    --grid-template-rows: auto repeat(8, 1fr);
    --grid-gap: 20px;

    /* padding */
    --body-padding: 50px 50px;
  }

  nav button#menuToggle {
    grid-column: 1 / span 1;
    grid-row: 9 / span 1;
  }

  nav #home {
    grid-row: 1 / span 6;
    grid-column: 2 / span 1;
  }

  nav #works {
    grid-row: 1 / span 6;
    grid-column: 3 / span 4;
  }

  nav #about {
    grid-row: 7 / span 3;
    grid-column: 2 / span 5;
  }

  nav #reel {
    grid-row: 1 / span 5;
    grid-column: 7 / span 2;
  }

  nav #downloads {
    grid-row: 6 / span 4;
    grid-column: 7 / span 2;
  }
}

@media (hover: hover) {
  button {
    cursor: pointer;
  }

  button p,
  a.button p,
  a {
    transition: filter 0.25s ease-in-out !important;
  }

  button:hover p,
  a.button:hover p,
  a:not(.button):hover {
    filter: var(--blur-small);
  }
}