@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&display=swap');

:root {
    --bg: hsl(48, 100%, 97%);
    --bg-2: hsl(51, 33%, 92%);
    --ui: hsl(51, 21%, 88%);
    --ui-2: hsl(50, 14%, 83%);
    --ui-3: hsl(55, 10%, 79%);
    --tx: hsl(0, 3%, 6%);
    --tx-2: hsl(50, 3%, 42%);
    --tx-3: hsl(49, 7%, 70%);
    --re: hsl(3, 62%, 42%);
    --re-2: hsl(5, 61%, 54%);
    --or: hsl(22, 80%, 41%);
    --or-2: hsl(23, 70%, 51%);
    --ye: hsl(45, 99%, 34%);
    --ye-2: hsl(45, 82%, 45%);
    --gr: hsl(73, 84%, 27%);
    --gr-2: hsl(72, 46%, 41%);
    --cy: hsl(175, 57%, 33%);
    --cy-2: hsl(175, 49%, 45%);
    --bl: hsl(212, 68%, 39%);
    --bl-2: hsl(208, 49%, 50%);
    --pu: hsl(259, 42%, 43%);
    --pu-2: hsl(251, 40%, 64%);
    --ma: hsl(326, 55%, 41%);
    --ma-2: hsl(329, 54%, 59%);
}

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

/* Add this to styles.css */
[hidden] {
    display: none !important;
}

body {
    height: 100vh;
    width: 100vw;
    display: flex;
    background-color: var(--bg);
    color: var(--tx);
    font-family: "Inter", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    position: relative;
    color: var(--tx);
    text-decoration: none;
    font-weight: 500;
}

a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: var(--tx);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    background-color: var(--cy)
}

a:hover::after {
    transform: scaleX(1);
}

button {
    font: inherit;
    padding: 0.5rem 0.75rem;
    background-color: transparent;
    border: 1px solid var(--ui-3);
    border-radius: 0.5rem;
    cursor: pointer;
}

button:enabled:hover {
    background-color: var(--bg-2);
}

button:enabled:active {
    border-color: var(--ui);
}

button:disabled {
    cursor: initial;
    opacity: 0.5;
}

input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background-color: transparent;
    border: 1px solid var(--ui-3);
    border-radius: 0.5rem;
    font: inherit;
}