:root {
  --main-bg-color: #43382a;
  --sub-bg-color: #222222;
  --main-event-color: #d1c973;
  --main-text-color: #ffffff;
  --inactive-color: #2c2c2c;
}

@import url('https://fonts.googleapis.com/css2?family=Quantico:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* SECTIONS */

#event-banners > * {
  border-color: var(--inactive-color);
}

body {
  background-color: var(--main-bg-color);
  background-image: 
    linear-gradient(180deg, var(--sub-bg-color) 0%, transparent 100%), 
    url('../images/bgtile.webp');
  background-repeat: no-repeat, repeat;
  background-position: top center;
  background-size: auto 80vh, auto;
  background-attachment:fixed, scroll;

  padding-top: 0;
}

#collective-event {
  padding-block-start: 0;
}

#collective-event section:not(#event-intro) {
  --section-margins: 2rem;
  border-radius: 2px;

  background-color: var(--sub-bg-color);
  background-image: url('../images/sub-bgtile.webp');
  background-position: top center;
  background-repeat: repeat;
  background-size: auto;

  margin: var(--section-margins) auto;
  padding: calc(var(--section-margins) * 1.2) var(--section-margins);
  filter: drop-shadow(0 2px 2px black);
}

#collective-event section .col-group > div,
#collective-event section .col-grid > div,
#collective-event section .col-flex > div {
  text-align: center;
}

#event-intro a button,
#preselection input[type="submit"],#preselection input[type="button"] {
  background-color: var(--main-event-color)!important;
  border-color: var(--main-event-color);
  color: var(--inactive-color);
  transition: filter 100ms ease-in!important;
  padding: 0.5em;
  border-radius: 3px;
}

#event-intro a:hover button,
#preselection input[type="submit"]:hover,
#preselection input[type="button"]:hover {
  filter: brightness(120%);
}




/* TRACKING BARS */
.tracker,
.tracker div h4,
.tracker div h6,
.tracker div p,
.tracker div + p {
  color: var(--main-event-color);
}
.tracker-bar,
.tracker-bar > * {
  min-height: 0.625rem;
  border-radius: 2px;
}
.tracker-bar div {
  border: 1px solid var(--inactive-color);
}

.tracker-bool {
  padding: 0.33rem;
  border: 2px solid;
  border-radius: 5px;
  color: var(--main-event-color);

  /* border */
  border-color: var(--main-event-color);
  border: 5px solid transparent;
  border-image-source: url("../images/tracker-border.webp"); 
  border-image-slice: 5;
  border-image-width: 5px;
  border-image-repeat: stretch;

  background: var(--sub-bg-color);
  filter: drop-shadow(0 4px 4px black);
}
.tracker-bar-track,
.tracker-split > * {
  background-color: black;
}
.tracker-bar-progress {
  background-color: var(--main-event-color);
  background-image: linear-gradient(90deg, var(--main-event-color) 0%, #ffcf00 80%, yellow 95%, white 100%);
}

#event-4 img,
#event-4b img,
#event-5b img {
  margin-top: 4px;
  border: none;
}
#event-4 *[completed] img,
#event-4b *[completed] img,
#event-5b *[completed] img {
  border-color: var(--main-event-color);
}

#event-2-rewards figcaption {
  color: var(--main-text-color);
}

#event-3-missions > div {
  background-color: var(--sub-bg-color);
  filter: drop-shadow(0 4px 4px black);
  border-radius: 2px;
}

#event-3-missions .tracker > p {
  color: var(--main-text-color);
}

#event-3-missions figcaption {
    border-radius: 50vw;
}




[completed] .tracker-bool,
.tracker-split > *[completed] {
  color: var(--inactive-color);
  background: var(--main-event-color);
  background-image: linear-gradient(
    90deg,
    #ffcf00 0%,
    var(--main-event-color) 30%,
    var(--main-event-color) 70%, 
    #ffcf00 100%);
}

[inactive] {
  color: var(--main-text-color);
  opacity: 0.4;
}

[completed] {
  color: var(--main-event-color);
  opacity: 1;
}




/* TEXT SIZE */

main {
  font-family: "Quantico", Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
  text-align: center;
}

main h2 {
  font-size: 3em;
}

main h1 {
  font-size: 2.5em;
}

main #event-intro p,
main h5 {
  font-size: 1.5em;
}

@media (width <= 800px) {
  main h2 {
    font-size: 2em;
  }
  
  main h1 {
    font-size: 2em;
  }
  
  main #event-intro p,
  main h5 {
    font-size: 1.2em;
  }
}

main p {
  font-size: 1em;
}

main figcaption,
.tracker div h4,
.tracker div h6,
.tracker div p,
.tracker div + p {
  font-size: 0.75em;
}

main a button {
  font-size: 0.625rem;
}

main #event-intro a button {
  font-size: 1em;
}


/* TEXT STYLE */

main :is(h1,h2,h3,h4,h5,h6) {
  font-weight: 700;
}

main :is(h1,h2,h3,h4,h5,h6,p) {
  /* line-height: 1.067; */
  text-wrap: pretty;
}

main h2 {
  line-height: 1.067;
}

#event-intro p {
  font-weight: 300;
}

.tracker-bar,
.tracker-counter,
main a button,
main input[type="submit"] {
  font-weight: 700;
  text-transform: uppercase;
}

main :is(h1,h2,h3,h4,h5,h6),
.tracker-bar,
.tracker-counter {
  text-transform: uppercase;
}

main a,
main a button {
  line-height: 1;
  text-transform: uppercase;
}

.tracker-bar,
.tracker-counter,
.tracker div h4,
.tracker div h6,
.tracker div p,
.tracker div + p,
main a button {
  letter-spacing: 0.1em;
}

.tracker div h4,
.tracker div h6,
.tracker div p,
.tracker div + p  {
  padding: 0.25em 0;
}

main a button {
  border: 2px solid;
  border-radius: 3px;
  width: fit-content;
  margin-inline: auto;
}

main :is(h1,h5,h6,p),
main a button {
  color: var(--main-text-color);
}

main h1 .data-user-ign,
main h2 {
  color: var(--main-event-color);
}

@supports (-webkit-background-clip:text) {
  main h1 .data-user-ign,
  main h2 {
    background: linear-gradient(90deg, #ffcf00, var(--main-event-color), #ffcf00); 
    -webkit-background-clip: text; 
    color: transparent;
  }
}

@media (min-width: 37.5625em) {
  main a button:hover {
    cursor: pointer;
    color: var(--main-event-color);
    border-color: var(--main-event-color);
  }
}


/* remove styling for intro section */
section#event-intro {
  background-color: transparent;
  padding: 0;
  filter: none;
}


/* PUZZLE */
.tracker-puzzle {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 1px;
}