* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

span {
    display: block;
    color: var(--text-color);
}

p {
    font-family: "Inter", "Google Sans", monospace;
    color: var(--text-color);
}

button {
    font-family: "Inter", "Google Sans", monospace;
    color: var(--text-color);
}

div {
    color: var(--text-color);
}

a {
    font-family: "Inter", "Google Sans";
    color: var(--text-color);
}

body {
    background-color: var(--background-color);
    height: auto;
}

html {
    scroll-behavior: smooth;
}

html,
body {
    background-color: var(--background-color);
    transition: 0.5s;
}

.dark body {
    background: var(--background-color);
    color: var(--text-color);
    border-color: var(--border-color);
    font-family: var(--font-family);
    transition: 0.5s;
}

:root {
    /* Light mode colors */
    --background-color: #ececec;
    --heading-color: #333;
    --text-color: #222;
    --logo-shadow-1: #444;
    --logo-shadow-2: #222;
    --logo-shadow-3: #000;
    --glass-bg: rgba(254, 254, 254, 0.6);
    --glass-border: rgba(0, 0, 0, 0.1);
    --glass-shadow: rgba(0, 0, 0, 0.04);
}

.dark {
    --background-color: #181818;
    --text-color: #f8f8f8;
    --border-color: white;
    --logo-shadow-1: #7b42f6;
    --logo-shadow-2: #6330ce;
    --logo-shadow-3: #4b23a0;
    --glass-bg: rgba(20, 20, 20, 0.4);
    --glass-border: rgba(255, 255, 255, 0.15);
    --glass-shadow: rgba(0, 0, 0, 0.4);
}