:root {
    --unit: 10px;
    --background-color: rgb(255,255,255);
    --background-color-rgb: 255,255,255;
    --text-color: rgb(0,0,0);
    --text-color-rgba: 0,0,0;
    --accent-color: rgb(26, 0, 253);
    --border-color: rgb(0,0,0);
    --text-on-image-color: rgb(255,255,255);
    --background-on-image-color: rgb(0,0,0);
    --fontsize: 20px;
    --headerheight: 60px;
    --menuwidth: 60px;
    --mobile: 600px;
    --desktop: 1200px;
    --max-width: 1420px;
    --easier: cubic-bezier(.1,.57,.52,.99);
    --darklightunit: 8px;
    --overlay-opacity: 0;
    --site-padding: calc(var(--unit) * 3);
    --multiplier-header: 2;

    --header-size-scaler: 0.5;
    --large-header-size: 80px;
    --large-header: clamp(calc(var(--large-header-size) * var(--header-size-scaler)), 7vw, var(--large-header-size));
}

@media screen and (min-width: 700px){
    :root {
        --site-padding: calc(var(--unit) * 6);
    }
}

.dark {
    --background-color: rgb(20,20,20);
    --background-color-rgb: 20,20,20;
    --text-color: rgb(255,255,255);
    --border-color: #606060;
    --text-color-rgba: 255, 255, 255;
}

.darklightmode-ellipse {
    border: 1px solid white;
}

* {
    margin: 0;
}

html, body {
    padding: 0;
    margin: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: var(--fontsize);
    font-weight: 300;
    line-height: 175%;
    background-color: var(--background-color);
	overscroll-behavior: none;
    color: var(--text-color);
}

h1 {
    font-size: calc(var(--fontsize) + 4px);
    line-height: 125%;
    font-weight: 300;
}

h2 {
    font-size: calc(var(--fontsize) + 3px);
    line-height: 125%;
    font-weight: 300;
}

h3 {
    font-size: calc(var(--fontsize) + 2px);
    font-weight: 400;
    line-height: 125%;
}

h4,h5,h6 {
    font-size: calc(var(--fontsize) + 0px);
    line-height: 125%;
    font-weight: 300;
}

a {
    text-decoration: none;
    color: var(--text-color);
}

ul {
    list-style-type: none;
    margin-block-start:0;
    margin-block-end:0;
    margin-inline-start:0;
    margin-inline-end: 0;
    padding-inline-start: 0;
}

abbr {
    text-decoration: none;
}

input {
    border-radius: 0;
}

button,
input[type=button],
input[type=submit],
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-border-radius: 0;
	border-radius: 0;
	border: 0;
	margin: 0;
}

input[type="number"] {
   -moz-appearance: textfield;
}

@media only screen and (min-width: 1200px) {
    html, body {
        font-size: var(--fontsize);
    }
}