:root {
  --bg-image: url('images/sprinklesbkg.png');
  --header-image: url('images/Banner.png');
  
  /*colors*/
  --header-background: #DDFFFC;
  --header-color: #FAA8CB;
  --dark-pink: #AA336A;
  --box-yellow: #FFE876;
  --box-green: #BCE29F;
  --box-pink: #FF96BE;
}

body {
  margin: 0;
  background-color: #000000;
  background-size: 65px;
  font-size: 0.875em;
  background-image: var(--bg-image);
}

* {
 box-sizing: border-box;
}

#wrapper {
  margin: 0 auto;
  max-width: 1100px;
}

#wrapper a {
 color: var(--dark-pink);
 text-decoration: none;
 /*Line above removes underline from links*/
}

#header {
  width: 100%;
  background-color: var(--header-background);
  /*header color here*/
  border: 3px double #333;
  text-align: center;
  z-index: 1;
  height: 280px;
  background-image: var(--header-image);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.headerText {
  border: 3px double #333;
  background: var(--header-background);
  text-align: center;
  margin-top: 15px;
  margin-left: 0px;
  top: 0;
  height: auto;
  color: var(--header-color);
  font-family: 'Lilita One', cursive;
}

.box h1, .box h2, .box h3, .box h4 {
  background: var(--header-background);
  margin: 0;
  padding: 0.35em 0.25em 0.3em 0.25em;
  text-align: center;
  border-bottom: 3px double #333;
  color: var(--header-color);
  font-family: 'Lilita One', cursive;
}

.box {
  border: 3px double #333;
  background: #fff;
  padding: 0;
}

#navbar {
  width: 100%; 
}

#navbar ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
  justify-content: center;
  align-items: center;
}

#navbar li {
  padding-top: 10px; 
}

#flex {
  display: flex;
}

aside {
  width: 180px;
  padding-top: 10px;
}

main{
  flex: 1;
  margin-top: 10px;
  font-family: "Lilita One";
  order: 2;
}

#sidebar-left {
  order: 1;
  margin-right: 10px;
}

#sidebar-right {
  order: 3;
  margin-left: 10px;
}

.inner {
  padding: 0.5em 1em 0.3em 1em;
  font-family: 'Karla', sans-serif;
}

.updateBox {
  border: 3px double #333;
  background: #fff;
  padding: 0;
  height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #FFB8E3 #FFDEF2;
}

.updateLog {
  padding: 0 0.4em 0 0.4em;
  font-family: 'Karla', sans-serif;
  font-size: 0.9em;
}

.updateList {
  margin-left: -20px;
  display: inline-block;
}

.itemBox {
  display: inline-block;
  width: 17.8%;
  margin: 1%; 
  border: 0.5px solid black;
  padding: 1%;
}

.itemBoxYellow {
  display: inline-block;
  width: 17.8%;
  margin: 1%; 
  border: 0.5px solid black;
  padding: 1%;
  background-color: var(--box-yellow);
}

.itemBoxGreen {
  display: inline-block;
  width: 17.8%;
  margin: 1%; 
  border: 0.5px solid black;
  padding: 1%;
  background-color: var(--box-green);
}

.itemBoxPink {
  display: inline-block;
  width: 17.8%;
  margin: 1%; 
  border: 0.5px solid black;
  padding: 1%;
  background-color: var(--box-pink);
}

.itemImage {
  float: left;
  width: 98%;
  height: 200px;
  object-fit: contain;
}

.subheading {
  font-family: 'Karla'; 
  font-size: 1.12em; 
  margin-bottom: -5%;
  display: inline-block;
}

.text {
  font-family: 'Karla', sans-serif;
  text-align: center;
}

.icon {
  width: 95%;
  object-fit: contain;
}

.blinkies {
  width: 100%;
  object-fit: contain;
}

.links {
  margin-left: 18%; 
}

/* This code is for the blog */
  
/* hides the title */
  p.rss-title {
    display:none;
  }
  
  li.rss-item {
    list-style-type:none;   /* this removes the bullet points */
    margin-bottom:20px; /* adds spacing under entry content */
  }

/* this styles the blog title link */
  li.rss-item a {
    font-weight:bold;
    font-size:20px;
    text-decoration:none; /* removes underline */
    color: var(--header-color);
    font-family: "Lilita One";
  }
  
  /* this styles the date */
  .rss-date {
  /* need this to add padding */
    display:inline-block;
    padding-top:10px;
    padding-bottom:10px;
    font-style:italic;
    font-family: 'Karla';
  }

  a.rss-item:last-child {
    display:none;
  }
  
  /* End of blog code */

@media only screen and (max-width: 800px) {
  #flex {
    flex-wrap: wrap;
  }

  aside {
    width: 100%;
  }

  /* the order of the items is adjusted here for responsiveness!
     since the sidebars would be too small on a mobile device.
     feel free to play around with the order!
  */
  main {
    order: 1;
  }

  #sidebar-left {
    order: 2;
    margin-right: 0px;
  }

  #sidebar-right {
    order: 3;
    margin-left: 0px;
  }

  #navbar ul {
    flex-wrap: wrap;
  }
  
  .blinkies {
    width: 45%;
    height: auto;
    margin-left: 2%;
    margin-right: 2%;
  }
  
  .links {
    height: 50px;
    margin-left: 5%; 
  }
  
  .updateBox {
    display: list-item;
  }
  
  .itemBox {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  
  .itemBoxYellow {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  
  .itemBoxGreen {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  
  .itemBoxPink {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  
  .shrineImages {
    width: 100%;
  }
}