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

:root {
    --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
    --font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
    --font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);

    --color-bg: hsl(12, 5%, 4%);
    --color-text: hsl(10, 21%, 95%);
    --color-border: hsl(17, 24%, 90%);

    --gradient: linear-gradient(150deg, rgba(255, 0, 0, 1) 0%, rgba(255, 76, 0, 1) 11%, rgba(196, 52, 43, 1) 22%, rgba(132, 26, 90, 1) 34%, rgba(90, 9, 121, 1) 48%, rgba(142, 30, 83, 1) 65%, rgba(187, 48, 50, 1) 80%, rgba(255, 76, 0, 1) 92%, rgba(255, 0, 0, 1) 100%);
    --animation-gradient: pulse 4s ease-in-out infinite;
    --drop-shadow: drop-shadow(0 0 0.5rem rgba(132, 26, 90, 0.7));
    --transition-cubic-bezier: cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes pulse {

    0%,
    100% {
        background-position-y: 0%;
    }

    50% {
        background-position-y: 100%;
    }
}

html {
    font-family: Quicksand, system-ui, sans-serif;
    font-size: var(--font-size-base);
    color: var(--color-text);
    background: var(--color-bg);
}

p {
    line-height: 1.75;
}

body {
    margin: 0;
}

h1 {
    font-size: var(--font-size-xl);
}

h2 {
    font-size: var(--font-size-lg);
}

code {
    font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
        Bitstream Vera Sans Mono, Courier New, monospace;
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--color-text);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gradient);
}

.wb-body {
    background: var(--color-bg) !important;
}

.text-gradient,
strong,
em {
    font-weight: 900;
    background-image: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 100% 200%;
    background-position-y: 100%;
    border-radius: 0.4rem;
    animation: var(--animation-gradient);
    transition: filter 0.6s var(--transition-cubic-bezier);
}

.text-gradient:is(:hover),
strong:is(:hover),
em:is(:hover) {
    filter: var(--drop-shadow);
}