/* BASE */
/* defines basic typography and tags */
:root{
    --h1-size: 10;

}


html {
    scroll-padding-top: var(--navheight);
    scroll-padding-top: 0;
}

body.movement {
    cursor: none;
    user-select: none !important;
}

/* TYPOGRAPHY */
* {
    cursor: default;
}

input,
textarea {
    cursor: text;
}

p,
a,
li,
label,
button,
th,
td,
input,
select,
textarea,
ol,
ul {
    margin: 0 0 var(--space) 0;
    color: var(--p-color);
    font-family: var(--paragraph);
    font-size: clamp(calc(0.75rem * var(--p-size)), calc(1vw * var(--p-size)), calc(1rem * var(--p-size)));
    font-weight: var(--p-fontweight);
    line-height: var(--p-lineheight);
    text-align: var(--p-textalign);
    text-decoration: none;
    text-transform: var(--p-texttransform);
    hyphens: var(--p-hyphens);
    }

@media(max-width: 799px) {

    p,
    a,
    li,
    label,
    button,
    th,
    td,
    input,
    select,
    textarea,
    ol,
    ul {
        text-align: left;
    }
}

textarea {
    height: 15rem;
    resize: none;
}

ul,
ol {
    padding-left: 2rem;
    /* margin: calc(var(--space) / 2) 0; */
}

span.list {
    display: block;
    margin: calc(var(--space) / 2) 0;
    padding-left: 2rem;
}

span.listitem::marker{
    color: var(--accentcolor);
}

span.list > span.listitem {
    display: list-item;
}

span.list > span.listitem > span.list {
    margin: 0;
}

span.list > span.listitem > span.list > span.listitem {
    list-style-type:circle
}

li {
    margin: .5rem 0;
}

b {
    font-weight: 600;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 var(--space) 0;
    color: var(--h-color);
    font-family: var(--heading);
    font-weight: var(--h-fontweight);
    line-height: var(--h-lineheight);
    text-align: var(--h-textalign);
    text-transform: var(--h-texttransform);
    hyphens: var(--h-hyphens)
}

h1 {
    font-size: clamp(calc(0.25rem * var(--h1-size)), calc(1vw * var(--h1-size)), calc(1rem * var(--h1-size)));
}

h2 {
    font-size: clamp(calc(0.5rem * var(--h2-size)), calc(1vw * var(--h2-size)), calc(1rem * var(--h2-size)));
    /*     margin: clamp(calc(0.75rem * var(--h2-size) / 2), calc(1vw * var(--h2-size) / 2), calc(1rem * var(--h2-size) / 2)) 0;
 */
}

h3 {
    font-size: clamp(calc(0.5rem * var(--h3-size)), calc(1vw * var(--h3-size)), calc(1rem * var(--h3-size)));
    /*     margin: clamp(calc(0.75rem * var(--h3-size) / 2), calc(1vw * var(--h3-size) / 2), calc(1rem * var(--h3-size) / 2)) 0;
 */
}

h4 {
    font-size: clamp(calc(0.5rem * var(--h4-size)), calc(1vw * var(--h4-size)), calc(1rem * var(--h4-size)));
    /*     margin: clamp(calc(0.75rem * var(--h4-size) / 2), calc(1vw * var(--h4-size) / 2), calc(1rem * var(--h4-size) / 2)) 0;
 */
}

h5 {
    font-size: clamp(calc(0.5rem * var(--h5-size)), calc(1vw * var(--h5-size)), calc(1rem * var(--h5-size)));
    /*     margin: clamp(calc(0.75rem * var(--h5-size) / 2), calc(1vw * var(--h5-size) / 2), calc(1rem * var(--h5-size) / 2)) 0;
 */
}

h6 {
    font-size: clamp(calc(0.5rem * var(--h6-size)), calc(1vw * var(--h6-size)), calc(1rem * var(--h6-size)));
    /*     margin: clamp(calc(0.75rem * var(--h6-size) / 2), calc(1vw * var(--h6-size) / 2), calc(1rem * var(--h6-size) / 2)) 0;
 */
}

/* TAGS */

html {
    position: relative;
    z-index: -1;
    height: auto;
    font-size: 10px;
    /* rem */
    /* scroll-padding-top: var(--navheight); */
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

html.noscroll {
    overflow: hidden;
}

body {
    position: relative;
    z-index: -1;
    height: 100vh;
    width: 100vw;
    max-width: var(--outerwidth);
    margin: auto;
    /* transform: translate(-50%,-50%); */
    left: 0;
    top: 50%;
    background: var(
    --bodycolor);
}

#hero.empty {
    display: none;
}

main,
section,
div,
footer {
    position: relative;
    box-sizing: border-box;
}

main {
    display: flex;
    overflow: hidden;
    flex-flow: row wrap;
    justify-content: center;
    padding-top: calc(var(--navheight) - var(--space));
    padding-top: var(--navheight);
    background: var(--maincolor);
    transition: 750ms;
    padding-top: 0;
    /* z-index: -1; */
}

body.fade>main {
    transform: translate3d(0, -2.5rem, 0);
    opacity: 0;
    transition: 250ms;
}

body.fade.out>main {
    transform: translate3d(0, 2.5rem, 0);
    opacity: 0;
}

body.fade>nav,
body.fade>footer {
    opacity: 0;
}

main>* {
    flex-grow: 0;
    flex-shrink: 0;
}

div {
    /* padding: var(--space); */
    border-radius: var(--radius);
    /* width: 100%; */
}

footer {
    padding-bottom: var(--space);
    background: var(--footercolor);
    /* min-height: 40rem; */
    margin: ß;
    margin: 0;
}

footer>.row p,
footer>.row a {
    padding: 0 !important;
    margin: 0 !important;
    margin-bottom: 1rem !important;
    color: var(--lightcolor);
    font-size: calc(var(--navlink-size) * 1rem);
    font-weight: 100;
}

/* ELEMENTS */

nav {
    position: relative;
    box-sizing: border-box;
    transition: var(--quick);
}

img,
video {
    position: relative;
    display: block;
    object-fit: cover;
    height: auto;
    width: 100%;
    max-width: 100%;
    user-select: none;
    pointer-events: none;
}

table {
    position: relative;
    width: 100%;
}

a,
button,
input[type="submit"],
input[type="checkbox"],
input[type="radio"] {
    cursor: pointer;
    position: relative;
    display: block;
    padding: 1rem;
    color: var(--btn-color);
    font-size: calc(var(--btn-size) * 1rem);
    font-weight: var(--btn-fontweight);
    text-align: var(--btn-textalign);
    text-decoration: none;
    text-transform: var(--btn-texttransform);
    border: none;
    border-radius: var(--radius);
    transition: var(--quick);
}

a.inline,
button.inline {
    display: inline;
    padding: 0;
    color: var(--accentcolor);
    /* font-weight: 400; */
    font-family: inherit;
    /* border-radius: 4rem; */
    font-size: inherit;
    /* z-index: 1; */
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 10%;
}

a.inline:hover,
button.inline:hover {
    /* background: var(--accentcolor); */
    color: var(--accentcolor);
    text-decoration-color: var(--accentcolor);
    /* padding: 1rem; */
}

a.inline::after {
    align-items: center;
    justify-content: flex-end;
    /* content: ''; */
    /* position: absolute; */
    /* display: flex; */
    /* width: calc(100% + 6.5rem); */
    /* width: 135%; */
    /* height: 100%; */
    /* background: var(--accentcolor); */
    /* left: 0; */
    /* padding: 15% 6%; */
    /* transform-origin: left; */
    /* top: 50%; */
    /* z-index: -1; */
    /* transform: translate(50%,-50%) scale(.25); */
    transform: translate(-5%, -50%) scale(0);
    color: var(--lightcolor);
    color: var(--lightopaque);
    font-family:
        'iconset';
    font-size: inherit;
    font-weight: lighter;
    /* font-family: inherit; */
    border-radius: 10rem;
    opacity: 0;
}

a.inline:hover::after {
    transform: translate(-5%, -50%) scale(1);
    opacity: 1;
}

button>i {
    opacity: .25;
    transition: var(--quick);
}

button:hover>i {
    opacity: 1 !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime"],
label,
textarea {
    cursor: text;
    box-sizing: border-box;
    width: 100%;
    padding: 0.5rem 1rem;
    margin: 1rem 0rem;
    text-align: left;
    background: var(--translucent);
    border: transparent;
    border-radius: var(--radius);
}

label {
    cursor: pointer;
    width: auto;
    background: transparent;
}

/* checkbox */
input[type="checkbox"],
input[type="radio"] {
    display: inline-block;
    overflow: hidden;
    height: 3rem;
    width: 3rem;
    margin: .5rem;
    background: transparent;
    border: solid .5rem var(--darkcolor);
    border-radius: .5rem;
    transition: var(--quick);
    appearance: none;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background: var(--darkcolor) !important;
}

input[type="checkbox"]::after,
input[type="radio"]::after {
    content: '';
    top: 15%;
    left: 35%;
    z-index: 100;
    transform: translate(-50%, 100%);
    height: 100%;
    width: 100%;
    color: transparent;
    font-family: 'iconset';
    font-size: 2.5rem;
    transition: var(--quick);
}

input[type="checkbox"]:checked:after,
input[type="radio"]:checked:after {
    transform: translate(-50%, -55%);
    color: var(--positive);
    color: var(--maincolor);
}





input[type="checkbox"].toggle {
    width: 5rem;
    background: var(--darkcolor);
    border-radius: 1.5rem;
    box-shadow: inset 0px 0px 5px 0px #00000011;
}

input[type="checkbox"].toggle:checked {
    background: var(--success) !important;
}

input[type="checkbox"].toggle::after {
    content: '';
    top: 0.5rem;
    left: 0.5rem;
    height: 2rem;
    width: 2rem;
    background: var(--lightcolor);
    border-radius: 1rem;
    box-shadow: 0px 0px 5px 0px #00000011;
}

input[type="checkbox"].toggle:checked:after {
    left: 2.5rem;
    background: var(--lightcolor);
}

hr {
    display: block;
    width: calc(100% - 2rem);
    /* margin-bottom: var(--space); */
    border-color: var(--accentcolor);
    border-style: solid none none none;
    height: 0;
    border-width: .5rem;
    margin: 0;
    margin-left: 1rem;
}

hr[v] {
    display: inline-block;
    height: 100%;
    width: 0;
    padding: 0;
    margin: 0;
    border-style: none solid none none;
}



input:focus-visible,
select:focus-visible {
    outline: none;
}

textarea {
    /* display: block; */
    /* resize: none; */
    /* font-size: 1rem; */
    /* font-family: monospace; */
}

input::placeholder,
textarea::placeholder {
    opacity: .5;
}

input.missing,
textarea.missing {
    background: #ff000011;
    outline: 2px solid red;
    outline-offset: 2px;
}

/* MISCELLANEOUS */

[copy] {
    cursor: pointer !important;
}

/* PSEUDO */

*::after,
*::before {
    position: absolute;
    display: block;
    box-sizing: border-box;
    transition: var(--quick);
}

::-webkit-scrollbar {
    height: 4px;
    width: 4px;
}

::-webkit-scrollbar-track {
    background: #000
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--darkcolor)
}

::selection {
    color: var(--lightcolor);
    background: var(--darkcolor)
}

:focus-visible {
    outline: none;
}