@font-face {
  font-family: "SFSportsNight";
  src: url(fonts/SF\ Sports\ Night.ttf);
}

@font-face {
  font-family: "JetBrainsLight";
  src: url(fonts/JetBrainsMono-Light.ttf);
}

@font-face {
  font-family: "JetBrainsRegular";
  src: url(fonts/JetBrainsMono-Regular.ttf);
}

/********************
*** MAIN SETTINGS ***
*********************/

:root {
  --color-text-default: #aaa;
  --color-red-light: indianred;
  --color-red-medium: crimson;
  --color-red-dark: firebrick;
  --color-green-soft: lightseagreen;
  --color-green-vibrant: palegreen;
  --screen-shadows: inset 0px 0px 5px var(--color-green-soft), 0px 0px 10px var(--color-green-soft);
  --screen-background: radial-gradient(rgba(68, 68, 68, 0.7), rgba(34, 34, 34, 0.7));
}

html,
body {
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-image: url(img/city-at-night-darkened.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: JetBrainsRegular, "Courier New", Courier, monospace;
  color: var(--color-text-default);
  text-shadow: 0 0 5px var(--color-text-default);
}

.page-wrapper {
  padding: 1rem;
  position: relative;
  max-width: 1600px;
  margin: auto;
}

abbr {
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

a {
  font-family: JetBrainsLight, "Courier New", Courier, monospace;
  text-decoration: none;
  color: var(--color-green-soft);
  text-shadow: 0 0 5px lightseagreen;
}

a:visited {
  color: var(--color-green-soft);
}

@media (hover: hover) {
  a:hover {
    color: var(--color-green-vibrant);
    text-shadow: 0 0 5px var(--color-green-vibrant);
  }
}

h3 {
  font-family: JetBrainsLight, "Courier New", Courier, monospace;
}

/********************
*** INTRO SECTION ***
*********************/

.intro {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: 1rem;
}

header {
  grid-row: 1 /3;
  grid-column: 1/6;
}

h1 {
  margin: 0;
  padding: 0;
  line-height: 1;
  font-family: "SFSportsNight", "Courier New", Courier, monospace;
  font-size: 8rem;
  color: var(--color-red-medium);
  text-shadow: 2px 2px 10px var(--color-red-dark);
  animation: titleColorChange 12s linear infinite;
}

@keyframes titleColorChange {
  0%,
  100% {
    text-shadow: 0 0 5px var(--color-red-medium);
  }
  50% {
    text-shadow: 2px 2px 10px var(--color-green-soft);
  }
}

h2 {
  font-family: "Courier New", Courier, monospace;
  margin: 0;
}

.summary {
  grid-row: 3/4;
  grid-column: 1/4;
}
.preamble {
  grid-row: 2/4;
  grid-column: 8/13;
  background: var(--screen-background);
  backdrop-filter: blur(5px);
  border-radius: 5px;
  box-shadow: var(--screen-shadows);
  padding: 1rem;
  position: relative;
}

.preamble:after {
  content: "";
  background-image: linear-gradient(transparent, transparent 1px, rgba(51, 51, 85, 0.8));
  background-size: 2px 2px;
  position: absolute;
  bottom: 0;
  left: 2px;
  right: 2px;
  top: 0;
}

.preamble h3 {
  color: var(--color-green-soft);
  text-shadow: 0 0 5px var(--color-green-soft);
}

/*******************
*** MAIN SECTION ***
********************/

.main {
  margin-top: 5rem;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(6, auto);
  text-shadow: 0 0 5px #222;
}

.main h3 {
  color: var(--color-green-soft);
  text-shadow: 0 0 2px 1px black;
}

.explanation {
  grid-column: 1/4;
  grid-row: 1/4;
}

.participation {
  grid-column: 8/13;
  grid-row: 1/3;
  position: relative;
}

.participation::before {
  content: "";
  background-image: url(img/cyberpunk-walk-street.webp);
  position: absolute;
  top: 20px;
  left: -286px;
  width: 256px;
  height: 448px;
  background-size: cover;
  background-repeat: no-repeat;
  filter: saturate(90%);
  filter: drop-shadow(0 0 5px var(--color-text-default));
}

.benefits {
  grid-column: 8/13;
  grid-row: 3/4;
}

.requirements {
  margin-top: 2rem;
  grid-column: 1/13;
  grid-row: 4/5;
}

.requirements > :nth-child(2)::before {
  content: "";
  background-image: url(img/cyberpunk-gun-dark-256x448.webp);
  float: right;
  width: 256px;
  height: 448px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 1rem;
  margin-bottom: 1rem;
  filter: drop-shadow(0 0 10px var(--color-red-medium));
}

footer {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  padding-top: 2rem;
}

footer::before {
  position: absolute;
  content: "Extra Links";
  font-size: 1.2rem;
  top: 0;
  right: 0;
}

/**********************
*** SIDEBAR SECTION ***
***********************/

.sidebar {
  margin-top: 5rem;
  margin-bottom: 5rem;
  background: var(--screen-background);
  backdrop-filter: blur(5px);
  border-radius: 5px;
  box-shadow: var(--screen-shadows);
  padding: 1rem;
  position: relative;
}

.sidebar:after {
  content: "";
  background-image: linear-gradient(transparent, transparent 1px, rgba(51, 51, 85, 0.8));
  background-size: 2px 2px;
  position: absolute;
  bottom: 0;
  left: 2px;
  right: 2px;
  top: 0;
  /* With pointer-events: none;, the ::after pseudo-element won't capture any pointer events, 
  and clicks will pass through it  */
  pointer-events: none;
}

.sidebar .wrapper {
  display: grid;
  grid-template-columns: repeat(3, auto);
}

.design-selection {
  grid-column: 1/2;
  grid-row: 1;
}

.design-archives {
  grid-column: 3/4;
  grid-row: 1;
}

.zen-resources {
  grid-column: 2/3;
  grid-row: 1;
}

/********************
*** MEDIA QUERIES ***
*********************/

/* +++ TABLET +++ */

@media screen and (max-width: 1024px) {
  /* +++ TABLET-INTRO +++*/
  .intro {
    grid-template-rows: repeat(2, auto);
  }
  header {
    grid-row: 1 /2;
    grid-column: 1/7;
  }
  h1 {
    font-size: 6rem;
  }
  .summary {
    grid-row: 1 /2;
    grid-column: 9/13;
  }
  .preamble {
    margin-top: 2rem;
    grid-row: 2/3;
    grid-column: 1/13;
  }

  /* +++ TABLET-MAIN +++ */

  .main {
    margin-top: 2rem;
    grid-template-columns: repeat(1, 100%);
    grid-template-rows: repeat(5, auto);
  }

  .explanation {
    grid-column: 1/2;
    grid-row: 1/2;
  }

  .participation {
    grid-column: 1/2;
    grid-row: 2/3;
    padding-top: 266px;
    margin-top: 1rem;
  }

  .participation::before {
    content: "";
    background-image: url(img/cyberpunk-street-walk-wide.webp);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 448px;
    height: 256px;
  }

  .benefits {
    grid-column: 1/2;
    grid-row: 3/4;
  }

  .requirements {
    margin-top: auto;
    grid-column: 1/13;
    grid-row: 4/5;
  }

  /* +++ TABLET-SIDEBAR +++ */

  .sidebar {
    margin-top: 2rem;
  }

  .sidebar .wrapper {
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(2, auto);
  }

  .design-selection {
    grid-column: 1/2;
    grid-row: 1/3;
  }

  .design-archives {
    grid-column: 2/3;
    grid-row: 2/3;
  }

  .zen-resources {
    grid-column: 2/3;
    grid-row: 1/2;
  }
}

/* +++ BIG PHONE +++ */

@media screen and (max-width: 650px) {
  .intro {
    display: block;
  }
  .sidebar .wrapper {
    grid-template-columns: repeat(1, auto);
    grid-template-rows: repeat(3, auto);
  }

  .design-selection {
    grid-column: 1/2;
    grid-row: 1/2;
  }

  .design-archives {
    grid-column: 1/2;
    grid-row: 3/4;
  }

  .zen-resources {
    grid-column: 1/2;
    grid-row: 2/3;
  }
}

/* +++ SMALL PHONE +++ */

/* Lowest supported resolution : 320px wide*/
@media screen and (max-width: 480px) {
  h1 {
    font-size: 4.5rem;
  }

  .participation {
    padding-top: 182px;
    margin-top: 1rem;
  }

  .participation::before {
    content: "";
    background-image: url(img/cyberpunk-street-walk-wide.webp);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 301px;
    height: 172px;
  }

  .requirements h3 {
    position: relative;
    padding-top: 468px;
  }

  .requirements h3::before {
    content: "";
    background-image: url(img/cyberpunk-gun-dark-256x448.webp);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 256px;
    height: 448px;
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 10px var(--color-red-medium));
  }

  .requirements > :nth-child(2)::before {
    content: none;
  }
}