@font-face {
  font-family: "Isenheim";
  src: url("/fonts/Isenheim_Regulier.otf");
}

@font-face {
  font-family: "Isenheim Fin";
  src: url("/fonts/Isenheim_Fin.otf");
}

h1, h2 {
  font-weight: 900;
  text-transform: uppercase;
}

h1 {
  font-size: 4rem;
  line-height: 1.1;
}

h2 {
  font-size: 2rem;
  line-height: 1;
  font-family: "Rubik Glitch", serif;
  font-family: "Rubik Iso", serif;
  font-family: "Rubik Broken Fax", serif;
  font-family: "Rubik Lines", serif;
  font-weight: 100;
}

body {
  margin: 0;
  padding: 0;
  /*padding-bottom: 6em;*/

  font-family: "Isenheim", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  /*background:*/
  /*    radial-gradient(ellipse at top in oklab, oklab(.2 0 0 / 1), transparent),*/
  /*    radial-gradient(ellipse at center in oklab, oklab(.5 0 0 / 1), transparent),*/
  /*    radial-gradient(ellipse at bottom in oklab, oklab(0 0 0 / 1), transparent);*/
  background:
      /*radial-gradient(ellipse at top in oklab, oklab(.2 0 0 / 1), oklab(.2 0 0 / 1)),*/
      /*radial-gradient(ellipse at center in oklab, oklab(.5 0 0 / 1), black),*/
      radial-gradient(ellipse at center in oklab, oklab(.5 0 0 / 1), oklab(0 0 0 / 1));
  /*background:*/
  /*    radial-gradient(ellipse at top, oklab(.2 0 0 / 1), transparent),*/
  /*    radial-gradient(ellipse at center, oklab(.5 0 0 / 1), transparent),*/
  /*    radial-gradient(ellipse at bottom, oklab(0 0 0 / 1), transparent);*/

}

main {
  /*width: 105ch;*/
  /*background-color: lightcoral;*/
  /*padding: 4em 6em;*/
  display: flex;
  flex-direction: column;

  max-width: 100%;
  overflow: hidden;

  /*gap: 3rem;*/
  background: radial-gradient(ellipse at center in oklab, oklab(.5 0 0 / 1) 30%, oklab(0 0 0 / 1));
}

header {
  padding-block: 2.4rem 8em;
  /*padding-bottom: 8em;*/
  /*padding-inline: 3.5rem;*/
  padding-inline: 6rem;
  display: flex;
  /*justify-content: space-between;*/
  justify-content: center;
  height: 80px;

  overflow: hidden;
  max-width: 100%;

  color: white;
  /*background: oklab(0 0.1 0.1 / 0.1);*/
  /*background: linear-gradient(to bottom in oklab, oklab(0 0.1 0.1 / 0.1), oklab(0 0 0 / 0));*/
  /*background: linear-gradient(to bottom in oklab, oklab(0.5 0.3 0 / 1), oklab(0.5 0.8 0.5 / 0.5), oklab(0 0 0 / 0));*/
  /*background: linear-gradient(to bottom in oklab, oklab(0 0 0), oklab(0.53 0.05 0.02 / 0.25), oklab(0 0 0 / 0));*/
  /*background: linear-gradient(to bottom in oklab, oklab(0 0 0), oklab(0.6 0 0 / 0.25) 90%, oklab(0 0 0 / 0));*/
  /*background: linear-gradient(to bottom in oklab, oklab(0 0 0), oklab(0.6 0 0 / 0.25) 80%, oklab(0 0 0 / 0.5));*/
  /*background: linear-gradient(to bottom in oklab, oklab(0 0 0), oklab(0.2 0 0 / 0.3) 80%, oklab(0 0 0 / 0.5));*/
  background: linear-gradient(to bottom in oklab, oklab(0 0 0), oklab(0.2 0 0 / 0.3) 80%, oklab(0 0 0 / 0.5) 90%, oklab(0 0 0 / 0.8));
  backdrop-filter: blur(10px);

  hgroup {
    display: flex;
    /*flex-direction: column;*/
    justify-content: space-between;
    margin-top: 4em;
    align-items: center;
    flex-grow: 1;
    height: 75px;
  }

  h1, h2 {
    margin: 0;
  }

  h1 {
    color: oklab(1 0 0 / .9);
    /*text-shadow: red 7px 6px 0px;*/
    /*text-shadow: red 7px 6px 0px, blue -2px -4px 1px;*/
    /*text-shadow: red 2px 2px 0px, yellow -1px -2px 0px;*/
    /*text-shadow:*/
    /*    red 2px 2px 0px,*/
    /*    yellow -2px -2px 0px,*/
    /*    green 2px -2px 0px,*/
    /*    blue -2px 2px 0px;*/
    /*text-shadow: #ff0000bf 2px 2px 0px, #ffff00a6 -2px -2px 0px, #00ff00c2 2px -2px 0px, #0000ffab -2px 2px 0px;*/
    /*text-shadow: oklab(0.5 0 0 / 1) 1px 1px 5px, oklab(0.4 0 0 / 1) -1px -1px 5px;*/
    /*color: oklab(1 0 0 / 1);*/
    /*text-shadow: #ff0000 4px 4px 0, #ffff00 -2px -2px 0;*/
  }

  h2 {
    color: oklab(1 0 0 / .9);

  }

  img {
    max-width: 200px;;
    border-radius: 0.1em;
    filter: contrast(1.1) opacity(.8);
    display: none;
  }
}

ul {
  /*background: radial-gradient(ellipse at center in oklab, oklab(.5 0 0 / 1) 30%, oklab(0 0 0 / 1));*/
/*  background:*/
/*      linear-gradient(to bottom, red, blue) 90%*/
/*      ,*/
/*      radial-gradient(ellipse at center in oklab, oklab(.5 0 0 / 1) 30%, oklab(0 0 0 / 1))*/
/*;*/
  background:
      linear-gradient(to bottom in oklab, oklab(0 0 0 / .5) 90%, oklab(0 0 0 / 1)),
      radial-gradient(ellipse at center in oklab, oklab(.5 0 0 / 1) 30%, oklab(0 0 0 / 1));

  list-style: none;
  margin: 0;
  /*padding: 0;*/
  /*padding-bottom: 6em;*/
  padding: 0 6em 16em 6em;
  /*margin-inline: 6em;*/

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55em;

  li {
    margin: 0;
    padding: 0;
    line-height: 0;
    overflow: hidden;
  }

  img {
    width: 200px;
    max-height: 200px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 0.1em;
    margin: 0;
    padding: 0;

    &[data-real="false"] {
      /*opacity: .1;*/
      filter: invert();
      scale: -1 1;
    }

    &[data-real="lol"] {
      visibility: hidden;
    }

    &[data-real="wut"] {
      /*transform: rotate(125grad);*/
      /*filter: opacity(0.5);*/
      /*scale: 1.5;*/

      transform: rotate(125grad) translate(10%, -10%);
      filter: brightness(0.5) contrast(10);
      scale: 2;
    }

    &[data-real="saywat"] {
      /*transform: rotate(125grad) translate(10%, -10%);*/
      /*filter: brightness(2.5) contrast(3.9) invert(0.7);*/
      /*scale: 5;*/

      transform: rotate(125grad) translate(10%, -10%);
      filter: brightness(1.5) contrast(2) invert(1);
      scale: 5;
      opacity: 0.5;
    }
  }
}

@media (width <= 980px) {
  body, main {
    /*background: red !important;*/
  }

  header {
    padding-inline: 0em;
  }

  ul {
    padding-inline: 4em;
  }
}

/*@media (width < 1000px) {*/
/*  !*header {*!*/
/*  !*  padding-inline: 0;*!*/
/*  !*  overflow: hidden;*!*/
/*  !*}*!*/
/*  header, main, ul, hgroup {*/
/*    overflow: hidden;*/
/*    padding-inline: 0;*/
/*    margin-inline: 0;*/
/*  }*/

/*  hgroup {*/
/*    max-width: 100vh;*/
/*  }*/
/*}*/