* {
    box-sizing: border-box;
}

:root {
    /* --- Colors --- */
    --primary-color:    92, 220, 243;
    --secondary-color:  50, 127, 228;

    --card-color:       18, 27, 36;
    --background-color: 4, 15, 26;
    --surface-color:    16, 32, 49;

    --accent1-color:    #E9D8A6;
    --accent2-color:    #C3B091;

    --text-color:       241, 241, 241;
    --caption-color:    176, 188, 196;
    --border-color:     44, 55, 66;

    --shadow-color:     32, 2, 2;
    --test-color:       rgb(176, 188, 196);

    /* --- Padding --- */
    --padding-small:    5px;
    --padding-medium:   10px;
    --padding-large:    20px;
    --padding-xl:       30px;
    --padding-xxl:      50px;
    
    /* --- Margin --- */
    --margin-small:     5px;
    --margin-medium:    10px;
    --margin-large:     20px;
    --margin-xl:        30px;
    --margin-xxl:       50px;
    
    /* --- Radius --- */
    --radius-small:     5px;
    --radius-medium:    10px;
    --radius-large:     20px;
    --radius-xl:        30px;
    --radius-xxl:       50px;
    
    /* --- Font --- */
    --primary-font-family: "Libre Franklin", sans-serif;
    --secondary-font-family: "Onest", sans-serif;
    
    /* --- Custom --- */
    /* Default */
    --default-width:    70%;

    /* Navbar */
    --navbar-height:    60px;
}

/* --- General Layout --- */
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--secondary-font-family);
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow-x: hidden;
    gap: var(--margin-large);
}

body.no-scroll {
    overflow: hidden;
}

.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(0deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(rgb(var(--background-color)), rgb(var(--surface-color)));
    background-size:
        40px 40px,
        40px 40px,
        100% 100%;
    display: flex;
    z-index: 0;
}

.background .glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--primary-color), 0.2) 0%, transparent 60%);
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease;
    mix-blend-mode: screen;
    pointer-events: none;
}

.main {
    position: relative;
    flex: 1 1;
    width: var(--default-width);
    display: flex;
    flex-direction: column;
}

/* --- IMAGE --- */
img {
    border-radius: var(--radius-medium);
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--margin-small) 0;
    font-family: var(--primary-font-family);
}

p {
    margin: 0 0 var(--margin-small) 0;
    font-size: clamp(0.8rem, 1vw + 1rem, 1rem);
    font-family: var(--secondary-font-family);
}

.title {
    font-size: clamp(1.8rem, 2.5vw + 1rem, 3rem);
    font-weight: 800;
    line-height: 1.4;
}

.subtitle {
    font-size: clamp(1rem, 1.5vw + 0.5rem, 1.5rem);
    font-weight: 500;
    line-height: 1.2;
}

.caption {
    font-size: clamp(0.75rem, 1vw + 0.5rem, 0.95rem);
    color: rgb(var(--caption-color));
}

/* --- Flexbox Utilities --- */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-column-size, 200px), 1fr));
    grid-auto-rows: 1fr;
    grid-auto-flow: dense;
    gap: var(--margin-xxl);
}

.columns {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--gap-size);
}

.column  {
    position: relative;
    display: flex;
    flex-direction: column;
}

.column.two-thirds {
    flex: 2
}

.row {
    display: flex;
}

.align-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.gap {
    gap: var(--gap-size);
}

.flex {
    display: flex;
}

/* --- Components --- */
.spacer {
    height: var(--spacing);
}

.full-width {
    width: 100%;
}

.full-height {
    height: 100vh;
}

.expand.in-width {
    flex: 1 0;
}

.expand.in-height {
    flex-grow: 1;
}

/* --- Card --- */
.card {
    position: relative;
    width: fit-content;
    height: fit-content;
    padding: var(--padding-xl);
    color: rgb(var(--text-color));
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--radius-small);
    background-color: rgb(var(--card-color));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--margin-xl);
}

/* --- Buttons --- */
.btn {
    width: fit-content;
    max-height: 45px;
    padding: var(--padding-medium) var(--padding-large);
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-small);
    box-shadow: 0 0 0 transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;

    &:hover {
        transform: scale(1.05);
    }
}

.is-primary {
    color: rgb(var(--background-color));
    background: linear-gradient(rgb(var(--primary-color)), rgb(var(--secondary-color)));
}

.is-secondary {
    color: rgb(var(--text-color));
    border: 1px solid rgb(var(--border-color));
    background-color: rgb(var(--background-color));
}

/* ------------------ */
/* --- Responsive --- */
/* ------------------ */

@media only screen and (max-width: 768px) {
    :root {

        /* --- Custom --- */
        --default-width: 90%;
    }

    .btn {
        padding: var(--padding-medium) var(--padding-medium);
        text-align: center;
    }
}