/* variables */

:root {

    --brand-accent: #1C1D20;
    --brand-light-gray: #141517;
    --brand-dark: #FFFFFF;

    --color-text: #020202;
    --color-white: #ffffff;

}


/* global */

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
li, ul {padding: 0; margin: 0; list-style: none;}

::selection {background-color: var(--brand-accent); color: var(--color-white); text-shadow: none;}
::-moz-selection {background-color: var(--brand-accent); color: var(--color-white); text-shadow: none;}

html, body {
    width: 100%;
    -webkit-font-smoothing: antialiased;
    position: relative;
    background-color: var(--color-dark);
}

canvas, img, video {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

body {
    -webkit-font-smoothing: antialiased;
    font-family: 'KF Regular', sans-serif;
    color: var(--color-text);
    line-height: 1.4;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    font-size: clamp(16px, 1.2vw, 19px);
    background-color: var(--color-white);
}


/* typography - default */

h1, h2, h3, h4, h5, h6, p, a, li, ul, ol, span, strong, em  {padding: 0; margin: 0; font-style: normal; letter-spacing: normal;}
h1:last-child, h2:last-child, h3:last-child, h4:last-child, p:last-child, p.big:last-child, p.small:last-child, a:last-child, strong:last-child  {margin-bottom: 0;}

h1 {
    font-family: 'KF Bold', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: clamp(3.25em, 7vw, 8em);
    line-height: 1.065;
    font-size: calc(clamp(3.25em, 7vw, 8em) * .875);
}
  
h2 {
    font-family: 'KF Bold', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: calc(clamp(3.25em, 5vw, 4.5em) * .75);
    line-height: 1.065;
}
  
h3 {
    font-family: 'KF Medium', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: clamp(2.66em, 4.65vw, 5.32em);
    line-height: 1.065;
}
  
h4 {
    font-family: 'KF Medium', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: clamp(1.55em, 2.3vw, 2.5em);
    line-height: 1.45;
}

h5 {
    font-family: 'KF Regular', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: .6em;
    line-height: 1.065;
}

h6 {
    font-family: 'KF Regular', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: .6em;
    line-height: 1.065;
}

p {
    font-family: 'KF Light', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1em;
}


/* typography - specific */

.font-light {
    font-family: 'KF Light', sans-serif;
    font-weight: 300;
}
.font-normal {
    font-family: 'KF Regular', sans-serif;
    font-weight: 400;
}
.font-medium {
    font-family: 'KF Medium', sans-serif;
    font-weight: 500;
}
.font-bold {
    font-family: 'KF Bold', sans-serif;
    font-weight: 700;
}
.font-extrabold {
    font-family: 'KF Extra Bold', sans-serif;
    font-weight: 800;
}


/* border-raidus */

.rounded-full {
    border-radius: 9999px;
}
.rounded {
    border-radius: 0.25rem; /* 4px */
}
.rounded-sm {
    border-radius: 0.125rem; /* 2px */
}
.rounded-md {
    border-radius: 0.375rem; /* 6px */
}
.rounded-lg {
    border-radius: 0.5rem; /* 8px */
}
.rounded-xl {
    border-radius: 0.75rem; /* 12px */
}
.rounded-2xl {
    border-radius: 1rem; /* 16px */
}
.rounded-3xl {
    border-radius: 1.5rem; /* 24px */
}


/* sections */

.section-padding {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
}

@media screen and (min-width: 640px){
    :root { 
        --section-padding: 12vh;
    }
}

@media screen and (min-width: 768px){
    :root { 
        --section-padding: max(2.5em, 12vh);
    }
}

@media screen and (min-width: 1024px){
    :root { 
        --section-padding: max(2.5em, 12vh);
    }
}

@media screen and (min-width: 1280px){
    :root { 
        --section-padding: max(2.5em, 12vh);
    }
}

@media screen and (min-width: 1536px){
    :root { 
        --section-padding: max(2.5em, 12vh);
    }
}