@font-face {
  font-family: 'Inter';
  src:
    url("./fonts/Inter_18pt-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: 'Inclusive Sans';
  src:
    url("./fonts/InclusiveSans-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {

  --pop-fill: lab(78% 21 76);
  --pop-text: lab(63% 21 76);
  --accent-fill: lab(70% -31 -34);
  --accent-text: lab(55% -31 -34);

  --area-fill: lab(20% -10 -11);

  --page-fill: lab(96% 3 -3);
  --page-text: lab(20% -3 -3);

  --logo-text: lab(20% -10 -11);
  --logo-glyph: var(--pop-fill);
  --nav-text-static: lab(56% -10 -11);
  --nav-text-on: lab(31% -10 -11);
  --menu-text-static: lab(36% -10 -11);
  --menu-text-on: lab(11% -10 -11);
  --menu-glyph-static: var(--accent-fill);
  --menu-glyph-on: var(--accent-text);

  --feature-text: var(--page-fill);
  --feature-glyph: var(--accent-fill);
  --feature-fill: var(--area-fill);

  --feature-empty-text: lab(12% 3 -3);
  --feature-empty-glyph: lab(60% -31 -34);
  --feature-empty-fill: lab(88% 3 -3);

  --feature-glyph-a: lab(70% -31 -34);
  --feature-glyph-b: lab(88%  21  76);
  --feature-glyph-c: lab(72% -26  89);
  --feature-glyph-d: lab(90% -15 -17);

  --feature-fill-a: lab(20% -10 -11);
  --feature-fill-b: lab(56%  32  48);
  --feature-fill-c: lab(40% -26  89);
  --feature-fill-d: lab(62% -29 -13);

  --footer-text: lab(70% 3 -3);

  --spacing: 2rem;
  --grid-spacing: 0.75rem;

  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  overflow: scroll;

}

:root, body {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {

  display: flex;
  flex-direction: column;
  height: auto;
  font-family: 'Inter', 'Helvetica', sans-serif;
  color: var(--page-text);
  background-color: var(--page-fill);

}

header,
main,
footer {
  display: flex;
  flex-direction: row;
  height: auto;
  margin: 0;
}

header > *,
main,
footer {
  padding: var(--spacing);
}

header {
  justify-content: flex-start;
  align-items: center;
}

main {
  flex: 1;
  gap: 4rem;
}

footer {
  margin-top: calc(var(--spacing) * 4);
  justify-content: center;
  align-items: center;
  font-size: 0.75rem;
  color: var(--footer-text);
}

a,
a:hover,
a:active,
a:visited {
  color: inherit;
  text-decoration: none;
}

p, h1, h2, h3, h4, h5, h6 {
  margin: unset;
}

.glyph {
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: contain;
}

#logo {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
  color: var(--logo-text);
  font-family: 'Inclusive Sans', 'Helvetica', sans-serif;
}

#logo img {
  width: 3.5rem;
  height: 3.5rem;
}

#logo .glyph {
  width: 2rem;
  height: 2rem;
  background-color: var(--logo-glyph);
  mask-image: url(./icons/octet.svg);
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--spacing);
  margin: 0 auto;
  color: var(--nav-text-static);
  font-size: 1rem;
}

nav a {
  white-space: nowrap;
}

nav a:active,
nav a:hover {
  color: var(--nav-text-on);
}

menu {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1rem;
  margin: 0;
  padding: 0;
  color: var(--menu-text-static);
  font-size: 1rem;
}

menu li[data-topic] {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  white-space: nowrap;
}

menu a {
  display: flex;
  flex-direction: row;
  justify-content: inherit;
  align-items: inherit;
  gap: inherit;
}

menu [data-topic] .glyph {
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--menu-glyph-static);
}

menu .text {
  text-transform: lowercase;
}

menu a:active,
menu a:hover {
  color: var(--menu-text-on);
}

menu a:active .glyph,
menu a:hover .glyph {
  background-color: var(--menu-glyph-on);
}

menu li[data-topic="hardware"] .glyph {mask-image: url(./icons/octet-hardware.svg)}
menu li[data-topic="web_apps"] .glyph {mask-image: url(./icons/octet-web_apps.svg)}
menu li[data-topic="teaching"] .glyph {mask-image: url(./icons/octet-teaching.svg)}
menu li[data-topic="visualization"] .glyph {mask-image: url(./icons/octet-visualization.svg)}
menu li[data-topic="python"] .glyph {mask-image: url(./icons/octet-python.svg)}
menu li[data-topic="javascript"] .glyph {mask-image: url(./icons/octet-javascript.svg)}
menu li[data-topic="java"] .glyph {mask-image: url(./icons/octet-java.svg)}
menu li[data-topic="c++"] .glyph {mask-image: url(./icons/octet-c++.svg)}

#grids {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: var(--grid-spacing);
  margin: 0 auto;
}

.grid {
  display: flex;
  flex-direction: column;
  gap: inherit;
}

.group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: inherit;
}

.group.small {
  max-width: calc(var(--grid-spacing) * 17);
}

.group.large .feature {
  width: calc(var(--grid-spacing) * 20);
  height: calc(var(--grid-spacing) * 20);
}

.group.medium .feature {
  width: calc(var(--grid-spacing) * 20);
  height: calc(var(--grid-spacing) * 14);
}

.group.small .feature {
  width: calc(var(--grid-spacing) * 8);
  height: calc(var(--grid-spacing) * 8);
}

.feature {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: var(--feature-empty-fill);
}

.feature h2 {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  gap: calc(var(--grid-spacing) * 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: var(--grid-spacing);
  height: auto;
  font-size: 0.75rem;
  color: var(--feature-empty-text);
}

.feature .glyph {
  width: 1rem;
  height: 1rem;
  background-color: var(--feature-empty-glyph);
}

.feature .text {
  text-transform: lowercase;
}
.feature[data-use] .text {color: var(--feature-text)}

.feature .cover {
  display: block;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  background-position: center center;
  background-size: 125% auto;
  background-repeat: no-repeat;
}

.feature[data-use="phylogenetic_trees"]        .glyph {mask-image: url(./icons/octet-python.svg)}
.feature[data-use="cartography"]               .glyph {mask-image: url(./icons/octet-java.svg)}
.feature[data-use="visualizing_genomic_data"]  .glyph {mask-image: url(./icons/octet-visualization.svg)}
.feature[data-use="data_driven_installations"] .glyph {mask-image: url(./icons/octet-hardware.svg)}

.feature[data-use="phylogenetic_trees"]        .glyph {background-color: var(--feature-glyph-a)}
.feature[data-use="cartography"]               .glyph {background-color: var(--feature-glyph-b)}
.feature[data-use="visualizing_genomic_data"]  .glyph {background-color: var(--feature-glyph-c)}
.feature[data-use="data_driven_installations"] .glyph {background-color: var(--feature-glyph-d)}

.feature[data-use="phylogenetic_trees"]        {background-color: var(--feature-fill-a)}
.feature[data-use="cartography"]               {background-color: var(--feature-fill-b)}
.feature[data-use="visualizing_genomic_data"]  {background-color: var(--feature-fill-c)}
.feature[data-use="data_driven_installations"] {background-color: var(--feature-fill-d)}

.feature[data-use="phylogenetic_trees"]        .cover {background-image: url(./images/feature/phylogeny.png)}
.feature[data-use="cartography"]               .cover {background-image: url(./images/feature/switzerland.png)}
.feature[data-use="visualizing_genomic_data"]  .cover {background-image: url(./images/feature/bonsai.png)}
.feature[data-use="data_driven_installations"] .cover {background-image: url(./images/feature/deprocess.png)}

.feature[data-use="phylogenetic_trees"]        .cover {opacity: 40%}
.feature[data-use="cartography"]               .cover {opacity: 60%}
.feature[data-use="visualizing_genomic_data"]  .cover {opacity: 80%}
.feature[data-use="data_driven_installations"] .cover {opacity: 60%}


@media (max-width: 60rem) {

  .group.small {
    max-width: calc(var(--grid-spacing) * 41);
  }

  .group.small .feature {
    width: calc(var(--grid-spacing) * 9.5);
    height: calc(var(--grid-spacing) * 9.5);
  }

}

@media (max-width: 48rem) {

  #grids,
  .grid,
  .group {
    flex-direction: column;
  }

  #grids {
    flex: 1;
    margin: 0;
  }

  .group.large .feature,
  .group.medium .feature,
  .group.small .feature {
    width: auto;
    max-width: calc(var(--grid-spacing) * 32);
  }

}