/*@font-face { font-family: 'oswald'; src: url('./fonts/Oswald-VariableFont_wght.ttf') format('truetype'); }
@font-face { font-family: 'mixta'; src: url('./fonts/mixta/Mixta-Ess-Didone-Regular.otf') format('truetype'); }
@font-face { font-family: 'saniretro'; src: url('./fonts/Saniretro.ttf') format('truetype'); }
@font-face { font-family: 'klavika'; src: url('./fonts/klavika-medium.otf') format('truetype'); }
*/
@font-face { font-family: 'saniretro'; src: url('./fonts/saniretro.woff'); }
@font-face { font-family: 'klavika'; src: url('./fonts/klavika.woff'); }

:root{
    --yellow: #fbb914;
    --yellowOp: #fbba14f2;
    --yellowOp2: #fbba145e;
    --red: #ff0000;
    --header-max-height: 15vh;
    --neg-header-max-height: -15vh;
    --header-min-height: 15vh;
    --header-responsive-height: 15vh;
    --font-size-1: 2.3rem;
    --font-size-2: 1.5rem;
    --font-size-3: 1.2rem;
    --font-size-4: 1rem;
}

*{
    box-sizing: border-box;
    font-family: 'klavika';
    letter-spacing: 1px;
    text-decoration: none;
    list-style: none;
    color:#000000;
}
h1{font-size:var(--font-size-1);font-family: 'saniretro';}
h2{font-size:var(--font-size-2);font-family: 'saniretro';}
h3,h4,h5,h6{font-size:var(--font-size-3);}
label, input, select, textarea, button, legend, th{font-size:var(--font-size-3);}
p, span, a, li, td{font-size:var(--font-size-4);}

html,
body{
    width:100%;
    min-height:100%;
    padding:0;
    margin:0;
    overflow-x: hidden;
    scroll-behavior: smooth;
    font-size:16px;
}
body{
    padding-top: var(--header-max-height);
    transition: .3s;
}
body.scrolled{
    padding-top: var(--header-min-height);
}

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

/** ***** SCROLL BAR ***** **/
* {
    scrollbar-width: auto;
    scrollbar-color: #000000 #8c8c8c;
}
*::-webkit-scrollbar {
    width: 10px;
}
*::-webkit-scrollbar-track {
    background: #8c8c8c;
}
*::-webkit-scrollbar-thumb {
    background-color: #000000;
    border-radius: 10px;
    border: 0px outset #ffffff;
}


@media only screen and (max-width: 600px) {
    body,
    body.scrolled{
        padding-top: var(--header-responsive-height);
    }
}