/* these are the main colors and header image
   replace them with anything you want! */
:root {
    --header-bg: url('images/header.png');
    --accent-color: #BF290D;
    --link-color: #BF290D;
    --bg-color: #966969;
    --bg-color2: #FFC9C9;
    --text-color: #000000;
    --favorite-color: #FFC9C9;
    /* you can change the stripe colors easily from here */
    --stripe-color: #000000;
    --stripe-color2: #FFC9C9;
    /* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #565158 #050505;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 16px;
  }

  *::-webkit-scrollbar-track {
    background: #050505;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #565158;
    border-radius: 10px;
    border: 3px solid #ffffff;
  }
 
  .gallery { /* this is the main div that wraps your gallery */
  display:flex;
  flex-wrap:wrap;
  width:800px; /* this can be modified to make the gallery wider */
}

.gallery img {
  width:200px; /* this sets the width for every image */
  height:150px; /* this sets the height for every image. Try setting it to 'auto' and see how it looks weird since every image has a slightly different height? */
  object-fit:cover; /* this crops the image so they are all the same size. This might be an issue if you have landscape AND portrait images. Feel free to take this property out temporarily to see exactly what it does! */
  
}

/* this is the div which CROPS every image */
.gallery > div {
  width:200px; /* this should match the image height */
  height:150px; /* this should match the image width */
  margin-right:10px; /* this controls the gaps between the images */
  margin-bottom:10px; /* this controls the gaps between the images */
}

/* this resizes the image on hover. note that objects in 'portrait'  */
.gallery img:hover {
  transform:scale(2.5); /* this scales up the image when you hover over it */
  object-fit:contain; /* this keeps the aspect ratio of the original images*/
}
}

/* 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);
/* change the font here, it's set up to all use the same one */
    font-family: monospace;
    border-radius: 1em;
}
/* this is for when you select text on the page */
::selection {
    background: var(--accent-color);
    color: var(--bg-color);
}

body {
    background-color: #000000;
    margin: 0;
}
/* 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: #966969;
/* you can add the image url in :root (at the top) if you want */
    background: var(--header-bg);
    background-size: 100%;
    background-position: center;
/* change the minimum height if you want it to take up more/less space */
    min-height: 200px;
/* can also limit the size of the header if you don't want to fill up the top. i recommend at least 800px tho! */
    /*max-width: 980px;*/
    margin: 0 auto;
    border-top: 4px solid var(--text-color);
    border-bottom: 4px solid var(--text-color);
/* i have a default border-radius set, but i didn't want rounded corners on this element */
    border-radius: 0;
}

/* this is your site title displayed at the top of the page */
header > h1 {
    margin: 20px auto;
    border-radius: .3em;
    max-width: 900px;
    padding: 12px;
    font-size: 4em;
/* you can change the text-align to center or right if you want it placed differently */
    text-align: center;
    background-color: var(--bg-color);
    border: 2px solid var(--text-color);
    text-shadow: var(--bg-color2) 1px 1px 3px;
}

nav {
    padding: 1em;
    margin: 1em;
    font-weight: bold;
}

nav > ul {
    max-width: 960px;
    margin: auto;
    line-height: 3rem;
/* 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 {
    text-align: center;
}
nav li > a {
    background-color: var(--favorite-color);
    box-shadow: #000000 4px 4px;
    padding: .5em 3em;
/* this takes away the link underline */
    text-decoration: none;
}
nav li > a:hover {
    box-shadow: var(--text-color) 4px 4px;
}

a {
    color: var(--link-color);
    border-radius: .3em;
    text-shadow: var(--bg-color) 1px 1px 2px;
    font-weight: bold;
    transition: background-color 400ms ease-out;
}
a:visited {
    color: var(--text-color);
}
a:hover {
    background-color: var(--accent-color);
    color: var(--text-color);
}

/* you can change this to anything you want :) */
ul { list-style-type: "❤︎ "; }

#sidebar {
    /* made the stripe bg with a generator:
    https://stripesgenerator.com/
     */
    background-image: linear-gradient(45deg, var(--stripe-color) 25%, var(--stripe-color2) 25%, var(--stripe-color2) 50%, var(--stripe-color) 50%, var(--stripe-color) 75%, var(--stripe-color2) 75%, var(--stripe-color2) 100%);
    background-size: 65.05px 65.05px;
    min-width: 220px;
    margin: 1em;
    padding: 1em;
    border: 2px solid var(--text-color);
    box-shadow: var(--accent-color) 4px 4px;
}

#avatar {
    margin: .5em auto;
    box-shadow: var(--accent-color) 4px 4px;
/* image size is 160px so i made its container a little bigger to fit the borders */
    max-width: 164px;
    max-height: 164px;
    border-radius: 1.5em;
}
#avatar img {
    background: var(--lighter-color);
    max-width: 160px;
    border: 2px solid var(--text-color);
    border-radius: 1.5em;
}

#bio {
    margin: 1em;
    background: var(--favorite-color);
    border: 2px solid var(--text-color);
    box-shadow: var(--accent-color) 4px 4px;
    text-shadow: var(--bg-color2) 0 0 2px;
}
#bio p { margin: 1em; }

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

main {
    background-color: var(--favorite-color);
    padding: 1em 2em;
    margin: 1em;
    border: 2px solid var(--text-color);
    box-shadow: var(--accent-color) 4px 4px;
    text-shadow: var(--bg-color2) 1px 1px 1px;
}

main > h1,
main > h2,
main > h3 {
    background-color: var(--bg-color);
    border-radius: .4em;
    padding: .2em .5em;
    text-shadow: var(--bg-color2) 1px 1px 3px;
}

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

footer {
    background-color: var(--bg-color);
    text-shadow: var(--bg-color2) 1px 1px 3px;
    text-align: center;
    font-size: small;
    padding: 1em;
    margin: 1em auto;
    max-width: 960px;
}

/* these are the mobile styles! */
@media only screen and (max-width: 800px) {
    #content {
        flex-wrap: wrap;
    }
    #sidebar {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        border: none;
    }
    header {min-height: 160px;}
    header > h1 { 
        font-size: 3em;
        margin: .4em;
    }
    nav > ul {
    /* this stuff makes it wrap around on mobile */
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }
    #avatar {margin: 0 1em;}
    #bio {width: 50%;}
    main {margin: 0 1em;}
    #sidebar ul {   
        margin: 0 1em;
        display: flex;
        flex-wrap: wrap;
        line-height: 2em;
    }
    #sidebar li {
        padding-left: 0;
        margin: .3em 1em;
    }
    .row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

    footer {
      
        margin: 1em;
    }
    
}