/* BASE */
/* defines basic tags */

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

html.noscroll{
    overflow: hidden;
}

body{
    position: relative;
    height: 100vh;
    width: 100vw;
    max-width: var(--outerwidth);
    z-index: -1;
    margin: auto;
    background: var(--bodycolor);
}

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

main{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    background: var(--maincolor);
}

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

div{
    padding: var(--space);
    border-radius: var(--radius);
    transition: 250ms;
}

footer{
    background: var(--footercolor);
}

/* ELEMENTS */

nav{
    position: relative;
    box-sizing: border-box;
}

img,video{
    position: relative;
    max-width: 100%;
    height: auto;
}


a,button,input{
    cursor: pointer;
    position: relative;
    display: block;
    text-decoration: none;
    border: none;
    border-radius: var(--radius);
    transition: var(--quick);
}

a.inline,button.inline{
    display: inline;
}

input[type="text"], textarea {
    cursor: text;
    box-sizing: border-box;
    width: 100%;
    padding: 0.5rem 1rem;
    margin: 1rem 0rem!important;
    border: transparent;
    border-radius: var(--radius);
}

input[type="checkbox"] {
    display: inline-block;
    width: auto;
    margin: 1rem 1rem 1rem 0;
    border-radius: var(--radius);
}

textarea {
    display: block;
    resize: none;
}

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

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

/* PSEUDO */

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

::-webkit-scrollbar {width: 5px; height: 5px;}
::-webkit-scrollbar-track {background: #333}
::-webkit-scrollbar-thumb {background:#111;border-radius: 8px;}
::-webkit-scrollbar-thumb:hover {background: var(--darkcolor)}

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