/* these are the main colors and header image
   replace them with anything you want! */
:root {
    --orange-text-color: #E5633B;
    --green-text-color: #265AC1;
    --link-color: #25DDAC;
    --used-link-color: #24A583;
    --highlighted-link-color: #99FFD1;
    --selection-color: #A5FFE1;
    --selection-BG-color: #14B799;
    --orange-border-color: #F99959;
    --purple-border-color: #D479EA;
    --purple-BG-color: #F6D1FF;
    --green-border-color: #61D8CC;
    --green-BG-color: #CFF3F7;
    --blue-border-color: #6E89D8;
    --blue-BG-color: #C9DFFF;
}
/* 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 */
* {
/* change the font here, it's set up to all use the same one */
    font-family: cursive;
}
/* this is for when you select text on the page */
::selection {
    background: var(--selection-BG-color);
    color: var(--selection-color);
}

body {
    background-image: url('Index_BG_7B.png')
}
/* i think having better line spacing helps text to be more readable, but you can remove it if you want */
p {line-height: 0.5em;}

header {
    background-image: url('Index_tiles_6.gif');
      display: flex;
      justify-content: space-around;
      max-width: 1080px;
      padding-top: 3em;
      padding-bottom: 1em;
      margin: 1em 2em;
      text-align: center;
      border: 4px solid var(--purple-border-color);
}

a {
    color: var(--link-color);
    font-weight: bold;
}
a:visited {
    color: var(--used-link-color);
}
a:hover {
    color: var(--highlighted-link-color);
}

#sidebar {
    max-width: 200px;
    margin: 1em;
    padding: 1em;
    color: var(--green-text-color);
}

#avatar {
    margin: auto;
}
#avatar img {
    background-image: url('Index_tiles_8.gif');
    width: 100%;
}

#bio {
    background-image: url('Index_tiles_8.gif');
    border: 4px solid var(--green-border-color);
    text-align: center;
}
#bio p { 
    margin: 1em;
    color: var(--green-text-color);
}

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

nav {margin: auto;}

nav > ul {
    max-width: 200px;
    line-height: 3rem;
/* this line takes away the dot in front of the list items */
    list-style-type: none;
/* and this spaces out the buttons so they're not touching */
    justify-content: space-evenly;
}
nav li {
    text-align: center;
    list-style-image: none;
}
nav li > a {
    font-weight: bold;
    background-color: var(--blue-BG-color);
    border: 4px solid var(--blue-border-color);
    padding: .5em 4em;
/* this takes away the link underline */
    text-decoration: none;
}

main {
  background-image: url('Index_BG_11.png');
    max-width: 800px;
    margin: 2em;
    padding-bottom: 1em;
    border: 4px solid var(--orange-border-color);
    color: var(--orange-text-color);
}

main h1 {
    text-align: center;
    border: 4px solid var(--orange-border-color);
}

main > h1,
main > h2,
main > h3 {
    background-image: url('Index_tiles_1.png');
    padding: .2em .5em;
    margin: 0;
    border: 4px solid var(--orange-border-color);
}

.mews {
    padding: 0 1em;
}

/* a class for centering text and images */
.center { text-align: center;
}


footer {
    text-align: center;
    font-size: small;
    margin: 1em auto;
    max-width: 960px;
    color: gray;
    
}