@font-face {
    font-family: 'Agrandir Variable';
    src: url(../assets/fonts/AGRANDIR\ VARIABLE.TTF) format('truetype');
}

:root {
    --bg-1: #000000;
    --bg-2: #2e2e2e;
    --bg-3: #1f1f1f;

    --text-color: #f5f5f5;
    --dark-bg-color: rgba(0, 0, 0, 0.5);
    --light-bg-color: rgba(255, 255, 255, 0.5);

    --sect-color: #141414;

    --agrandir-variable-aalt: "aalt" off;
    --agrandir-variable-case: "case" off;
    --agrandir-variable-salt: "salt" off;
    --agrandir-variable-ss01: "ss01" off;
    --agrandir-variable-ss02: "ss02" off;
    --agrandir-variable-ss03: "ss03" off;
    --agrandir-variable-ss04: "ss04" off;
    --agrandir-variable-ss05: "ss05" off;
    --agrandir-variable-ss06: "ss06" off;
    --agrandir-variable-ss07: "ss07" off;
    --agrandir-variable-ss08: "ss08" off;
    --agrandir-variable-ss09: "ss09" off;
    --agrandir-variable-ss10: "ss10" off;
    --agrandir-variable-ss11: "ss11" off;
}

[data-theme="light"] {
    --text-color: #131313;
    --dark-bg-color: rgba(255, 255, 255, 0.5);
    --light-bg-color: rgba(255, 255, 255, 0.5);

    --sect-color: #f5f5f5;

    --bg-1: #787878;
    --bg-2: #c7c7c7;
    --bg-3: #a1a1a1;
}

body {
    color: var(--text-color);
    overflow-x: hidden;
    width: 100vw;
    font-family: 'Agrandir Variable', sans-serif;
    background: linear-gradient(to right, var(--bg-1) 0%, var(--bg-2) 32%, var(--bg-3) 71%);
    margin: 0;
    transition: all 0.3s ease;
}

.agrandir-variable-aalt {
    --agrandir-variable-aalt: "aalt" on;
}

.agrandir-variable-case {
    --agrandir-variable-case: "case" on;
}

.agrandir-variable-salt {
    --agrandir-variable-salt: "salt" on;
}

.agrandir-variable-ss01 {
    --agrandir-variable-ss01: "ss01" on;
}

.agrandir-variable-ss02 {
    --agrandir-variable-ss02: "ss02" on;
}

.agrandir-variable-ss03 {
    --agrandir-variable-ss03: "ss03" on;
}

.agrandir-variable-ss04 {
    --agrandir-variable-ss04: "ss04" on;
}

.agrandir-variable-ss05 {
    --agrandir-variable-ss05: "ss05" on;
}

.agrandir-variable-ss06 {
    --agrandir-variable-ss06: "ss06" on;
}

.agrandir-variable-ss07 {
    --agrandir-variable-ss07: "ss07" on;
}

.agrandir-variable-ss08 {
    --agrandir-variable-ss08: "ss08" on;
}

.agrandir-variable-ss09 {
    --agrandir-variable-ss09: "ss09" on;
}

.agrandir-variable-ss10 {
    --agrandir-variable-ss10: "ss10" on;
}

.agrandir-variable-ss11 {
    --agrandir-variable-ss11: "ss11" on;
}

/* Apply current state of all custom properties
   whenever a class is being applied */
.agrandir-variable-aalt,
.agrandir-variable-case,
.agrandir-variable-salt,
.agrandir-variable-ss01,
.agrandir-variable-ss02,
.agrandir-variable-ss03,
.agrandir-variable-ss04,
.agrandir-variable-ss05,
.agrandir-variable-ss06,
.agrandir-variable-ss07,
.agrandir-variable-ss08,
.agrandir-variable-ss09,
.agrandir-variable-ss10,
.agrandir-variable-ss11 {
    font-feature-settings: var(--agrandir-variable-aalt), var(--agrandir-variable-case), var(--agrandir-variable-salt), var(--agrandir-variable-ss01), var(--agrandir-variable-ss02), var(--agrandir-variable-ss03), var(--agrandir-variable-ss04), var(--agrandir-variable-ss05), var(--agrandir-variable-ss06), var(--agrandir-variable-ss07), var(--agrandir-variable-ss08), var(--agrandir-variable-ss09), var(--agrandir-variable-ss10), var(--agrandir-variable-ss11);
}

/* Variable instances */
.agrandir-variable-tight-light {
    font-variation-settings: "wght" 228, "wdth" 50, "ital" 0;
}

.agrandir-variable-tight {
    font-variation-settings: "wght" 336, "wdth" 50, "ital" 0;
}

.agrandir-variable-tight-medium {
    font-variation-settings: "wght" 469, "wdth" 50, "ital" 0;
}

.agrandir-variable-tight-bold {
    font-variation-settings: "wght" 617, "wdth" 50, "ital" 0;
}

.agrandir-variable-tight-heavy {
    font-variation-settings: "wght" 767, "wdth" 50, "ital" 0;
}

.agrandir-variable-tight-black {
    font-variation-settings: "wght" 900, "wdth" 50, "ital" 0;
}

.agrandir-variable-narrow-light {
    font-variation-settings: "wght" 228, "wdth" 75, "ital" 0;
}

.agrandir-variable-narrow {
    font-variation-settings: "wght" 336, "wdth" 75, "ital" 0;
}

.agrandir-variable-narrow-medium {
    font-variation-settings: "wght" 469, "wdth" 75, "ital" 0;
}

.agrandir-variable-narrow-bold {
    font-variation-settings: "wght" 617, "wdth" 75, "ital" 0;
}

.agrandir-variable-narrow-heavy {
    font-variation-settings: "wght" 767, "wdth" 75, "ital" 0;
}

.agrandir-variable-narrow-black {
    font-variation-settings: "wght" 900, "wdth" 75, "ital" 0;
}

.agrandir-variable-light {
    font-variation-settings: "wght" 228, "wdth" 100, "ital" 0;
}

.agrandir-variable-regular {
    font-variation-settings: "wght" 336, "wdth" 100, "ital" 0;
}

.agrandir-variable-medium {
    font-variation-settings: "wght" 469, "wdth" 100, "ital" 0;
}

.agrandir-variable-bold {
    font-variation-settings: "wght" 617, "wdth" 100, "ital" 0;
}

.agrandir-variable-heavy {
    font-variation-settings: "wght" 767, "wdth" 100, "ital" 0;
}

.agrandir-variable-black {
    font-variation-settings: "wght" 900, "wdth" 100, "ital" 0;
}

.agrandir-variable-wide-light {
    font-variation-settings: "wght" 228, "wdth" 150, "ital" 0;
}

.agrandir-variable-wide {
    font-variation-settings: "wght" 336, "wdth" 150, "ital" 0;
}

.agrandir-variable-wide-medium {
    font-variation-settings: "wght" 469, "wdth" 150, "ital" 0;
}

.agrandir-variable-wide-bold {
    font-variation-settings: "wght" 617, "wdth" 150, "ital" 0;
}

.agrandir-variable-wide-heavy {
    font-variation-settings: "wght" 767, "wdth" 150, "ital" 0;
}

.agrandir-variable-wide-black {
    font-variation-settings: "wght" 900, "wdth" 150, "ital" 0;
}

.agrandir-variable-grand-thin {
    font-variation-settings: "wght" 100, "wdth" 200, "ital" 0;
}

.agrandir-variable-grand-light {
    font-variation-settings: "wght" 228, "wdth" 200, "ital" 0;
}

.agrandir-variable-grand {
    font-variation-settings: "wght" 336, "wdth" 200, "ital" 0;
}

.agrandir-variable-grand-medium {
    font-variation-settings: "wght" 469, "wdth" 200, "ital" 0;
}

.agrandir-variable-grand-bold {
    font-variation-settings: "wght" 617, "wdth" 200, "ital" 0;
}

.agrandir-variable-grand-heavy {
    font-variation-settings: "wght" 767, "wdth" 200, "ital" 0;
}

.agrandir-variable-grand-black {
    font-variation-settings: "wght" 900, "wdth" 200, "ital" 0;
}

.agrandir-variable-tight-thin {
    font-variation-settings: "wght" 100, "wdth" 50, "ital" 0;
}

.agrandir-variable-narrow-thin {
    font-variation-settings: "wght" 100, "wdth" 75, "ital" 0;
}

.agrandir-variable-thin {
    font-variation-settings: "wght" 100, "wdth" 100, "ital" 0;
}

.agrandir-variable-wide-thin {
    font-variation-settings: "wght" 100, "wdth" 150, "ital" 0;
}

html {
    box-sizing: border-box;
}

.header-nav {
    font-variation-settings: "wght" 336, "wdth" 150, "ital" 0;
    font-size: 1em;
}

.header-name {
    font-variation-settings: "wght" 336, "wdth" 200, "ital" 0;
    font-size: 2.25em;
}

h2 {
    font-variation-settings: "wght" 336, "wdth" 200, "ital" 0;
    font-size: 2em;
    margin-bottom: 30px;
}

p {
    font-variation-settings: "wght" 469, "wdth" 100, "ital" 0;
    font-size: 1.125em;
    line-height: 1.6;
    max-width: 625px;
}

h3 {
    font-variation-settings: "wght" 336, "wdth" 150, "ital" 0;
    font-size: 1.75em;
}

header {
    color: white;
    padding: 0px 50px;
    width: 100%;
    box-sizing: border-box;
    position: fixed;
    background: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0.25) 100%);
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 90;
}

.hero-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 100px);
    text-align: center;
    padding: 20px;
}

.hero-div h1 {
    pointer-events: none;
    font-size: 2em;
    margin: 0;
    color: var(--text-color);
    font-variation-settings: "wght" 336, "wdth" 200, "ital" 0;
}

.hero-div h1 span {
    font-size: 3.5em;
    font-variation-settings: "wght" 617, "wdth" 200, "ital" 0;
}