@import url("https://fonts.googleapis.com/css2?family=Jaro:opsz@6..72&display=swap");

:root {
  --font: "Jaro", sans-serif;

  --body-margin: 10vw 10vw 5vh 10vw;
  --body-bg: #f8f7ff;

  --header-bg: rgb(239, 240, 241);
  --header-width: 60vw;
  --header-padding: 0.4vh 0;
  --header-font-size: 2.5vh;
  --header-border-radius: 10vw;
  --header-shadow: 0 0.5vw 1vh rgba(0, 0, 0, 0.1);

  --blok-shadow: 0 1vh 1vw rgba(0, 0, 0, 0.1);
  --blok-font-size: 2vh;

  --gold-bg: #d4af37;
  --gold-border: #be9e31;
  --silver-bg: #c0c0c0;
  --silver-border: #a3a3a3;
  --bronze-bg: #cd7f32;
  --bronze-border: #b8722d;

  --profiel-width: 17vw;
  --profiel-height: 18vh;
  --profiel-margin-bottom: 0.3vh;

  --home-bg: #4caf50;
  --home-border: #4caf50;
  --home-padding: 1vh 2vw;
  --home-border-radius: 2vw;
  --home-opacity: 0.5;

  --iframe-margin: 7vh 0 10vh 0;
  --iframe-height: 50vh;
  --iframe-border: 0.8vw solid #727272;
  --iframe-border-radius: 1vw;

  --quiz-gap: 1.5vw;
  --quiz-margin: 2vh 0;
  --quiz-padding: 1vh 2vw;
  --quiz-border-radius: 1vw;
  --quiz-bg: #4caf50;
  --quiz-bg-hover: #459f48;
  --quiz-font-size: 1.5vh;
  --quiz-color: white;

  --lijst-width: 60vw;
  --lijst-height: 50vh;
  --lijst-padding: 2vh 2vw;
  --lijst-margin: 4vh auto;
  --lijst-bg: white;
  --lijst-border-radius: 1.5vw;
  --lijst-shadow: 0 1vh 1vw 0.2vh rgba(0, 0, 0, 0.1);

  --scrollbar-width: 1vw;
  --scrollbar-track-bg: #f1f1f1;
  --scrollbar-thumb-bg: linear-gradient(180deg, #4caf50, #beffb8);
  --scrollbar-radius: 1vw;

  --lijst-item-gap: 1.5vw;
  --lijst-item-padding: 1.5vh;
  --lijst-item-margin-bottom: 1.5vh;
  --lijst-item-bg: #f9fbff;
  --lijst-item-hover-bg: #eef4ff;
  --lijst-item-border-radius: 1.2vw;
  --lijst-item-shadow: 0 0.5vh 1.5vw rgba(0, 0, 0, 0.05);
  --lijst-item-hover-shadow: 0 0.8vh 2vw rgba(0, 0, 0, 0.1);

  --lijst-item-img-width: 5vw;
  --lijst-item-img-radius: 1vw;

  --speler-score-color: #e6bd39;

  --font-small: 1.5vh;
}

* {
  font-family: var(--font);
}

body {
  margin: var(--body-margin);
  display: flex;
  flex-direction: column;
}

.body {
  background-color: var(--body-bg);
}

header {
  background-color: var(--header-bg);
  width: var(--header-width);
  margin: 5vh auto;
  padding: var(--header-padding);
  text-align: center;
  font-size: var(--header-font-size);
  font-weight: bold;
  border-radius: var(--header-border-radius);
  box-shadow: var(--header-shadow);
}

.top {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 3vw;
  height: 60vh;
}

.podium {
  position: relative;
  width: 22vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blok {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: var(--blok-font-size);
  box-shadow: var(--blok-shadow);
}

.een .blok {
  height: 40vh;
  background-color: var(--gold-bg);
  border: solid 1vw var(--gold-border);
}

.twee .blok {
  height: 35vh;
  background-color: var(--silver-bg);
  border: solid 1vw var(--silver-border);
}

.drie .blok {
  height: 30vh;
  background-color: var(--bronze-bg);
  border: solid 1vw var(--bronze-border);
}

.profiel {
  position: absolute;
  bottom: 100%;
  margin-bottom: var(--profiel-margin-bottom);
  width: var(--profiel-width);
  height: var(--profiel-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.home {
  position: fixed;
  right: 3vw;
  bottom: 3vh;

  padding: var(--home-padding);
  background: linear-gradient(145deg, #4caf50, #6fdc6f);

  border: none;
  border-radius: var(--home-border-radius);

  color: white;
  font-size: var(--font-small);

  cursor: pointer;

  box-shadow: 0 0.8vh 2vw rgba(0, 0, 0, 0.15);
  transition: all 0.25s ease;
}

.home:hover {
  transform: translateY(-0.4vh) scale(1.03);
  box-shadow: 0 1.2vh 2.5vw rgba(0, 0, 0, 0.2);
}

.home:active {
  transform: translateY(0);
  box-shadow: 0 0.5vh 1vw rgba(0, 0, 0, 0.2);
}

iframe {
  margin: var(--iframe-margin);
  height: var(--iframe-height);
  border: var(--iframe-border);
  border-radius: var(--iframe-border-radius);
}

p {
  overflow: hidden;
}

#eerste,
#tweede,
#derde {
  font-size: var(--font-small);
}

.quiz-select {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--quiz-gap);
  margin: var(--quiz-margin);
}

.quiz-select select {
  padding: var(--quiz-padding);
  border-radius: var(--quiz-border-radius);
  border: none;
  background: var(--quiz-bg);
  color: var(--quiz-color);
  font-size: var(--quiz-font-size);
  cursor: pointer;
}

.quiz-select select:hover {
  background: var(--quiz-bg-hover);
}

#lijst {
  width: var(--lijst-width);
  height: var(--lijst-height);
  overflow-y: auto;
  border-radius: var(--lijst-border-radius);
  padding: var(--lijst-padding);
  margin: var(--lijst-margin);
  background: var(--lijst-bg);
  box-shadow: var(--lijst-shadow);
  scroll-behavior: smooth;
}

#lijst::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

#lijst::-webkit-scrollbar-track {
  background: var(--scrollbar-track-bg);
  border-radius: var(--scrollbar-radius);
}

#lijst::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-bg);
  border-radius: var(--scrollbar-radius);
}

.lijst-item {
  display: flex;
  align-items: center;
  gap: var(--lijst-item-gap);
  padding: var(--lijst-item-padding);
  margin-bottom: var(--lijst-item-margin-bottom);
  border-radius: var(--lijst-item-border-radius);
  background: var(--lijst-item-bg);
  transition: all 0.3s ease;
  box-shadow: var(--lijst-item-shadow);
}

.lijst-item:hover {
  transform: translateY(-0.3vh);
  background: var(--lijst-item-hover-bg);
  box-shadow: var(--lijst-item-hover-shadow);
}

.lijst-item img {
  width: var(--lijst-item-img-width);
  border-radius: var(--lijst-item-img-radius);
  object-fit: cover;
}

.lijst-item span {
  font-size: var(--font-small);
  font-weight: 500;
}

.speler-score {
  margin-left: auto;
  text-align: right;
  font-weight: bold;
  color: var(--speler-score-color);
}

#eerstei,
#tweedei,
#derdei {
  width: 8vw;
}

@media (max-width: 480px) {
  header {
    padding: 0.2vh 0;
    font-size: 1rem;
  }

  #eerstei,
  #tweedei,
  #derdei {
    width: 16vw;
  }
}