:root {
  color-scheme: normal;
  --color-background: #302d27;
  --color-root-text: white;
  --color-gold: gold;
  --color-silver: silver;
  --color-bronze: #cd7f32;
  --color-myteam: purple;
  scrollbar-gutter: stable;
}

body {
  background-color: color-mix(in srgb, var(--color-background), black 33%);
  color: var(--color-root-text);
}

.iceberg {
  font-family: "Iceberg", sans-serif;
  font-weight: 400;
  font-style: normal;
}

header {
  background-color: var(--color-background);
}

header picture,
header picture img {
  width: 100%;
}

header picture img {
  height: auto;
}

header .eventends {
  margin-inline: auto;
  font-size: 40px;
}

header .eventends span {
  margin-inline: 8px;
}

header .eventends span::after {
  font-size: 0.5em;
  text-transform: uppercase;
}

header .eventends::before {
  display: block;
  text-align: center;
  font-size: small;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

header #intro {
  margin-block: 32px 64px;
  padding: 32px clamp(32px, 3vw, 64px) 64px;
  border-radius: 8px;

  background-image: url('../images/bg-intro.webp');
  background-color: color-mix(in srgb, white, antiquewhite 90%);
  background-size: cover;
  background-repeat: no-repeat;

  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 16px;
  column-gap: clamp(32px, 3vw, 64px);

  filter: drop-shadow(0 5px 25px color-mix(in srgb, var(--color-myteam), transparent 50%));
}

@media (width <= 720px) {
  header #intro {
    grid-template-columns: 1fr;
  }
}

header #intro h1 {
  text-align: center;
  text-wrap: balance;
  color: var(--color-background);
  font-size: clamp( 32px , 3vw , 100px);
  font-weight: bold;
  grid-column: 1 / -1;
  margin-block-end: 16px;
}

#intro p {
  color: var(--color-background);
  font-size: 24px;
  text-align: center;
  grid-column: 1/-1;
  text-wrap: balance;
}

header #intro figure img {
  width: 100%;
  height: auto;
  margin-block-end: 8px;
}

header #intro figcaption {
  text-align: center;
  text-wrap: pretty;
  color: var(--color-background);
  font-size: 20px;
}

@media (width <= 720px) {
  header #intro figcaption {
    font-size: 12px;
  }
}

main {
  background-color: var(--color-background);
  background-image: linear-gradient(to bottom, 
  var(--color-background), 
  color-mix(in srgb, var(--color-background), black 33%),
  color-mix(in srgb, var(--color-background), var(--color-myteam) 15%));
}

.heading {
  text-transform: uppercase;
}

.heading .title {
  font-size: 40px;
}

.heading .details {
  font-size: 24px;
  text-transform: none;
  text-align: center;
  text-wrap: balance;
  width: min(96%, 80ch);
  margin-inline: auto;
  margin-block-start: 16px;
}

div:not([class*="week"]) .heading .title {
  text-align: center;
}

.heading .period {
  font-size: normal;
  letter-spacing: 0.2em;
}

.buttons {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.buttons button {
  background-color: white;
  color: black;
  padding: 0.5em;
  border-radius: 4px;
  transition: translate 150ms ease-in;
}

@media (pointer: fine) {
  .buttons button:hover {
    translate: 0 -4px;
  }
}

#login {
  background-color: var(--color-background);
  margin-inline: auto;
  margin-block-end: 64px;
  display: none;
  visibility: hidden;
}

#login button {
  font-size: 24px;
}

.loggedout #login {
  display: block;
  visibility: visible;
}

.loggedout .eventweek .userScore,
.loggedout .eventweek .teamScore {
  display: none;
  visibility: hidden;
}

.loggedout #allTeams {
  pointer-events: none;
}

.loggedout .myteam {
  background: none;
}

.loggedout .myteam,
.loggedout .myteam img {
  outline: none!important;
}

.loggedout .myteam::after {
  display: none!important;
}