/* these are the main colors and header image
   replace them with anything you want! */
:root {
    --header-bg: url('images/header.png');
    --accent-color: #9e3668;
    --link-color: #9e3668;
    --bg-color: #ffffff;
    --bg-color2: #e1f2fb;
    --text-color: #FFFFFF;
    --favorite-color: #fde3f0;
    --darkest-pink: #691a40;
    /* these are semi-transparent! 8-digit hex codes add alpha :) */
    --lighter-color: #ffffff4d;
    --darker-color: #00000080;
}
/* you can get hex codes from sites like this:
   https://palettes.shecodes.io/
   i just looked up "css color templates" to find that link! */

/* this applies to all the content */
* {
    color: var(--text-color);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
/* this is for when you select text on the page */
::selection {
    background: var(--accent-color);
    color: var(--bg-color);
}

/* i think having better line spacing helps text to be more readable, but you can remove it if you want */
p {line-height: 1.5em;}

.vertical_dotted_line
{
    border-left: 20px dashed white;
    height: 2000px;
    position: absolute;
    left: 10em;
} 

#content {
    display: flex;
    max-width: 960px;
    margin: auto;
}

body {
  background: url('images/starsbg.png');
}



main {
    position: fixed;
    top: 30%;
    right: 20%;
    padding: 2em;
    text-align: center;
    
main > h1,
main > h2,
main > h3 {
    text-align: center;
    text-shadow: var(--favorite-color) 2px 2px;
}