@font-face {
    font-family: 'DynaPuff';
    src: url('../DynaPuff-VariableFont_wdth,wght.ttf') format('truetype');
}

:root[data-theme="light"] {
    --text: #160a15;
    --background: #ffaef9;
    --primary: #c739bd;
    --secondary: #e893e2;
    --accent: #e550db;
}
:root[data-theme="dark"] {
    --text: #f6eaf5;
    --background: #52004c;
    --primary: #c738bd;
    --secondary: #6d1768;
    --accent: #ad1aa3;
}
:root[data-theme="light"] {
    --text-50: #f7edf6;
    --text-100: #efdcee;
    --text-200: #dfb9dc;
    --text-300: #d095cb;
    --text-400: #c072b9;
    --text-500: #b04fa8;
    --text-600: #8d3f86;
    --text-700: #6a2f65;
    --text-800: #462043;
    --text-900: #231022;
    --text-950: #120811;

    --background-50: #ffe5fd;
    --background-100: #ffccfc;
    --background-200: #ff99f8;
    --background-300: #ff66f5;
    --background-400: #ff33f1;
    --background-500: #ff00ee;
    --background-600: #cc00be;
    --background-700: #99008f;
    --background-800: #66005f;
    --background-900: #330030;
    --background-950: #1a0018;

    --primary-50: #f9ebf8;
    --primary-100: #f4d7f2;
    --primary-200: #e9afe5;
    --primary-300: #dd88d8;
    --primary-400: #d260cb;
    --primary-500: #c738bd;
    --primary-600: #9f2d98;
    --primary-700: #772272;
    --primary-800: #50164c;
    --primary-900: #280b26;
    --primary-950: #140613;

    --secondary-50: #fbeaf9;
    --secondary-100: #f6d5f4;
    --secondary-200: #edabe9;
    --secondary-300: #e481de;
    --secondary-400: #db57d2;
    --secondary-500: #d22dc7;
    --secondary-600: #a8249f;
    --secondary-700: #7e1b78;
    --secondary-800: #541250;
    --secondary-900: #2a0928;
    --secondary-950: #150414;

    --accent-50: #fce9fa;
    --accent-100: #f8d3f6;
    --accent-200: #f2a6ed;
    --accent-300: #eb7ae4;
    --accent-400: #e44eda;
    --accent-500: #de21d1;
    --accent-600: #b11ba7;
    --accent-700: #85147e;
    --accent-800: #590d54;
    --accent-900: #2c072a;
    --accent-950: #160315;

}
:root[data-theme="dark"] {
    --text-50: #120811;
    --text-100: #240f22;
    --text-200: #471f44;
    --text-300: #6b2e66;
    --text-400: #8f3d88;
    --text-500: #b34daa;
    --text-600: #c270bb;
    --text-700: #d194cc;
    --text-800: #e0b8dd;
    --text-900: #f0dbee;
    --text-950: #f7edf7;

    --background-50: #1a0018;
    --background-100: #330030;
    --background-200: #66005f;
    --background-300: #99008f;
    --background-400: #cc00be;
    --background-500: #ff00ee;
    --background-600: #ff33f1;
    --background-700: #ff66f5;
    --background-800: #ff99f8;
    --background-900: #ffccfc;
    --background-950: #ffe5fd;

    --primary-50: #140613;
    --primary-100: #280b26;
    --primary-200: #50164c;
    --primary-300: #772272;
    --primary-400: #9f2d98;
    --primary-500: #c738bd;
    --primary-600: #d260cb;
    --primary-700: #dd88d8;
    --primary-800: #e9afe5;
    --primary-900: #f4d7f2;
    --primary-950: #f9ebf8;

    --secondary-50: #150414;
    --secondary-100: #2a0928;
    --secondary-200: #541251;
    --secondary-300: #7e1b79;
    --secondary-400: #a824a2;
    --secondary-500: #d22dca;
    --secondary-600: #db57d5;
    --secondary-700: #e481df;
    --secondary-800: #edabea;
    --secondary-900: #f6d5f4;
    --secondary-950: #fbeafa;

    --accent-50: #160315;
    --accent-100: #2c072a;
    --accent-200: #590d54;
    --accent-300: #85147e;
    --accent-400: #b11ba7;
    --accent-500: #de21d1;
    --accent-600: #e44eda;
    --accent-700: #eb7ae4;
    --accent-800: #f2a6ed;
    --accent-900: #f8d3f6;
    --accent-950: #fce9fa;

}

body {
    font-family: 'DynaPuff', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text);
    background-color: var(--background);
    margin: 0;
}

#background {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, var(--background), var(--background-100));
    z-index: -1;
}
.center{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    width: 100%;
}

button {
    font-family: 'DynaPuff', sans-serif;
    font-size: 20px;
    line-height: 1.5;
    color: var(--text);
    background-color: var(--background);
    border: 1px solid var(--accent);
    border-radius: 4px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}
#img {
    width: 20%;
    height: auto;
}
@media (max-width:  1000px) {
    #img {
        width: 90%;
    }
}