/* design system */
:root {
    /* colors */
    --color-pink-transparent: rgb(251 175 240 / 70%);
    --color-pink-opaque: rgb(251 175 240);
    --color-turquaz: rgb(104 199 205);
    --color-gray: rgb(243 244 246);
    --color-light-blue-transparent: rgb(236 243 254 /60%);;
    --color-dark-blue-transparent: rgb(55 129 233 /50%);
    --color-black-transparent: rgb(0 0 0 / 20%);

    /* spacing */
    --spacing-500: 5rem; /* 80px */
    --spacing-200: 2rem; /* 32px */
    --spacing-150: 1.5rem; /* 24px */
    --spacing-100: 1rem; /* 16px */
    --spacing-50: 0.5rem; /* 8px */
    --spacing-31_25: 0.3125rem; /* 5px */
    --spacing-12_5: 0.125rem; /* 2px */
}   

/* typography */
@font-face {
    font-family: "Menlo-Regular";
    src: url("../assets/fonts/menlo/Menlo-Regular.ttf");
    font-weight: 400;
}
@font-face {
    font-family: "Menlo-Bold";
    src: url("../assets/fonts/menlo/Menlo-Bold.ttf");
    font-weight: 700;
}

.text-preset-1 {
    font-family: "Menlo-Bold", monospace;
    font-weight: 700;
    font-size: 3rem; /* 48px */
    line-height: 1;
    color: black;
}
.text-preset-2{
    font-family: "Menlo-Bold", monospace;
    font-weight: 700;
    font-size: 1.25rem; /* 20px */
    line-height: 1.75rem; 
    color: black;
}
.text-preset-3{
    font-family: "Menlo-Regular", monospace;
    font-weight: 400;
    font-size: 1.125rem; /* 18px */
    line-height: 1.75rem; 
    color: rgb(31 41 55);
}
.text-preset-4{
    font-family: "Menlo-Regular", monospace;
    font-weight: 400;
    font-size: 0.875rem; /* 14px */
    line-height: 1.25rem;
    color: black;
}