* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: #0572b1;
}

html, body {
  margin: 0;
  background-color: #ececec;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--colour-text-dark);
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* width */
::-webkit-scrollbar {
  width: 16px;
  height: 12px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #383838; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #5e5e5e; 
}

button.cream {
  background-color: #f0d596;
}
button.blue {
  background-color: #c0d3f5;
}
button.cream:hover {
  background-color: #eecc7e;
}
button.blue:hover {
  background-color: #a5c3f5;
}

main {
  width: 100%;
  display: flex;
  flex-direction: column;
}

section {
  width: 100%;
  display: flex;
}

section.home {
  height: 95vh;
  max-height: 100vh;

  & > .l {
    margin: 7vh 0;
    display: flex;
    flex-direction: column;
    width: 55%;
    padding: 12vh 0 10vh 10vw;

    & > .title {
      font-size: 5em;
      height: 80px;
      font-weight: 700;
      font-family: Arial, Helvetica, sans-serif;
      color: var(--colour-text-dark);
      display: flex;
      gap: 20px;
      align-items: center;
      & img {
        height: 70%;
      }
    }

    & > .subtitle {
      margin-left: 8px;
      font-size: 1.75em;
      font-weight: 700;
      color: var(--colour-text-light);
      font-family: Tahoma, Geneva, Verdana, sans-serif;
    }

    & > .subsubtitle {
      margin-left: 8px;
      margin-top: 15px;
      font-size: 1.1em;
      width: 70%;
    }

    & > .buttons {
      margin-top: 20px;
      display: flex;
      gap: 15px;
      padding-left: 5px;
    }
  }

  & > .r {
    width: 45%;
    background-color: var(--colour-bg-bluelight);
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
    padding-left: 8vw;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    gap: 70px;
    height: calc(100vh + 1px);

    & > .stat {
      font-family: Tahoma, Geneva, Verdana, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      
      & > .value {
        font-size: 4em;
        font-weight: 600;
      }
      & > .info {
        font-size: 1.75em;
        font-weight: 700;
        color: var(--colour-text-light);
      }
    }
  }

  & button {
    height: 42px;
    width: 150px;
    cursor: pointer;
    border-radius: 7px;
    outline: 0;
    border: 0;
    font-weight: 600;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
  }

  & button.disabled {
    background-color: #a8a8a8;
    cursor: default;
  }
  & button.disabled:hover {
    background-color: #a8a8a8;
  }
}

section.home .links {
  display: flex;
  gap: 15px;
  margin-top: 20px;
  align-items: center;
  padding-left: 10px;

  & a {
    height: 52px;
    display: flex;
    align-items: center;
  }

  & div.link {
    height: 48px;
    width: 48px;
    border: 2.5px solid #000;
    cursor: pointer;
    display: flex;

    & > img {
      margin: auto;
    }

    & > .x {
      height: 28px;
    }
    & > .dc {
      height: 26px;
    }
    & > .gh {
      height: 30px;
    }
  }

  & .sponsor {
    height: 54px;
  }
}

section .header {
  font-size: 2.5em;
  font-weight: 700;
  color: var(--colour-text-dark);
  font-family: Tahoma, Geneva, Verdana, sans-serif;
  margin-bottom: 20px;
}

section .content {
  font-size: 1.2em;
  color: var(--colour-text-dark);
  font-family: Tahoma, Geneva, Verdana, sans-serif;
  display: flex;
  line-height: 1.5em;
  justify-content: space-between;
}

section.about {
  background-color: var(--colour-bg-bluelight);

  & > .body {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 40px 4%;
  }

  & .video-js {
    border-radius: 6px;
  }

  & video {
    width: 100%;
    border-radius: 6px;
  }
}

section.about .l {
  width: 50%;
}

section.about .r {
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
}

section.dev {
  & > .body {
    display: flex;
    flex-direction: column;
    padding: 40px 4%;
  }
}

section.footer {
  & > .body {
    display: flex;
    padding: 20px 4%;
    gap: 17px;
  }

  & img {
    height: 42px;
  }

  & .content {
    flex-direction: column;
    font-size: 14px;
  }
}

@media screen and (max-width: 768px) {
  section.home {
    flex-direction: column;
    max-height: unset;
    height: auto;
  }

  section.home > .l,
  section.home > .r {
    width: 100%;
    padding: 5vh 5vw;
    margin: 0;
    clip-path: none;
  }

  section.home > .r {
    height: auto;
    gap: 30px;

  }

  section.home .title {
    font-size: 3.5em !important;
    flex-wrap: wrap;
  }

  section.home .subtitle {
    font-size: 1.3em !important;
    margin-bottom: 5vh;
  }

  section.home .subsubtitle {
    font-size: 1em !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 10px;
  }

  section.home .buttons button {
    width: 100%;
    text-decoration: none;
    color: #000;
  }

  section.home .links {
    flex-wrap: wrap;
    justify-content: center;
  }

  section.about .content {
    flex-direction: column;
    gap: 3vh;
  }

  section.about .l,
  section.about .r {
    width: 100%;
  }

  section.dev .content {
    flex-direction: column;
  }

  section.footer .body {
    align-items: center;
  }
}