:root,
html[data-theme='light'] {
    --bg-primary: 248 250 252;
    --bg-secondary: 255 255 255;
    --text-primary: 15 23 42;
    --text-secondary: 51 65 85;
    --border-color: 226 232 240;
    --accent: 37 99 235;
}

html[data-theme='dark'] {
    --bg-primary: 15 23 42;
    --bg-secondary: 30 41 59;
    --text-primary: 248 250 252;
    --text-secondary: 148 163 184;
    --border-color: 51 65 85;
    --accent: 59 130 246;
}

html[data-theme='pink'] {
    --bg-primary: 26 15 23;
    --bg-secondary: 41 24 37;
    --text-primary: 253 242 248;
    --text-secondary: 252 231 243;
    --border-color: 80 37 65;
    --accent: 244 63 94;
}

html[data-theme='orange'] {
    --bg-primary: 28 25 23;
    --bg-secondary: 44 40 38;
    --text-primary: 254 243 199;
    --text-secondary: 253 230 138;
    --border-color: 68 64 60;
    --accent: 249 115 22;
}

.fade-in {
    animation: fadeIn .5s ease-in-out
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.spinner {
    border-top-color: transparent;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border-width: 4px;
    animation: spin 1s linear infinite
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

body {
    font-family: 'Poppins', sans-serif
}

@media (max-width:390px) {
    h1 {
        font-size: 1.625rem
    }

    #theme-button {
        min-width: 8.5rem
    }
}