* {
  box-sizing: border-box;
}

@font-face {
  font-family: 'garden'; /* Choose any name you like */
  src: url('/gardenLights.ttf') format('truetype');
}

@font-face {
  font-family: 'curly'; /* Choose any name you like */
  src: url('/jheriCurls.ttf') format('truetype');
}

body{
  margin: 3em;
  background: linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15)), url('https://i.pinimg.com/736x/55/c6/cc/55c6cc26e815b64fe524ac69af5b09c8.jpg');
  background-repeat: repeat; 
  /*background-size: cover;
  background-image: url('https://i.pinimg.com/736x/55/c6/cc/55c6cc26e815b64fe524ac69af5b09c8.jpg');
  */
}
.wrapper {
  font-family: 'garden';
  border-radius: 3px;
  max-width: 1000px;
  margin: 0 auto;
}
#wrapper{
  padding: 0.5em;
  z-index: 4;
  background-color: #525d3a;
}

.wrapper > div {
  border-style: solid;
  border-radius: 3px;
  background-color: #d9e39a; /*#c2d63a*/
  padding: 0;
  border-color: #c2d63a;
  color: #525d3a; /* #525d3a.. light green: #d4ef8e;*/
  border-width: 2px;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 10px;
  grid-template-rows: min-content auto;
}
#banner {
  /*-webkit-text-stroke: 0.25px #525d3a;*/
  grid-column-start: span 5;
  grid-row:1;
  background-image: url('https://i.pinimg.com/1200x/d2/5b/3f/d25b3ff249ba3935fcf87833cbdc82ce.jpg');
  background-position: center;
  background-repeat: repeat;
  background-size: cover;
  box-shadow: 0 0 8px 8px rgb(179, 209, 132) inset;
  height: 200px;
  /*
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: flex-end;
  */
  position: relative;
  z-index: 5;  
  padding-top: 10px;  
}

.banner-text{
  margin: 0;
  font-family: 'curly';
  font-size: 3em;
  background: radial-gradient(rgb(179, 209, 132) 30%, transparent 70%);
  /*-webkit-text-stroke: 1px #525d3a;*/
  color: #525d3a; /*#525d3a; #393e54*/
  text-align: center;
}


#stamp-row{
  border: transparent;
  background-color: transparent;
  grid-row: 2;
  grid-column: span 5;
  display: inline-block;
  white-space: nowrap;
  overflow-x: auto;
  }
.stamp-row{
  font-size: 0;
  line-height: 0;
  margin-bottom: 10px;
}

.stamp-row img {
  height: 46px; /* Standard stamp height */
  image-rendering: pixelated; /*Keeps crispy pixels */
}


.leftside {
  grid-column: 1;
  grid-row: 3/6;
  margin-bottom: 10px;
  
}

#pfp-container{
  width: 100%;
  border-top: 10px solid transparent;
  border-image-source: url('https://64.media.tumblr.com/737d783a8e44ec3e8041644dd16b6517/bf7d7fd19f9f8777-17/s500x750/f4c619e72829524e83f10ab6be7c02b4bc7ba0d3.gifv');
  border-image-slice: 30;
  border-image-width: 1 0 0 0;
  
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pfp-border{
  border: 10px solid transparent;
  border-image: url("https://i.pinimg.com/originals/d0/d2/4b/d0d24ba3c2e5b5a7d4890cec56f37b89.gif") 30;
  border-image-outset: 0;
  width: 150px;
  height: 150px;
}

.pfp{
  width: 100%;
  height: 100%;
  background-image: url('https://i.pinimg.com/736x/74/2a/e9/742ae9ebcbcd8870ef9160202b682669.jpg');
  background-size: cover;
}



#bug, #drawing{
  width: 60px;
  height: 60px;
  }

.intro {
  grid-column-start: span 3;
  grid-row: 3;
  margin-bottom: 10px;
}
.rightside {
  grid-column-start: 5;
  grid-row: 3;
  margin-bottom: 10px;
}

#blog-title-background{
  background-image: url('https://i.pinimg.com/736x/5b/52/a5/5b52a55aa451414c5f5e87d5065e1b39.jpg');
  margin: 0;
  height: 60px;
  /*
   border-bottom: 40px solid transparent;
   border-image-source: url('https://i.pinimg.com/736x/78/93/81/789381c1372d7a1a78916b9ee8aba78f.jpg');
   border-image-slice: 80;
   border-image-repeat: repeat;
   border-image-outset: 1;
*/
  /*border-image-width: 0 0 1 0;*/
}
#blog-title{
  margin: 0px;
  font-family: "curly";
  -webkit-text-stroke: 0.25px #525d3a;
  text-align: center;
  font-size:35px;
}

.blog {
  height: 300px;
  grid-column-start: span 3;
  grid-row: 4;
  overflow-y: auto;
}

.blogPost{
  margin: 10px;
  padding: 10px;
  border-style: solid;
  background-color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255,255,255,1);
  border-width: 3px;
  border-radius: 3px;
}

.blogBody{
  font-size: 18px;  
  font-family: "Verdana";
  background-color: rgba(255,255,255,1);
  border-radius: 3px;
  padding: 8px;
}

.blogPostHeader{
  font-size: 1.5em;
  margin: 0;
}

.playlist {
  grid-column-start: span 1;
  grid-row: 4;
}

#credits{
  grid-row: 5;  
}