:root {
  --colour_blue: #3065ff;
  --colour_grass: #10ff40;
  --colour_one_o_one: #101101;
  --colour_sky: #5582ff;
  --colour_white: #ffffff;
}

html,
body {
  margin: 0;
  padding: 0;

  font-family: Monaco;
  font-size: 10px;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

#title_banner {
  position: absolute;
  top: 0;
  left: 0;

  width: 100dvw;
  height: 100dvh;

  background: linear-gradient(
    to bottom right,
    var(
      --colour_blue
    ),
    var(
      --colour_white
    )
  );

  clip-path: polygon(
    0 0,
    100% 0,
    100% 15%,
    90% 30%,
    30% 30%,
    30% 80%,
    15% 90%,
    0 90%,
    0 0
  );
}

body::before {
  content: '';

  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  height: 100dvh;

  background: linear-gradient(
    to bottom,
    var(
      --colour_sky
    ),
    var(
      --colour_grass
    )
  );

  clip-path: polygon(
    0 0,
    10% 0,
    10% 97.5%,
    0 97.5%
  );

  z-index: -1;
}

#title {
  position: absolute;
  left: 5dvw;
  top: 5dvh;

  margin: 0;
  padding: 0;

  font-size: 7.5dvh;

  color: var(
    --colour_white
  );
}

main {
  position: absolute;
  left: 30%;
  top: 30%;
  right: 0;
  bottom: 0;

  display: grid;
  grid-template-rows: 0.5fr 0.5fr 2fr;
  justify-content: center;
  align-items: center;

  text-align: center;
}

main > div {
  margin: 0;
  padding: 20px 10px;
}

main > div:first-of-type {
  font-size: 1.25em;
}

main > div:first-of-type > p:last-of-type {
  font-size: 0.8em;
}

main > div:nth-of-type(2) {
  font-size: 1.125em;
}

main > div:last-of-type {
  align-self: start;
}

main > div:last-of-type > a {
  display: block;

  padding: 20px 40px;

  border: 1px solid var(
    --colour_blue
  );

  border-radius: 30px;

  text-decoration: none;
}

main a:not(:first-of-type) {
  margin-top: 40px;
}

main + h2 {
  margin-top: max(
    100vh,
    696px
  );
  padding-bottom: 50px;
  padding-top: 100px;

  text-align: center;
}

ul {
  width: fit-content;

  margin: auto;
}

h2 + ul {
  padding: 20px 0;
  padding-bottom: 100px;
}

h2 + ul > li {
  margin-top: 50px;
}

h2 + ul > li:first-of-type {
  margin-top: 0;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;

  height: 2.5dvh;

  padding-left: 10dvw;

  background: var(
    --colour_grass
  );

  line-height: 2.5dvh;

  text-align: center;
}

footer::before {
  content: '';

  position: absolute;
  right: 0;
  bottom: 100%;

  width: 2.5dvw;
  height: 5dvh;

  background: linear-gradient(
    to top,
    var(
      --colour_grass
    ),
    var(
      --colour_sky
    )
  );

  clip-path: polygon(
    0 100%,
    100% 100%,
    100% 0%,
    40% 0%,    0% 40%
  );
  z-index: -1;
}

footer a {
  color: var(
    --colour_white
  );

  text-decoration: none;
  text-shadow: 1px 0px 1px var(
    --colour_one_o_one
  );
}