/*-----IMPORTS-----*/
@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');



/*-----VARIABLES------*/
:root {
    --color-neutral-900: rgb(255, 255, 255);
    --color-neutral-700: rgb(233, 233, 233);
    --color-neutral-600: rgb(166, 166, 166);
    --color-neutral-500: rgb(122, 122, 122);
    --color-neutral-300: rgb(66, 66, 66);
    --color-neutral-100: rgb(22, 22, 22);
}



/*-----RESETS-----*/
*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}



/*-----GENERAL-----*/
body {
    padding: 3rem;

    font-family: Urbanist;
    font-weight: 300;
}

h1 {
    margin-top: 2rem;
    margin-bottom: 0.5rem;

    font-size: 2.5rem;
    font-weight: 700;
}

@media (min-width: 720px) {
    h1 {
        font-size: 3rem;
    }
}

@media (min-width: 1200px) {
    h1 {
        font-size: 3.5rem;
    }
}

h2 {
    margin-top: 5rem;
    margin-bottom: 2rem;

    font-size: 1.5rem;
    font-weight: 700;
}

a {
    color: inherit;
    text-underline-offset: 4px;
}

p {
    margin-bottom: 1rem;

    line-height: 1.4;
}

strong {
    font-size: 1.25rem;
    font-weight: 600;
}

.hide {
    display: none;
}