@font-face {
  font-family: 'starfont';
  src: url('../fonts/star.woff2') format('woff2'),
      url('../fonts/star.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'typewriterfont';
  src: url('../fonts/typewriter2.woff2') format('woff2'),
      url('../fonts/typewriter2.woff') format('woff');
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --color-background: light-dark(#fbfaf7,#16191a);
  --text-color: light-dark(#16191a, #fbfaf7);
  --starbg-color: light-dark(#0c8c4e, #5e3d65);
  --lbfilm-border: light-dark(#b8b8b8, #2c343f);
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--color-background);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  background: var(--color-background);
  position: sticky;
  top: 0;
  z-index: 1000;
  padding-bottom: 1em;
}

main > section:nth-of-type(1) { z-index: 999; }
main > section:nth-of-type(2) { z-index: 2; }
main > section:nth-of-type(3) { z-index: 3; }
main > section:nth-of-type(4) { z-index: 4; }

main {
  min-height: 100vh;
}

main > section {
  position: absolute;
  inset: 4.5rem 0 0 0;
  overflow: auto;
  display: none;
  background: var(--color-background);
}

main > section.active {
  display: block;
}

.tabs {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  gap: 1rem;
  padding: 1rem 1rem 0;
}

.tab.active {
  background-color: var(--starbg-color);
}

h1, h2, p {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

h1, h2 {
  font-family: "starfont";
  font-size: 4em;
}

h1 {
  margin: 0 .8em 0 0;
  padding: 0;
}

p {
  font-family: "typewriterfont";
  font-size: 1.5em;
  margin: 0;
}

/* hulp animatie vasilis */
.gallery {
  margin-top: 1em;
  display: flex;
  animation-name: --gallerymove;
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}

.gallery img {
  margin: 0.5em;
  display: block;
  width: auto;
  border-radius: 5px;
}

/* hulp animatie Vasilis */
@keyframes --gallerymove {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-600px * 10)); }
}

.headGame {
  margin-top: 3em;
  display: grid;
}

.scramble {
  width: 20em;
  cursor: grab;
  position: static;  
}
.dropHead {
  position: relative;
  margin-top: 1rem;
  height: 10vh;
}

.placedPart {
  position: absolute;
  transform: none;
  margin-right: 0;
  transform: translate(-50%, -50%);
}

.placedPart img {
  display: block;
}

#films {
  margin-top: 3em;
}
.films li {
  display: grid;
}

#letterboxd {
  margin-left: 3em;
  margin-right: 3em;
}

.lb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}

.lb-card {
  text-decoration: none;
  color: inherit;
  display: grid;
  gap: 1em;
}

.lb-poster {
  aspect-ratio: 2 / 3;
  border-radius: 2px;
  overflow: hidden;
  border: var(--lbfilm-border) solid .1px;
}

.lb-poster img {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 200ms ease;
}

.lb-card:hover .lb-poster img, .lb-card:hover  {
  transform: scale(1.05);
}

.lb-title {
  font-size: .9em;
  font-family: "typewriterfont";
  line-height: 1;
}

#studentFilmsList{
  padding: 0;
}
.studentname {
  margin-top: 1em;
  font-size: 3em;

}

/* van chatgpt om sterretje in het midden te krijgen */
#refresh {
  display: block;
  margin: 2rem auto 2em auto;

}
/* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip-path */
#refresh, .tab {
  width: 3.2rem;
  height: 3.2rem;
  background: var(--text-color);
  border: none;
  cursor: pointer;
  position: relative;
  clip-path: polygon(
    59% 0%, 
    63% 28%, 
    98% 35%, 
    72% 57%, 
    83% 93%, 
    50% 72%, 
    21% 91%, 
    28% 57%, 
    2% 35%, 
    37% 32%
  );
  transition: transform .2s ease;
}

#refresh:hover, .tab:hover {
  transform: rotate(20deg) scale(1.1);
}


#refresh:active, .tab:active {
  transform: scale(.9);
}



@media (max-width: 30em) {
  .gallery img {
    margin: 0.9em;
    display: block;
    width: auto;
    outline: 1px solid;
    outline-color: var(--img-border);
    outline-offset: 5px;
    border-radius: 2px;
  }

  .gallery img {
    width: 20em;
    outline: .8px solid;
  }

  @keyframes --gallerymove {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-300px * 10)); }
  }

  header {
    flex-direction: column;
  }

  h1, h2 {
    align-items: flex-start;
    font-size: 3em;
  }

  p {
    font-size: 1em;
  }

  h3 {
    font-size: .5em;
  }

  #scramble {
    width: 40em;
  }
}