:root {
    --bg: #192E4C;
    --main_text: #EDE3FB;
    --accent: #4A62B0;
    --glow: #EDE3FB;
    --shadow: #192E4C;
    --highlight: #9F9BEA;

    --button_hover:#9F9BEA;
    --button_press:#BAD467;
    --button_main:#4A62B0;

    --link: #BAD467;
    --visited_link: #9F9BEA;
    --link_hover: #EDE3FB;
}

.light {
    --bg: #9F9BEA;
    --main_text: #192E4C;
    --accent: #EDE3FB;
    --glow: #7976c2;
    --shadow: #192E4C;
    --highlight: #4A62B0;

    --button_hover:#192E4C;
    --button_press:#e98ab6;
    --button_main:#EDE3FB;

    --link: #e98ab6;
    --visited_link: #5A4821;
    --link_hover: #4A62B0;
}


/*Link Styling*/
a {
    color: var(--link);
}
a:visited {
    color: var(--visited_link);
}
a:hover {
    color: var(--link_hover);
    text-shadow: 3px 3px 20px var(--glow);
}

h1 {
    text-align: center;
}

h3 {
    text-align: center;
}

/*Body Styling*/
body {
background-color: var(--bg);

font-family: "Trebuchet MS", sans-serif;
color:var(--main_text);
}

/*Profile Image*/
.ghost { position: absolute; top: -85px; left: -85px; width: 200px;}

.button {
    margin: auto;
    background: var(--button_main);
    border: none;
    color: var(--accent);
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
}

.themeButton {
    position: relative;
    display: inline;
    background: var(--button_main);
    border-radius: 4px;
    border: transparent solid;
    padding: 8px;
    margin-left: 150px;
    color: var(--main_text);
}

.themeButton:hover {
    background:var(--button_hover);
    color: var(--bg);
}

.themeButton:active{
        background: var(--button_press);
        color: var(--shadow);
    }

.pageTitle {
    font-size: 50px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--highlight);
}

/*Main Container*/
.container {
    width: 900px;
    display: flex;
    color: var(--main_text);
    margin: auto;
    padding: 20px;
    align-items: center;
}

/*Container Body Style*/
.content {
position: relative;
background: var(--accent);
flex: 3;
margin: auto;
margin-right: 15px;
border-radius: 15px;
padding: 20px;
min-height: 250px;

}

.nav {
background: var(--accent);
flex: 1;
border-radius: 15px;
margin-right: 15px;
padding: 20px;
min-height: 250px;
}

.post {
    position: relative;
    margin: auto;
    margin-top: 15px;
    background-color: var(--link);
    color: var(--accent);
    padding: 15px;
    border-radius: 15px;
}

.post:hover {
    background-color: var(--link_hover);
}