/* https://coolors.co/palette/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff */

:root {
    --background: #10002b;
    --text: #fff;
    --title1: #9D4EDD;
    --title2: #C77DFF;
    --title3: #E0AAFF;
    --subtext: #7B2CBF;
}

html, body, #header-bg {
    margin: 0;
    padding: 0;
}
body {
    background-color: var(--background);
    color: var(--text);
    min-height: 100vh;
    font-family: monospace;
}
#header-bg, #content {
    padding-left: 30px;
    padding-right: 30px;
}
h1 {
    font-size: 2.5rem;
    color: var(--title1);
    text-shadow: 0px 0px 10px var(--title1);
    padding-top: 48px;
}
h2 {
    font-size: 2rem;
    color: var(--title2);
    text-shadow: 0px 0px 10px var(--title2);
    padding-top: 32px;
}
h3 {
    font-size: 1.5rem;
    color: var(--title3);
    text-shadow: 0px 0px 10px var(--title3);
    padding-top: 32px;
}
h4 {
    font-size: 1.2rem;
    color: var(--title3);
    padding-top: 12px;
}
p, li {
    font-size: 1rem;
    color: var(--text);
}
a {
    color: var(--title2) !important;
}

p, li, a, h4, h3 {
    text-shadow: 3px 3px 2px rgba(0,0,0,0.6);
}
h1 {
    text-shadow: 5px 5px 4px rgba(0,0,0,0.6);
}
h2 {
    text-shadow: 4px 4px 3px rgba(0,0,0,0.6);
}

.subtext {
    color: var(--subtext)
}

#header-bg {
    background-image: url("./background.png");
    background-size: cover;
    background-position: 50% 25%;
}