/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */



@import url('https://fonts.googleapis.com/css2?family=Cascadia+Mono:ital,wght@0,200..700;1,200..700&display=swap');



body {
  background-color: #280905;
  background-image: url('https://mixterchestnut.neocities.org/images/xv.png');
	background-position: top;
  font-size: 18px;
  font-family: "Cascadia Mono", sans-serif;
  margin: 0;
}

p {
  line-height: 1.6em; /*I find the default HTML line-height tends to be a bit claustrophobic for main text*/
  text-align: left;
   color: #ffeaea
}

.links{
  text-align: center
}
.pmainpage{
  line-height: 1.6em;
  font-size: 0.9em;
  padding: 4px 2% 6px 19%;
  color: #ffeaea
  
}

hr {
  border: solid #ffeaea;
  border-width: 2px 0 0 0;
}

img {
  max-width: 100%;
  height: auto;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.pfp{
  border-radius: 62px;
}
.right {
  float: right;
  margin-left: 1em;
}
.left {
  float: left;
  margin-right: 1em;
}
.center {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.wanderingleaf {
  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: -34px;
  text-align: center;
}

@media only screen and (min-width: 600px) {
  .small {
    max-width: 60%;
    height: auto;
  }
}
.caption {
  margin-top: 0;
  font-size: 0.7em;
  text-align: match-parent;
  color: #ffeaea
}

a{
   color: rgb(255, 151, 151);
  text-decoration: none;
}
a:hover{
   color: #ffeaea;
      text-decoration: underline;
}

h1, h2, h3, h4, h5 {
  color: #ffeaea;
  
}

/*#CONTAINER is the rectangle that contains everything but the background!*/
#container {
  margin: 3em auto;
  width: 90%;
	max-width: 700px;
	background-color: #49050063;
  outline-color: #a92a199c;
  outline-style: solid;
  outline-width: 4px;
  outline-offset: 11;
  border-radius: 7px;
  box-shadow: 16px 3px 21px 5px;
}

#container2 {
  margin: 3em auto;
  width: 90%;
	max-width: 700px;
	background-color: #49050063;
  outline-color: #a92a199c;
  outline-style: solid;
  outline-width: 4px;
  outline-offset: 11;
  border-radius: 7px;
  box-shadow: 16px 3px 21px 5px;
}

#content {
  padding: 10px 5% 20px 5%;
}


#contentmain {
  padding: 2px 3% 2px 4%;
}

/*HEADER STYLE*/
#header {
  background-color: rgba(21, 21, 21, 0.12);
  padding: 0 5%;

  border-width: 0 0 4px 0;
}

#header ul {
  list-style-type: none;
  padding: 0.5em 0;
  margin: 0;
  text-align: center;
}
#header li {
  font-size: 1.2em;
  display: inline-block;
  margin-right: 1.5em;
  margin-bottom: 0.2em;
  margin-top: 0.2em;
}
#header li a {
  color: #ffeaea;
  text-decoration: none;
  background-color: inherit;
}
#header li a:hover {
  text-decoration: underline;
}

/*POST LIST STYLE*/
#postlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  list-style-type: none;
}
#recentpostlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  list-style-type: none;
}
.moreposts {
  font-size: 0.8em;
  margin-top: 0.2em;
}

/*NEXT AND PREVIOUS LINKS STYLE*/
#nextprev {
  text-align: center;
  margin-top: 1.4em;
}


/*FOOTER STYLE*/
#footer {
  font-size: 0.8em;
  padding: 0 5% 10px 5%;
}








/* (A) WHOLE PAGE */
* {
  box-sizing: border-box;
}

 
/* (B) GALLERY WRAPPER */
.gallery {
  /* (B1) GRID LAYOUT - 3 IMAGES PER ROW */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 20px;
 
  /* (B2) OPTIONAL WIDTH RESTRICT */
  max-width: 1000px;
  margin: 0 auto;
}


/* (D) ON SMALL SCREENS - 2 IMAGES PER ROW */
@media only screen and (max-width: 600px) {
  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* (C) GALLERY IMAGES */
.gallery img {

 
  /* (C2) COLORS */
  border: 1px solid #ddd;
  background: #fff;
 
  /* (C3) IMAGE RESIZE */
  /* cover | contain | fill | scale-down */
  object-fit: contain; }


/* (E) OPTIONAL ZOOM ON HOVER */
.gallery img:hover {
  z-index: 9;
  transform: scale(2.2);
  /* linear | ease | ease-in | ease-out | ease-in-out */
  transition: transform 1s ease-out;
}
  
.gallerysummary{
  color:#ffeaea;
  margin-bottom: 10px;
}