/* these are the main colors and header image
   replace them with anything you want! */
:root {
    --header-bg: url('SparklesByMXJFiles.gif');
    --accent-color: #FF3183;
    --link-color: #FF3183;
    --bg-color: #FFFFFF;
    --bg-color2: #000000;
    --text-color: #8213AB;
    --favorite-color: #FFA6CB;
    /* 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: black;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
/* this is for when you select text on the page */
::selection {
    background: brown;
    color: white;
}

body {
    background-image: url("/pinksparkle.gif");
    background-color: #704930;
    margin: 0;
    height: 100vh;
}
/* 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;}

header {
  background-color: rgba(242, 211, 221, .9);  
/* you can add the image url in :root (at the top) if you want */
    background-size: 100%;
    background-position: center;
/* change the minimum height if you want it to take up more/less space */
    min-height: 200px;
    border-radius: 25px;
    width: 30%;
   margin: 0 auto;
   padding: 1px;
   background-repeat: no-repeat;
   text-align: center;
}

/* this is your site title displayed at the top of the page */
header > h1 {
    margin: 0 auto;
    max-width: 960px;
    padding: 50px;
/* you can change the text-align to center or right if you want it placed differently */
    text-align: center;
    color: #A5AD4C;
    text-shadow: #4F402A 3px 3px; }

nav {
    background-color: transparent;
    padding: 1em;
    font-weight: bold; }

nav > ul {
    max-width: 960px;
    margin: auto;
    line-height: 3rem;
/* this stuff makes it wrap around on mobile */
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
/* this line takes away the dot in front of the list items */
    list-style-type: none;
/* list items have default padding but we don't need it for these */
    padding-left: 0;
/* and this spaces out the buttons so they're not touching */
    justify-content: space-evenly; }
nav li > a {
    background-color: #A5AD4C;
    box-shadow: #4F402A 4px 4px;
    padding: .5em 3em;
/* this takes away the link underline */
    text-decoration: none;
}
nav li > a:hover {
    box-shadow: red 4px 4px;
}

a {
    color: #4F402A;
}
a:visited {
    color: #4F402A;
}
a:hover {
    background-color: purple;
    color: white;
}
/* you can change this to lots of things, i picked square cuz it's like a pixel */
ul { list-style-type: square;
list-style-type: none; }
 
#sidebar {
   background-image: none;
    background-color: #F2D3DD;
/* if you don't like the borders you can remove them or change the size haha */
  
    border-right: 2px solid #EBD650;
    border-radius: 24px;
    min-width: 220px;
    /* making height (auto) will adjust the sidebar to the same height as the main body */
    /* looks like using (px) fixed the issue of making the sidebar small */
    height: 300px;
    list-style-type: none;
  margin: 0 auto;
  padding: 0;
  width: 70px;
  overflow: auto; /* Enable scrolling if the sidebar has too much content */
    
}

#avatar {
    margin: .5em auto;
/* image size is 160px so i made its container a little bigger to fit the borders */
    max-width: 164px;
    max-height: 164px;
}
#avatar img {
    background: rgba(235, 214, 80, .7);
    max-width: 160px;
    border: 2px dashed #4F402A;
}

#bio {
    font-size: smaller;
    margin: 1em;
    background: #EBD650;
    border: 2px dashed #704930;
    box-shadow: #704930 4px 4px;
}
#bio p { margin: 1em; }

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

main {
  border-radius: 10px;
    background-color: #AD854C;
    padding: 2em;
    border-right: 3px solid #4F402A;
}

main > h1,
main > h2 {
    border-bottom: 2px dashed #A5AD4C;
    text-shadow: #4F402A 2px 2px; }

main > h3 {
  border-bottom: 2px dashed #A5AD4C; }

/* made this a class so i can change it to be centered on mobile */
.img-right { float: right; }

footer {
  color: #A5AD4C;
    background-color: #E6A5AD4C;
    text-align: center;
    font-size: small;
    padding: 1em;
    margin-top: auto;
  
}

/* V-- REMINDER: this should ony be used for pages where there isnt enough content (this was used to keep the footer at the bottom)!!! */
/* this affects the sidebar for some reason, now you have to scroll down to see the rest of the content but after editing the height in the #sidebar it alleivates this issue*/
/* I had to use <div class="container"> tag on the entire body to use this!!! and added (height: 100vh;) in the body selector  */ 
/* .container {
 display: flex;
flex-direction: column;
  height: 100%; } */ 

/* these are the mobile styles! */
@media only screen and (max-width: 800px) {
    #content {
        flex-wrap: wrap;
    }
    #header {
       min-height: 10px;
    border-radius: 50px;
    width: auto;
   margin: 0 auto; 
    }
    #sidebar {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        border: none;
    }
    #avatar {margin: 0 1em;}
    #bio {width: 50%;}
    #sidebar ul {   
        margin: 0 1em;
        display: flex;
        flex-wrap: wrap;
        line-height: 2em;
    }
    #sidebar li {
        padding-left: 0;
        margin: .3em 1em;
    }
/* uncomment this line if you want no borders on the main content */
    /*main {border: none;}*/
    .img-right {
        float: none;
        text-align: center;
    }
}