@charset "UTF-8";

:root {
  /* CONTAINER */
  --container-400: 1480px;
  --container-900: 100%;
  --content-padding-block: 20px;
  --content-padding-inline: 20px;

  /* FONTS */
  --primaryfont: "Poppins", sans-serif;
  --secondaryfont: "Poppins", serif;

  --fontweight-300: 300; /* Light */
  --fontweight-400: 400;
  --fontweight-500: 500; /* Medium */
  --fontweight-600: 600; /* Semibold */
  --fontweight-700: 700; /* Bold */

  /* TEXT SIZE/LINE HEIGHTS */
  --fontsize-100: 0.75rem;
  --fontsize-200: 0.8rem;
  --fontsize-300: 0.9rem;
  --fontsize-400: 1rem;
  --fontsize-500: 1.1rem;
  --fontsize-600: 1.25rem;
  --fontsize-700: 1.5rem;
  --fontsize-800: 1.75rem;
  --fontsize-900: 2rem;
  --defaultlineheight: 1.5;

  /* COLOURS */
  --white: #ffffff;
  --black-100: #F8FAFC;
  --black-200: #e2e8f0;
  --black-300: #cad5e2;
  --black-400: #90a1b9;
  --black-500: #4e5864;
  --black-700: #314158;
  --black-800: #1d293d;
  --black-900: #0f172b;

  --primarycolor-100: #eef2ff;
  --primarycolor-200: #e0e7ff;
  --primarycolor-300: #7c86ff;
  --primarycolor-400: #4f39f6;
  --primarycolor-700: #372aac;
  --primarycolor-900: #1e1a4d;

  --secondarycolor-400: #E8C547;

  --tertiarycolor-400: #4ECDC4;

  --green-100: #d0fae5;
  --green-400: #00d492;
  --green-600: #009966;
  --success: #00d492;
  --orange: #ffb900;
  --warning: #ffb900;
  --red: #e7000b;
  --danger: #e7000b;

}

/* CSS ELEMENTS STYLING */
html {line-height: var(--defaultlineheight);}
body {background: var(--white); color: var(--black-900); font-size: var(--fontsize-400); font-family: var(--primaryfont);}

button, input, optgroup, select, textarea {font-size: var(--fontsize-400); line-height: var(--defaultlineheight); font-weight: var(--fontweight-400); padding: 5px 10px;}
input, textarea, select {background: var(--white); border: 1px solid var(--black-100);}
button, input[type="submit"] {background: var(--black-900); color: var(--white); border: none;}
input[type="checkbox"] {accent-color: var(--red);}
:-webkit-autofill {-webkit-box-shadow: 0 0 0 1000px var(--white) inset; box-shadow: 0 0 0 1000px var(--white) inset; -webkit-text-fill-color: var(--black-900);}

pre, code, kbd, samp {font-size: var(--fontsize-400);}
b, strong {font-weight: var(--fontweight-700);}
a {color: var(--primarycolor-400);}
a:hover {color: var(--secondarycolor-400);}
p.seeformerrors {color: var(--red);}
p, li, label {line-height: var(--defaultlineheight);}
li li, li p, p label, label p {font-size: var(--fontsize-400);}
h1, h2, h3, h4, h5, h6 {font-weight: var(--fontweight-700);}

h1 {font-size: var(--fontsize-800);}
h2 {font-size: var(--fontsize-700);}
h3 {font-size: var(--fontsize-600);}
h4 {font-size: var(--fontsize-500);}

hr {background: var(--black-100);}

table th, table td, table th p, table td p {font-size: var(--fontsize-400); font-weight: var(--fontweight-400);}
table th {color: var(--white); background: var(--black-900);}
table td {color: var(--black-900); background: var(--black-100);}
table th a {color: var(--white)!important;}

/* Skip to content accessibility button */
.stclink {background: var(--red); color: var(--white); font-weight: var(--fontweight-700);}
.stclink:focus {color: var(--white);}
:focus-visible {outline: 2px solid var(--primarycolor-400)!important; outline-offset: 2px;}

/* TEMPLATE & CONTENT */

/* Content containers */
.content, .content-container {max-width: var(--container-400); width: 100%; margin: 0 auto; padding: 60px 40px;}
.content.fullwidth {max-width: var(--container-900);}
.content-container {padding: 0;}

/* Header */
.header, .footer {background: var(--black-900)}
.header .content {padding-block: 20px; --gap: 20px;}
.header .logo img {max-width: 380px; width: 100%; object-fit: contain;}

/* Powered by puzzle for a purpose */
.poweredby a {color: var(--white); text-decoration: none; font-weight: 300; font-size: 0.9rem;;}
.poweredby a span {display: block; font-size: 1.2rem; line-height: 1; font-weight: 500; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease;}
.poweredby a:hover span {opacity: 0.8}

.introbanner {background: var(--black-300)}

/* Footer */
.footer {position: relative; z-index: 1;}
.footer .content {padding-block: 60px 40px;}
.footer .left, .footer .right {row-gap: 20px;}
.footer .right {align-items: flex-end;}

.footer p {margin: 0;}
.footer a {color: var(--white);}
.footer a:hover {color: var(--yellow-400);}

.footer .logo img {max-width: 420px; width: 100%;}
.logo-container {position: relative; z-index: 1; width: max-content;}

.footer .socials {position: absolute; z-index: 2; top: 0; right: 0; gap: 10px;}
.footer .socials a {color: var(--primarycolor-600); background: var(--beige-400); border-radius: 5px; width: 30px; height: 30px; transition: all 0.3s ease; text-decoration: none;}
.footer .socials a i {color: inherit;}
.footer .socials a:hover {background: var(--yellow-400);}

.footer .legal {margin-top: auto;}

.see-user-warning {position: fixed; top: 0; left: 0; width: 100%; padding: 10px 20px; background: var(--danger); z-index: 200; text-align: center; box-shadow: 0px 13px 24px -3px rgba(0,0,0,0.1);}
.see-user-warning p {color: var(--white); margin: 0; padding: 0; font-weight: var(--fontweight-500);}

/* RESPONSIVE */
@media (max-width: 1080px) {
  .footer .content {grid-template-columns: 1fr;}
  .footer .right {align-items: flex-start;}
}

@media (max-width: 920px) {
  .header .content {flex-direction: column;}
}

@media (max-width: 660px) {
  .content {padding: 40px 20px;}
  .footer .content {padding-block: 20px;}
}