/* GENERAL */
* {
  margin: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
  text-decoration: inherit;
  font-weight: inherit;
  box-sizing: border-box; }

strong {
  font-weight: bold; }

img {
  display: block;
  max-width: 100%; }

a {
  text-decoration: underline; }

:root {
  --background-width: 3rem;
  --margin: 1rem;
  --margin-2: calc(var(--margin) * 2);
  --margin-4: calc(var(--margin-2) * 2);
  --woco-red: rgb(240,20,0);
  --woco-blue: rgb(56,42,218);
  --woco-green: rgb(9,171,25);
  --woco-yellow: rgb(255,245,0);
  --woco-cyan: rgb(45,159,227);
  --text-large: 3rem;
  --text-big: 2rem;
  --text-medium: 1.6rem;
  --text-normal: 1rem; }

.large-text, body > header nav, body > main > h2 {
  font-size: var(--text-large);
  letter-spacing: -1px;
  line-height: 1em;
  font-weight: bold; }

.big-text, body > header h1, body > main > h3, body > main section.agenda, body > main section.combo article .combo_text h3 {
  font-size: var(--text-big);
  letter-spacing: -.5px;
  line-height: 1em;
  font-weight: bold; }

.medium-text, body > main section.agenda .event .event_title .event_subtitle {
  font-size: var(--text-medium);
  letter-spacing: -.25px;
  line-height: calc(4em / 3);
  font-weight: bold; }

html, body {
  min-height: 100%; }

body {
  font-family: "Grotesque", "helvetica neue", "helvetica", "arial", sans-serif;
  letter-spacing: -.25px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  color: black;
  background: white; }

/* BACKGROUND BORDERS */
/* yellow right */
html::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  width: calc(var(--background-width) + var(--margin));
  height: 100%;
  background-image: linear-gradient(to left, #fff500, rgba(255, 245, 0, 0));
  mix-blend-mode: multiply;
  pointer-events: none; }

/* grey background*/
html::after {
  content: "";
  position: fixed;
  top: 0;
  left: var(--margin);
  width: calc(100% - var(--margin) - var(--margin));
  height: 100%;
  background-color: rgba(0, 0, 0, 0.025);
  mix-blend-mode: multiply;
  pointer-events: none; }

/* blue top */
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--margin);
  width: calc(100% - var(--margin) - var(--margin));
  height: var(--background-width);
  background-image: linear-gradient(to bottom, rgba(0, 100, 220, 0.75), rgba(0, 100, 220, 0));
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1; }

/* green bottom */
body::after {
  content: "";
  position: fixed;
  bottom: 0;
  left: 0;
  width: calc(100% - var(--margin));
  height: var(--background-width);
  background-image: linear-gradient(to top, rgba(0, 200, 20, 0.6), rgba(0, 200, 0, 0));
  mix-blend-mode: multiply;
  pointer-events: none; }

/* HEADER */
body > header h1 {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--woco-red);
  position: fixed;
  z-index: 1;
  width: calc(100vh - var(--margin) - var(--margin));
  top: calc(100% - var(--margin));
  left: var(--margin);
  transform: rotate(-90deg);
  transform-origin: top left;
  line-height: 0.6em;
  mix-blend-mode: multiply; }
  body > header h1 a {
    text-decoration: inherit; }
body > header nav {
  position: fixed;
  top: calc(var(--margin) - 0.2rem);
  left: calc(var(--margin) * 2 + 1.6rem);
  color: var(--woco-red);
  z-index: 1;
  mix-blend-mode: multiply; }
  body > header nav a {
    text-decoration: inherit; }
  body > header nav div {
    opacity: .1;
    transition: opacity .25s; }
    body > header nav div:hover {
      opacity: 1; }

/* MAIN */
body > main {
  margin: 50vh var(--margin-2) var(--margin) calc(var(--margin) * 2 + 1.6rem); }
  body > main a {
    position: relative;
    z-index: 1; }
  body > main section.definition {
    font-size: var(--text-big);
    padding: 0rem var(--margin-4);
    margin: var(--margin-4) 0; }
    body > main section.definition strong {
      font-weight: bold;
      color: grey; }
    body > main section.definition p:not(:last-child) {
      margin-bottom: 1rem; }
  body > main > h2 {
    color: var(--woco-red);
    margin-top: var(--margin-4);
    margin-bottom: var(--margin-2); }
  body > main > h3 {
    text-align: center;
    margin: var(--margin-2); }
  body > main section.text {
    columns: 2;
    column-gap: var(--margin);
    margin-bottom: var(--margin-2); }
    body > main section.text p:not(:last-child) {
      margin-bottom: 1rem; }
  body > main section.boxes {
    display: flex;
    column-gap: var(--margin-2);
    margin: var(--margin-2);
    justify-content: center; }
    body > main section.boxes[amount="1"] .box, body > main section.boxes[amount="2"] .box {
      width: calc((100% - var(--margin-2)) / 2); }
    body > main section.boxes[amount="3"] .box {
      width: calc((100% - var(--margin-2) * 2) / 3); }
    body > main section.boxes .box .box_image {
      width: 100%;
      padding-top: 100%;
      background-size: cover;
      background-position: center; }
    body > main section.boxes .box .box_text > * {
      margin-top: .5rem; }
    body > main section.boxes .box .box_text h3 {
      font-weight: bold; }
    body > main section.boxes .box .box_text p {
      font-size: .8em; }
    body > main section.boxes .box > a {
      display: block;
      text-decoration: inherit;
      transition: all .5s; }
      body > main section.boxes .box > a:hover {
        transform: scale(102%);
        opacity: .9; }
  body > main section.image {
    margin: 3rem; }
    body > main section.image figcaption {
      font-size: .8em;
      margin-top: 0.25rem;
      max-width: 40em; }
  body > main section.agenda {
    position: relative; }
    body > main section.agenda::after {
      content: "";
      display: block;
      border-bottom: 1px solid black;
      position: absolute;
      width: calc(100% + 2rem + 3.6rem);
      margin: 0 0 0 -3.6rem; }
    body > main section.agenda a {
      text-decoration: inherit; }
    body > main section.agenda .event {
      display: flex;
      gap: calc(var(--margin) / 2) var(--margin);
      flex-wrap: wrap;
      border-top: 1px solid black;
      padding: calc(var(--margin) / 1.3) 1rem calc(var(--margin) / 3) 3.6rem;
      margin: 0 -2rem 0 -3.6rem; }
      body > main section.agenda .event.platformMiddenmeer {
        color: var(--woco-cyan); }
      body > main section.agenda .event.filmHuis {
        color: var(--woco-blue); }
      body > main section.agenda .event.coopCafe {
        color: var(--woco-red); }
      body > main section.agenda .event.commonGround {
        color: var(--woco-green); }
      body > main section.agenda .event.noCategory {
        color: grey; }
      body > main section.agenda .event .event_date {
        flex-basis: calc(15% - var(--margin)); }
      body > main section.agenda .event .event_type {
        flex-basis: calc(25% - var(--margin)); }
    body > main section.agenda a .event:hover {
      color: white;
      cursor: pointer; }
    body > main section.agenda a .event.platformMiddenmeer:hover {
      background-color: var(--woco-cyan); }
    body > main section.agenda a .event.filmHuis:hover {
      background-color: var(--woco-blue); }
    body > main section.agenda a .event.coopCafe:hover {
      background-color: var(--woco-red); }
    body > main section.agenda a .event.commonGround:hover {
      background-color: var(--woco-green); }
    body > main section.agenda a .event.noCategory:hover {
      background-color: silver; }
  body > main section.combo article {
    display: flex;
    align-items: center;
    margin: var(--margin-2) 0; }
    body > main section.combo article .combo_image {
      width: 30%;
      padding-top: 30%;
      background-size: cover;
      background-position: center; }
    body > main section.combo article .combo_text {
      width: calc(100% - 15rem);
      padding-left: var(--margin-2); }
      body > main section.combo article .combo_text h3 {
        font-size: 1.66rem; }
      body > main section.combo article .combo_text *:not(:last-child) {
        margin-bottom: 1rem; }

/* FOOTER */
footer {
  display: flex;
  justify-content: space-between;
  margin: calc(50vh - var(--margin) - 1em) var(--margin) var(--margin) calc(var(--margin) * 2 + 1.6rem);
  font-weight: bold;
  color: var(--woco-red); }

/* SCREEN < 640 */
@media screen and (max-width: 640px) {
  :root {
    --text-large: 2.5rem;
    --text-big: 1.75rem;
    --text-medium: 1.4rem;
    --text-normal: 1rem; }

  body::after {
    position: absolute;
    bottom: auto; }

  body > header nav {
    position: absolute;
    left: calc(var(--margin) * 2 + 1.2rem); }

  body > header nav div {
    opacity: 1; }

  body > main {
    margin-left: calc(var(--margin) * 2 + 1.2rem); }

  body > main section.definition {
    font-size: calc(var(--text) * 1.5);
    padding: 0; }

  body > main section.text {
    columns: 1; }

  body > main section.boxes {
    display: block;
    margin: 0; }

  body > main section.boxes .box {
    width: 100% !important;
    margin-bottom: 2rem; }

  body > main section.image {
    margin: 3rem 0; }

  body > main section.agenda .event {
    display: block; }
    body > main section.agenda .event article > div:not(:last-child) {
      margin-bottom: .5rem !important; }
    body > main section.agenda .event > div {
      width: 100% !important; }
    body > main section.agenda .event .event_date br {
      display: none; }
    body > main section.agenda .event .event_date time {
      float: right; }
    body > main section.agenda .event .event_type {
      font-size: var(--text-medium);
      letter-spacing: -.25px; }

  body > main section.combo article {
    display: block; }

  body > main section.combo article .combo_image {
    width: 100%;
    padding-top: 100%; }

  body > main section.combo article .combo_text {
    width: 100%;
    padding-left: 0;
    margin-top: 1rem; }

  footer {
    display: block; } }