:root{
    /* Site Colours */
    --background: #090914;
    --foreground: #0F0F21;
    --border: #18182D;
    --title:#fff;
    --subtext: #CAE4FFE3;
    --text:#F9F9FFEB;
    --purple: #8332FA;
    --blue: #008EFF;
    --green: #61CE70;
    --light-blue: #6EC1E4;
    --yellow: #ffcb00;
    --orange: #FF8926;
    --red: #F84B4B;
    
    --content-max: 1210px;
    --content-pad: 10px;
}

/* FONTS */
h1{
    margin:0;
    color:var(--title);
    font: 700 clamp(34px, 3.8vmax, 58px) / clamp(40px, 4.6vmax, 60px) 'Lato', sans-serif;
}
h2{
    margin:0;
    color:var(--title);
    font: 700 clamp(24px, 3vmax, 36px) / clamp(30px, 4vmax, 40px) 'Lato', sans-serif;
}
h3{
    margin:0;
    color:var(--title);
    font: 700 clamp(18px, 2.4vmax, 24px) / clamp(24px, 3.4vmax, 34px) 'Lato', sans-serif;
}
h4{
    margin:0;
    color:var(--title);
    font: 700 clamp(16px, 2vmax, 20px) / clamp(22px, 3vmax, 28px) 'Lato', sans-serif;
}
p{
    margin:0;
    color:var(--text);
    font: clamp(14px, 1.8vmax, 18px) / clamp(20px, 2.8vmax, 26px) 'Roboto', sans-serif;
}
label{
    margin:0;
    color:var(--text);
    font: clamp(14px, 1.8vmax, 18px) / clamp(20px, 2.8vmax, 26px) 'Roboto', sans-serif;
}
.p-large{
    margin:0;
    color:var(--text);
    font: clamp(16px, 2vmax, 20px) / clamp(22px, 3vmax, 28px) 'Roboto', sans-serif;
}
.p-small{
    margin:0;
    color:var(--text);
    font: clamp(13px, 1.4vmax, 16px) / clamp(18px, 2.2vmax, 24px) 'Roboto', sans-serif;
}
li{
    margin:0;
    color:var(--text);
    font: clamp(14px, 1.8vmax, 18px) / clamp(20px, 2.8vmax, 26px) 'Roboto', sans-serif;
}
/* CONTAINERS */
ul {
    padding-left:20px;
    margin:0px;
}
body {
    background: var(--background);
    margin:0px;
}
*, *::before, *::after { box-sizing: border-box; }
.boxed {
    width:100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding-inline: clamp(10px, 4vw, var(--content-pad));
}
.container {
    background-color:var(--foreground);
    border-style:solid;
    border-color:var(--border);
    border-radius:8px;
    border-width:2px;
    box-sizing: border-box;
    padding:10px;
}
.container-inv {
    background-color:var(--background);
    border-style:solid;
    border-color:var(--border);
    border-radius:8px;
    border-width:2px;
    box-sizing: border-box;
    padding:10px;
}
.horizontal {
    display:flex;
    align-items:center;
}
.gapped-1 > * + * {
    margin-top:clamp(5px, 1.8vmax, 10px);
}
.gapped-2 > * + * {
    margin-top:clamp(10px, 1.8vmax, 20px);
}
.gapped-3 > * + * {
    margin-top:5px;
}
.ex-padded {
    padding:15px;
}
.desc-margin {
    margin-right:33%;
}
/* ELEMENTS */
.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align: center;

    padding:10px 14px;
    border:3px solid #008EFF;
    border-radius:4px;

    font:700 clamp(14px, 1.8vmax, 18px) Roboto, sans-serif;
    color:var(--title);
    text-decoration:none;
    cursor:pointer;

    background-image:linear-gradient(to left,#008EFF,#0074D1);
    box-sizing:border-box;
}
.orange-button {
    background-image: linear-gradient(to left, #D5710C, #FF8B13);
    border-color:#FF8B13;
}
.purple-button {
    background-image: linear-gradient(to left, #4D21A7, #591FD3);
    border-color:#591FD3;
}
.red-button {
    background-image: linear-gradient(to left, #A72121, #C01D1D) !important;
    border-color: #D31F1F;
    gap: 5px
}
.small-button {
    padding:6px 14px;
    background-image: linear-gradient(to left, #18182D, #1F1F3B);
    border-color:#18182D;
    width:100%;
    font-size:16px;
}
.buttons {
    display:flex;
    justify-content: center;
    align-items:center;
    gap:10px;
}
.divider {
    width:90%;
    height:2px;
    background:var(--foreground);
    margin:clamp(10px, 2.5vw, 30px) auto;
    border-radius:999px;
}
.fw-divider {
    width:100%;
    height:2px;
    background:var(--foreground);
    margin:clamp(5px, 2.5vw, 20px) auto;
    border-radius:999px;
}
*::-webkit-scrollbar {
  width: 0;
  height: 0;
}
@media (max-width:767px) {
    .desc-margin{margin-right:0px;}
    p{text-align: center;}
    h1{text-align: center;}
    h2{text-align: center;}
    h3{text-align: center;}
    h4{text-align: center;}
}