/* Global styles */
:root {
    --blue: hsl(192, 100%, 51%);
    --darker-blue: hsl(193, 96%, 45%);
    --pink: hsl(328, 100%, 54%);
    --green: hsl(94, 100%, 54%);
    --yellow: hsl(58, 100%, 50%);
    --purple: hsl(254, 88%, 20%);
    --white: hsl(0, 0%, 100%);
}

html, body {
    box-sizing: border-box;
    font-size: 100%;
    height: 100%;
}


*, *::before, *::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Inter", sans-serif;
    text-decoration: none;
    background-color: white;
    font-size: 28px;
}

 ::-webkit-scrollbar {
    background: none;
}

::-webkit-scrollbar-thumb {
    background-color: var(--blue);
    border-radius: 10px;
    transition: background-color 1s ease;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--darker-blue);
}


@font-face {
    font-family: 'Bitter';
    src: url('../assets/Bitter-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Bitter-italic';
    src: url('../assets/Bitter-Italic-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Cinzel';
    src: url('../assets/Cinzel-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Fascinate';
    src: url('../assets/Fascinate-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'PermanentMarker';
    src: url('../assets/PermanentMarker-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'PirataOne';
    src: url('../assets/PirataOne-Regular.ttf') format('truetype');
}