/* ------------------------- Styleguide ® Code by Timur -------------------------------------------------- */

/* ------------------------- Fonts -------------------------------------------------- */

@font-face {
    font-family: 'Golos';
    src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: auto;
}

/* ------------------------- Colors -------------------------------------------------- */

:root {
    --color-dark: #090909;
    --color-gray: #999D9E;
    --color-lightgray: #E9EAEB;
    --color-white: #FFFFFF;
    
    --color-border: rgba(28, 29, 32, 0.175);
    --color-border-solid: #D2D2D2;
    --color-border-light: rgba(255, 255, 255, 0.2);
    --color-border-solid-light: #545557;

    --color-text: #3B3B3B;
    --color-default: #2FA856;

    --animation-primary: all .5s cubic-bezier(.7, 0, .3, 1);
    --animation-fast: all .3s cubic-bezier(.7, 0, .3, 1);
    --animation-smooth: all .7s cubic-bezier(.7, 0, .3, 1);
    --animation-slow: all .9s cubic-bezier(.7, 0, .3, 1);

    --section-padding: clamp(5em, 21vh, 12em);
    --container-padding: clamp(1.5em, 5vw, 2.5em);
    --gap-padding: clamp(1.5em, 4vw, 2.5em); 

    --row-gap: 1.25em;
    --col-gap: 1.25em;
    --title-size: clamp(5em, calc(3vw + 7.75vh), 7.5em);
}

@media screen and (max-width: 1200px){
    :root { 
        --container-padding: 6vw;
    }
}

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

@media screen and (max-width: 540px){

    

}

/* ------------------------- Body -------------------------------------------------- */

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

body {
    -webkit-font-smoothing: antialiased;
    font-family: 'Golos', sans-serif;
    color: var(--color-text);
    font-weight: normal;
    font-style: normal;
    font-size: 18px;
    font-size: clamp(18px, 1.2vw, 22px);
    background-color: var(--color-dark);
}

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

/* Selection */
::selection { background-color: var(--color-white); color: var(--color-dark); text-shadow: none; }
::-moz-selection { background-color: var(--color-white); color: var(--color-dark); text-shadow: none; }

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

svg {
    max-width: none;
    height: auto;
    box-sizing: border-box;
}

audio, canvas, iframe, img, svg, video {
    vertical-align: middle;
}

/* Container */

.container {
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    max-width: 100vw;
}

.main-wrap {
    min-height: 100vh;
}

@media screen and (max-width: 1024px) {
    .main-wrap {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: calc(var(--vh, 1vh) * 100);
    }
}