@import '/fonts/HelveticaNeueMedium.otf';

@font-face {
    font-family: 'HelveticaNeueMedium';
    src: url('/fonts/HelveticaNeueMedium.otf') format('opentype');
}

:root {
    font-size: clamp(16px, 2vw, 22px);
}

body {
    margin: 0;
    font-size: 1rem;
    background-color: var(--background);
    color: var(--text);
    font-family: 'HelveticaNeueMedium', 'Roboto', sans-serif;
}

/* width */
::-webkit-scrollbar {
    width: 6px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--background);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--secondary);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

svg {
    fill: currentColor;
    height: 1rem;
}

a, button {
    all: unset;
    cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

.underline::after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    background-color: var(--accent);
    transition: width .3s;
}

.underline:hover::after {
    width: 100%;
}