/* =========================
   ROOT VARIABLES
========================= */

:root {
    --background-color: #272447;
    --background-accent-color: #2a1e4a;
    --background-accent-color2: #c5b0dd;

    --accent-color: #c3addd;
    --accent-color-hover: #b594d1;

    --primary-text-color: #e9e9e9;
    --secondary-text-color: #141414;

    --side-padding: 80px;
}

/* =========================
   RESET
========================= */

*,
*::before,
*::after {
    box-sizing: border-box;
    position: relative;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Indie Flower", cursive;
    color: var(--primary-text-color);
    background: var(--background-color);

    display: flex;
    flex-direction: column;
    align-items: center;

    ;
}

html, body {
    overflow-x: hidden;
}

/* =========================
   BASE TYPOGRAPHY
========================= */

h1, h2, p {
    text-shadow: 0 4px 20px rgba(0,0,0,0.6);
}