<!Palette

Beige White #fff9e7
Yellow #ffda8f
That one weird yellow brown #8b7279
Light Purple #ba9fdf
Dark Purple #3d325a

>


 {}body {
background-image: url("https://abberance-star.neocities.org/layout%20images/BD%203.png") ;
    background-size: cover ;
    background-position: center center;
    background-repeat: no-repeat ;
    background-attachment: fixed;
    color: #fff9e7;
    font-size:13px;
    font-family: "Comic Sans MS", "Comic Sans"
  }

  
.box {
  color: #fff9e7;
  background-color:#8568AA;
  border-radius: 5px;
  border: 2px solid #3d325a;
  }

.scrollable {
  overflow: scroll;
  padding:10px;
}

.warningbox {
  color: #ffda8f;
  padding: 10px;
  background-image: linear-gradient(to bottom, #695160, #B37855);
  border-radius: 10px;
  border: 2px solid #3d325a;
  margin-bottom: 10px;
  }


.wrapper {
  height:1085px;
  width:1300px;
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  margin: auto;
  background-color:#ba9fdf;
  border-radius: 20px 20px 0px 0px;
  border: 3px solid #3d325a;
  box-shadow: 8px 8px #ffda8f;
}

.header{
  background: repeating-linear-gradient(
  45deg,
  #E1D0E7,
  #E1D0E7 10px,
  #ba9fdf 10px,
  #ba9fdf 20px
);
  grid-column: 1 / span 3;
  border-radius: 20px 20px 0px 0px;
  text-align:center;
  border-bottom:2px solid #3d325a;
  height:auto;
  
}
.left {
  text-align: center;
  align-items: center;
  justify-content: center;
  background-color:#FFFCEB;
  margin:10px 5px 10px 10px;
  border: 2px solid #3d325a;
  border-radius:10px;
  padding:10px;
  overflow: scroll;
  }
.content {
  text-align: center;
  align-items: center;
  justify-content: center;
  background-color:#FFFCEB;
  margin:10px 5px;
  border: 2px solid #3d325a;
  border-radius:10px;
  padding:10px;
  overflow: scroll;
  }
.right {
  text-align: center;
  align-items: center;
  justify-content: center;
  background-color:#FFFCEB;
  margin:10px 10px 10px 5px;
  border: 2px solid #3d325a;
  border-radius:10px;
  padding:10px;
  overflow: scroll;
  }
  .bottom{
  background-image: linear-gradient(to bottom, #3d325a, #8568AA);
  grid-column: 1 / span 3;
  }
  
  
.endsection {
  display:flex;
  justify-content: center;
  text-align: center;
  align-content: center;
  align-items: center;
  color:#ffda8f;
  margin:auto;
  font-size:11px;
}
  .sectiontitle{
  display:block;
  color: #3d325a;
  background-color: #ffda8f;
  font-size:15px;
  text-align: left;
  justify-content: center;
  align-content: center;
  align-items: center;
  padding:10px;
  height:auto;
  font-weight: bold;
  border-radius: 4px 4px 0px 0px;
  border-bottom:2px solid #3d325a;
}

.headertitle {
  font-size:20px;
  font-weight:bold;
  color:#3d325a;
  text-shadow: -1px -1px 0 #ffda8f, 1px -1px 0 #ffda8f, -1px 1px 0 #ffda8f, 1px 1px 0 #ffda8f;
}
.icongif {
  height:30px;
  margin: 5px
}

 .highlight {
  background-color: rgba(255, 243, 157, 0.5);
}
.img {
    height: 350px;
    margin:5px;
}

 .solid {
  border-bottom:2px solid #ffda8f;
}
.contentflex{
  display: flex; 
  gap: 10px;
  margin-top:10px;
}

.artgaleryimage{
  height:250px; 
  margin:15px;
}

  .tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 160px;
  background-color: rgba(133, 104, 170, 1);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 5;
  bottom: 105%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 15px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #FFFFFF transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

 @media only screen and (max-width: 600px) {
  .wrapper {padding: 5px; margin:20px; width: auto}
  .grid.left {grid-area: 3/span 2; height: 200px; overflow-y: scroll;}
  .grid.right {grid-area: 4/span 2; width: auto;}
  .button {font-size: 12px; margin-top: 5px;margin-bottom; 5px;}
  .button_two {font-size: 12px; margin-top: 5px;margin-bottom; 5px;}
  .box { font-family: Verdana, Geneva, sans-serif; }
  .img {width: 250px; height: auto}
  .banner {object-fit: contain; height: 40px}
  .headergifs {margin: 0px 2px; width: 250px; height:auto}
  .title {font-size:23px; gap:5px}

}