/* GREEN PEONY - inspired by GB Studio - updated 2nd July 2025 */

html, body, .container {
    /* firefox scrollbar */
    scrollbar-color: #306850 #86c06c; /* track thumb */
    scrollbar-width: none; /* none, thin, or auto */

    
    align-items: center;
    justify-content: center;
    text-align: center;

}


body{
      background-image: url("");
      background-color: #071821;
      text-align: center;
      color: #e0f8cf;
      font-family: 'IMFellDWPica', serif;
      font-size: 16px;
      margin: 3%;
      padding: 20px;
      cursor: url("/pixels/cursorface.png"), auto;
      }

/* Courier Prime */

@font-face {
    font-family: "Courier Prime";
    src: url("/fonts/CourierPrime-Regular.ttf");
}
@font-face {
    font-family: "Courier Prime";
    src: url("/fonts/CourierPrime-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "Courier Prime";
    src: url("/fonts/CourierPrime-Italic.ttf");
    font-style: italic;
}
@font-face {
    font-family: "Courier Prime";
    src: url("/fonts/CourierPrime-BoldItalic.ttf");
    font-weight: bold;
    font-style: italic;
}

/* IMFellDWPica - cute old timey font */

@font-face {
    font-family: "IMFellDWPica";
    src: url("/fonts/IMFellDWPica-Regular.ttf");
}

@font-face {
    font-family: "IMFellDWPica";
    src: url("/fonts/IMFellDWPica-Italic.ttf");
    font-style: italic;
}

/* for JP display */

@font-face {
    font-family: "KiwiMaru";
    src: url("/fonts/KiwiMaru-Regular.ttf");
}
@font-face {
    font-family: "KiwiMaru";
    src: url("/fonts/KiwiMaru-Light.ttf");
    font-weight: light;
}
@font-face {
    font-family: "KiwiMaru";
    src: url("/fonts/KiwiMaru-Medium.ttf");
    font-weight: medium;
}

/* other fonts */
    
 

@font-face {
    font-family: "AdorableLady"; 
    src: url("/fonts/AdorableLady.ttf");
}  

@font-face {
    font-family: "Mothcub"; 
    src: url("/fonts/Mothcub.otf");
}  

h1 {
  color: #ba7e30;
  font-size: 32px;
  font-style: italic;
  font-family: 'Courier Prime';
  text-shadow: -1px 0 #e0f8cf, 0 1px #e0f8cf, 1px 0 #e0f8cf, 0 -1px #e0f8cf;
  margin:0;
  padding:0;
}

h2 {
  color: #86c06c;
  font-size: 16px;
  font-family: 'Courier Prime';
  letter-spacing: 3px;
  margin-top:0%;
  margin-bottom:0%;
  padding:0;
}

h3 {
  color: #86c06c;
  font-size: 16px;
  font-family: 'IMFellDWPica';
  text-shadow: 0 0 30px #306850, 0 0 40px #86c06c, 0 0 10px #306850, 0 0 30px #86c06c, 0 0 30px #306850, 0 0 10px #86c06c, 0 0 20px #306850;
  margin-top:0%;
  margin-bottom:0%;
  padding:0;
}

h4 {
  color: #e0f8cf;
  font-size: 40px;
  font-family: 'IMFellDWPica';
  text-shadow: 2px 2px 3px #071821;
  margin:0;
  padding:0;
}

ul{
  text-align:left;
  list-style-position: inside;
  margin-left: 10%;
  margin-right: 10%;
}

u{
  text-decoration-style: wavy;
  text-decoration-thickness: 1px;
}


 a{
  text-decoration: none;
 }
  
/* unvisited link */
a:link {
  color: #86c06c;
  font-family: 'KiwiMaru';
  font-size: 14px;
}

/* visited link */
a:visited {
  color: #306850;
}

/* mouse over link */
a:hover {
  color: #e0f8cf;
  cursor: url("/pixels/cursorface2.png"), auto;
}

/* selected link */
a:active {
  color: #071821;
}

hr {
  border: 0.5px solid #306850;
  width:25%;
}

::selection {
  background: #306850;
  text-shadow: 2px 2px 3px #071821;
}


.main{
  align-items: center;
  text-align: center;
  padding: 10px 5vh;
  width: 700px;
  height: 450px;
  margin: 0 auto;

      border-style: solid;
      border-width: 1px;
      border-color: #306850;
      border-radius: 15px;
      background: #071821;

      overflow-y:scroll;
      /* firefox scrollbar */
       scrollbar-color: #306850 #86c06c; /* track thumb */
       scrollbar-width: none; /* none, thin, or auto */
      }

.small{
  align-items: center;
  text-align: center;
  padding: 10px 5vh;
  width: 420px;
  height: 450px;
  margin: 0 auto;

      border-style: solid;
      border-width: 1px;
      border-color: #306850;
      border-radius: 15px;
      background: #071821;

      overflow-y:scroll;
      /* firefox scrollbar */
       scrollbar-color: #306850 #86c06c; /* track thumb */
       scrollbar-width: none; /* none, thin, or auto */
      }

 .borderless{
  align-items: center;
  text-align: center;
  padding: 10px 5vh;
  width: 700px;
  height: 450px;
  margin: 0 auto;

      border-style: solid;
      border-width: 0px;
      border-color: #306850;
      border-radius: 15px;
      background: #071821;

      overflow-y:scroll;
      /* firefox scrollbar */
       scrollbar-color: #306850 #86c06c; /* track thumb */
       scrollbar-width: none; /* none, thin, or auto */
      }

/*image types */

img {
image-rendering: pixelated;
image-rendering: crisp-edges;
transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s  ease-in-out;
  }
  
  img:hover{
    opacity:0.9;
  }
  
  .transition {
    transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s  ease-in-out;
}

.img{
  object-fit: scale-down; max-width: 100%;
}

.rounded{
  object-fit: scale-down; max-width: 100%;
 box-shadow:2px 2px 2px #071821;
    border-radius:20px; 
}

.circle{
  object-fit: scale-down; max-width: 100%;
   box-shadow:2px 2px 2px #071821;
    border-radius:100px; 
}

.shadow{
  object-fit: scale-down; max-width: 100%;
  box-shadow:2px 2px 2px #071821;
}


/*paragraph styles */
.left{
text-align:left;
}


/* gallery */

.gallery { /* this is the main div that wraps your gallery */
  display:flex;
  flex-wrap:wrap;
  align-items: center;
  justify-content: center;
   /* width is omitted rn, but can be modified to make the gallery wider */
}

.gallery img {
  width:200px; /* this sets the width for every image */
  height:200px; /* 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! */
  border:0px solid #666;
  box-shadow:2px 2px 2px #071821;
    border-radius:20px; 
}

/* this is the div which CROPS every image */
.gallery > div {
  width:200px; /* this should match the image height */
  height:200px; /* 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(1.1); /* this scales up the image when you hover over it */
  object-fit:contain; /* this keeps the aspect ratio of the original images*/
}

/* end of gallery */

/* long gallery */

.lgallery { /* this is the main div that wraps your gallery */
  display:flex;
  flex-wrap:wrap;
  align-items: center;
  justify-content: center;
}

.lgallery img {
  width:200px; /* this sets the width for every image */
  height:355px; /* 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! */
  box-shadow:2px 2px 2px #071821;
  border:0px solid #666;
    border-radius:20px; 
}

/* this is the div which CROPS every image */
.lgallery > div {
  width:200px; /* this should match the image height */
  height:355px; /* 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'  */
.lgallery img:hover {
  transform:scale(1.1); /* this scales up the image when you hover over it */
  object-fit:contain; /* this keeps the aspect ratio of the original images*/
}

/* end of long gallery */

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 0px dotted #071821; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 25%;
  background-color: #e0f8cf;
  color: #071821;
  text-align: center;
  padding: 5px 0;
  border-radius: 40px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
  left: 73%;
  top: 16%;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

/*Tooltip arrow */
.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%; /* To the left of the tooltip */
  margin-top: -5px;
  border-width: 4px;
  border-style: solid;
  border-color: transparent #e0f8cf transparent transparent;
}

.button {
  background-color: #306850;
  border: solid 1px;
  border-color: #e0f8cf;
  border-radius: 10px;
  color: #e0f8cf;
  padding: 2px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 4px 2px;
}


summary {
  color: #86c06c;
  font-family: 'Courier Prime';
  font-size: 14px;
  text-align: center;
  display: block;
}

summary:hover {
  color: #306850;
}

/* Create a new custom triangle on the right side */
summary::before {

  display: inline-block;
  content: '>';
  color: #86c06c;
  transition: 0.01s;
}

details[open] > summary::before {
  transform: rotate(80deg);
}

details {
  text-align: center;
}

/* music */

.review {
    display: flex;
}
.review-info {
    text-align: left;
    padding-top: 5px;
    padding-bottom: 5px;
}
.artist {
    font-weight: bold;
}
.title {

}
.review-left {

}
.review-right {
    padding-top: 5px;
    padding-left: 15px;
    text-align: left;
}

/* music end */


@media only screen and (max-width: 750px) {
 ul {
    margin-left: 2%;
  }

body {
  width:85%;
padding:2%;
margin-left: 4%;
}

.main,  .small, .borderless {  
width:99%;
padding:10px;

}

h2 {
  margin-top: 10px;
}

 }