@import url('https://fonts.googleapis.com/css2?family=Gluten:wght@100..900&family=Sansation:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-primary: #BC2F42;
    --bg-secondary: #FCC4E8;
    --bg-accent: #DDE8B9;
    --bg-parent: #f5708285;

    --text-primary: #1A1A1A;
    --text-secondary: #4D4D4D;
    --text-accent: #AB2B3C;
    --text-accent-2: #FDD8F0;
    --text-accent-3: #580000;
    --text-white: #fff;
    --text-white-secondary: #F0F0F0;
    --text-white-tertiary: #d8d8d8;

    --spacer-bg: #BC2F42;

    --category-bg:#C43145CC;
    --input-bg:#ebebeb;
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    font-family: "Sansation", sans-serif;
}

a,
a:link,
a:visited {
    text-decoration: none;
    color: inherit;
}

hr {
    display: block;
    border: none;

    height: 1px;
    width: 100%;
    
    background-color: var(--spacer-bg);
}

.heading-primary,
.heading-secondary {
    font-family: "Gluten", sans-serif;
    font-weight: 500;
}

.heading-primary {
    font-size: 7.808rem;
    color: var(--text-white);
    letter-spacing: 2%;
}

.heading-secondary {
    font-size: 3.883rem;
    color: var(--text-accent);
}

.heading-tertiary {
    font-size: 2.0rem;
    font-family: Gluten;
}

/* Utility Classes */

.flex-centered__vert {
    display: flex;
    align-items: center;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

/* Utility Elements */

.button {
    width: min-content;
    text-wrap: nowrap;

    border-radius: 5px;

    display: flex;
    gap: 0.4rem;
    font-size: 1.6rem;
    padding: .8rem 1.2rem;
    font-weight: 600;
    background-color: var(--bg-secondary);

    transition: all 150ms;
}

.button__outline {
    background-color: transparent;
    border: 1px solid var(--bg-secondary);
    color: var(--bg-secondary);
}