:root {
    --text-color: #fff;
    --button-color: #eb6400;
    --font-shadow: clamp(0.08rem, .08vw, .2rem) #000;

    --img-transform-x: 40%;
    --img-transform-y: 0%;
    --img-scale: 0.58;
}

@font-face {
    font-family: "Kenyan";
    src:    url("/font/KenyanCoffeeBdIt.woff2") format("woff2"),
            url("/font/KenyanCoffeeBdIt.woff") format("woff"),
            url("/font/KenyanCoffeeBdIt.otf") format("opentype");
    font-weight: 600;
    font-style: bold;
    font-display: swap;
}

html, body {
  overflow-x: clip;
}

body {
    background: url('/img/background.jpg') no-repeat center center fixed;
    background-size: cover;
    background-color: #000;
    margin: 0;
    padding: 0;
    color: var(--text-color);
    font-family: Arial, Helvetica, sans-serif;
    overscroll-behavior-x: none;
}

h2, h3 {
    text-align: center;
    -webkit-text-stroke: var(--font-shadow);
    font-family: 'Kenyan', sans-serif;
    color: var(--button-color);
    text-transform: uppercase;
}

a {
  color: var(--text-color)
}

#page {
    margin: 0 auto;
    width: min(1000px, 90%);
}

#logo {
    background: url('/img/logo.png') no-repeat center center;
    background-size: contain;
    display: block;
    width: min(1000px, 90%);
    aspect-ratio: 2 / 1;
    margin: 10vh auto 0;
}

#logo a {
    color: transparent;
    display: block;
    height: 100%;
    width: 100%;
}

@supports not (aspect-ratio: 1/1) {
    #logo {
        height: 0;
        padding-top: 50%; /* e.g. 3:1 -> 1/3*100 = 33.333% */
    }
}

#event-date {
    display: block;
    font-family: 'Kenyan', sans-serif;
    margin: 16px auto;
    text-align: center;
    font-size: clamp(1.5rem, 8vw, 3rem);
    -webkit-text-stroke: var(--font-shadow);
}

#event-date p {
    margin: .2rem 0;
    text-transform: uppercase;
}

#upcoming-date {
    font-size: clamp(2.5rem, 16vw, 6rem);
    color: var(--button-color);
    -webkit-text-stroke: var(--font-shadow);
}

h2 {
    font-size: clamp(2rem, 14vw, 3.5rem);
    margin-top: 5rem;
}

#lineup {
  display: grid;
  margin: 4rem auto 2rem;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 0px 0px;
  justify-items: center;
  align-items: center;
  grid-template-areas:
    "band1 band1 band1 band1 band1 band1"
    "band2 band2 band2 band2 band2 band2"
    "band3 band3 band3 band4 band4 band4"
    "band5 band5 band6 band6 band7 band7";
}

.band1 { grid-area: band1; }
.band2 { grid-area: band2; }
.band3 { grid-area: band3; }
.band4 { grid-area: band4; }
.band5 { grid-area: band5; }
.band6 { grid-area: band6; }
.band7 { grid-area: band7; }


/* images fill their grid cells and keep aspect ratio */
#lineup img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

#lineup img.smaller {
    max-height: clamp(80px, 18vh, 180px);
}

#lineup img.band1 { max-height: 28rem; }
#lineup img.band2 { max-height: 13rem; }
#lineup img.band3 { max-height: 7rem; }
#lineup img.band4 { max-height: 7rem; }
#lineup img.band5 { max-height: 6rem; }
#lineup img.band6 { max-height: 8rem; }
#lineup img.band7 { max-height: 6rem; }


.center {
  text-align: center;
}

p.bigger-text {
  font-size: 1.1rem;
}

.button {
    margin: 4rem auto 6rem;
    width: min(300px, 80%);
    padding: 1rem 1.4rem 1rem 1rem;
    box-sizing: border-box;
    text-align: center;
    font-family: 'Kenyan', sans-serif;
    font-size: clamp(1.5rem, 8vw, 3rem);
    text-transform: uppercase;
    -webkit-text-stroke: var(--font-shadow);
    color: var(--text-color);
    background: url('/img/grudge_bg.png') repeat center center;
    background-color: var(--button-color);
    text-decoration: none;
    border-radius: 3px;
    box-shadow: 0 4px 3px rgba(0, 0, 0, 0.3);
}

.tickets {
    margin: 4rem auto 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2em;
    line-height: 1;
}

.tickets img {
    height: 1em;
    width: auto;
    display: block;
    margin: 0;
}

.tickets-floating {
  display: none;
  box-sizing: border-box;
}

.tickets-floating img {
  box-sizing: border-box;
  width: auto;
  height: 100%;
  border-radius: 3px;
  box-shadow: 0 4px 3px rgba(0, 0, 0, 0.3);
  background: url('/img/grudge_bg.png') repeat center center;
  background-color: var(--button-color);
  padding: 4px;
}

details {
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  width: 100%;
  max-width: 800px;
  font-size: 1.1rem;
  line-height: 1.4;
  margin: 1rem auto;
  padding: 1rem;
  box-sizing: border-box;
  background: rgba(0, 0, 0, .5);
  border-radius: 8px;
  color: rgba(255, 255, 255, .85);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, .2);
  border-bottom: 1px solid rgba(0, 0, 0, .4);
  border-left: 2px solid var(--button-color);
  border-right: 2px solid var(--button-color);
}

details summary {
  cursor: pointer;
  border-bottom: 1px solid transparent;
}

details div {
  padding: 1rem 1rem;
  background: rgba(255, 255, 255, .07);
  border-top: 1px solid rgba(0, 0, 0, .6);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  font-size: 1rem;
}

.footer {
    text-align: center;
    margin: 4rem auto 0;
    font-size: 1.2rem;
    text-transform: uppercase;
    font-family: 'Kenyan', sans-serif;
    backdrop-filter: blur(10px);
    box-sizing: border-box;
    padding: 2rem 1rem;
    box-shadow: 0 -1px 2px rgba(255, 255, 255, 0.3);
}

.footer a {
    color: var(--text-color);
    text-decoration: none;
}

.footer a:hover {
    color: var(--text-color);
    text-decoration: underline;
    text-decoration-color: var(--button-color);
}

#karussell {
  margin: 0 auto;
  position: relative;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 3/2;
  perspective: 1000px;
  box-sizing: border-box;
}

#karussell img {
  position: absolute;
  background-color: #000;
  inset: 0;
  object-fit: contain;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  border-radius: 16px;
  transition: transform 0.5s ease, box-shadow 0.5s ease, opacity 1.2s ease;
  transform: scale(0.5);
  opacity: 0;
  border: 2px solid rgba(255, 255, 255, 1);
  box-sizing: border-box;

  user-select: none; /* Standard syntax */
  -webkit-user-select: none; /* Safari, Chrome, Edge */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge (legacy) */

  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
  transform-style: preserve-3d;
}

#karussell img.middle {
  z-index: 10;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.7);
  transform: scale(1);
  opacity: 1;
}

#karussell img.left,
#karussell img.right {
  z-index: 5;
  cursor: pointer;
  opacity: 1;
}

#karussell img.left {
  transform:
      rotateY(24deg)
      translate(calc(var(--img-transform-x)*-1), calc(var(--img-transform-y)*-1))
      scale(var(--img-scale));
}

#karussell img.right {
  transform:
      rotateY(-24deg)
      translate(var(--img-transform-x), calc(var(--img-transform-y)*-1))
      scale(var(--img-scale));
}

.karussell-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;

  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);

  opacity: 0;
  transition: opacity 0.25s ease;
}

.karussell-backdrop.zoom-open {
  opacity: 1;
}

.karussell-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 999;
  margin: auto;

  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 90vh;
  box-sizing: border-box;

  object-fit: contain;
  border-radius: 20px;

  background: #000;
  box-shadow: 0 20px 60px rgba(0,0,0,.9);
  border: 2px solid rgba(255, 255, 255, 1);

  transform: none;
  opacity: 0;
  transition: opacity .25s ease;
}

.karussell-fullscreen.show {
  opacity: 1;
}

.socials {
  margin-bottom: 6px;
}

.socials a {
  display: inline-block;
}

.socials svg {
  width: 36px;
  height: auto;
}

.socials a:first-child {
  margin-right: 8px;
}

.socials svg path {
  fill: #fff;
  transition: fill .25s ease;
}

.socials a:hover svg path {
  fill: var(--button-color);
}

/* switch to one per row on narrow screens */
@media (max-width: 600px) {

    h2 {
        margin: 5rem auto 2rem;
    }

    #lineup {
        margin: 1rem auto 1rem;
    }

    #lineup img.band3 { max-height: 3.6rem; }
    #lineup img.band6 { max-height: 4rem; }

    .tickets-floating {
        display: block;
        position: fixed;
        top: 16px;
        right: 10px;
        width: 51px;
        height: 51px;
        z-index: 1000;
    }
}