/* Setup */

:root {
    --base-font-size: 16px;
    --white-colour: rgb(255, 255, 255);
    --grey-colour: rgb(228, 228, 228);
    --black-colour: rgb(0, 0, 0);
    --red-colour: rgb(232, 30, 39);
    --blue-colour: rgb(22, 16, 94);
    --transparent-colour: transparent;
}

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  line-height: 1;
  font-size: var(--base-font-size);
  font-family: Arial, Helvetica, sans-serif;
  outline: none;
  border: none;
}

/* Background */

body {
  background-color: var(--grey-colour);
}

.radial-gradient {
  background: radial-gradient(
    var(--blue-colour) 0%,
    var(--red-colour) 100%
  );
}

.linear-gradient {
  background: linear-gradient(
    to left,
    var(--blue-colour) 0%,
    var(--red-colour) 90%
  );
}

.blue-background {
  background-color: var(--blue-colour);
}

.red-background {
  background-color: var(--red-colour);
}

.black-background {
  background-color: var(--black-colour);
}

.white-background {
  background-color: var(--white-colour);
}

.transparent-background {
  background-color: var(--transparent-colour);
}

select {
  background-image: url(/img/chevron-down.svg);
  background-repeat: no-repeat;
  background-position: right 32px center;
  background-size: 16px;
  appearance: none;
}

/* Border */

.radius-16 {
  border-radius: 16px;
}

.border-white {
  border: 1px solid var(--white-colour);
}

/* Text */

p {
  text-align: center;
}

.text-black {
  color: var(--black-colour);
}

.text-white {
  color: var(--white-colour);
}

.text-bold {
  font-weight: bold;
}

.text-uppercase {
  text-transform: uppercase;
}

/* Sizing */

.width-256 {
  width: 256px;
}

.width-384 {
  width: 384px;
}

.width-max-512 {
  max-width: 512px;
}

.width-max-1024 {
  max-width: 1024px;
}

.width-max-1136 {
  max-width: 1136px;
}

.width-100pc {
  width: 100%;
}

.height-32 {
  height: 32px;
}

.height-64 {
  height: 64px;
}

/* Spacing */

.margin-32 {
  margin: 32px;
}

.margin-auto {
  margin: 0px auto;
}

.padding-16 {
  padding: 16px;
}

.padding-32 {
  padding: 32px;
}

/* Display */

.flex {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.centre {
  align-self: center;
}

.row {
  flex-direction: row;
}

.column {
  flex-direction: column;
}

.hide {
  display: none;
}

/* Transform */

.rotate {
  rotate: -2deg;
}

/* Position */

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.left {
  left: 0px;
}

.right {
  right: 0px;
}

.top {
  top: 0px;
}

.top-10pc {
  top: 10%;
}

.top--64 {
  top: -64px;
}

.bottom {
  bottom: 0px;
}

/* YouTube */

.container {
  display: flex;
  justify-content: center;
}

iframe {
  aspect-ratio: 16 / 9;
  width: 100% !important;
}

/* Media Queries */

@media (max-width: 1224px) {
  section > .row {
    flex-direction: column;
  }
  .mobile-hide {
    display: none;
  }
}

@media (max-width: 612px) {
  section > .row > .row,
  section > .column > .row {
    flex-direction: column;
  }
  .width-256 {
    align-self: center;
  }
}