@import url('https://fonts.googleapis.com/css2?family=Istok+Web:ital,wght@0,400;0,700;1,400;1,700&family=League+Gothic&display=swap');

*{
    padding: 0;
    margin: 0;
    outline: none;
    box-sizing: border-box;
    font-family: "Istok Web", sans-serif;
    scroll-behavior: smooth;
}

:root{
    --grid_columns_config: repeat(auto-fit, minmax(300px, 1fr));
    
    --extra-dark-gray: #151515;
    --dark-gray: #212121;
    --medium-gray: #444444;
    --light-gray: #959595;
    --lighter-gray: #E3E3E3;
    --yellow: #E69004;
    --white: white;

    --p-size: clamp(20px, 5vw, 24px);

    --container-padding: 75px 0;
}

@media screen and (max-width: 450px){
    :root{
        --grid_columns_config: repeat(auto-fit, minmax(200px, 1fr));

        --container-padding: 25px 0;
    }
}

div.container {
    margin: auto;
    width: 1150px;
    max-width: 90%;
}

p{
    font-size: var(--p-size);
}

p.light{
    color: var(--light-gray);
}

p.dark{
    color: var(--medium-gray);
}

p span{
    color: var(--yellow);
    font-weight: bold;
}

h1{
    font-family: "League Gothic";
    font-size: clamp(52px, 5vw, 72px);
    font-weight: 400;
}

h1.light {
    color: var(--white);
}

h2{
    font-weight: bold;
}

h2.light {
    color: var(--white);
}