<!Palette

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

to replace : 

dark blue #181E47
old yellow #FEF09C
cyan #A4F5F9
purple #B48FFD


>


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

  
  .banner{
  background-image: url("https://abberance-star.neocities.org/images/bannercloud.png") ;
  background-size: cover;
  background-repeat: no-repeat; 
  background-position: center; 
  width:1040px;
    height:118px;
    margin-left:auto;
    margin-right:auto;
  }
  
.box {
  color: #fff9e7;
  padding: 10px;
  background-color: #3d325a;
  border-radius: 20px;
  box-shadow: 4px 4px  #ffda8f;
  }
  .warningbox {
  color: #ffda8f;
  padding: 10px;
  background-color: #8b7279;
  border-radius: 20px;
  border-style: dashed;
  margin-bottom: 10px;
  }

.scrollable {
  overflow: scroll;
}

.wrapper {
  display:grid;
  padding: 2px;
  margin: auto;
  width:1300px;
  gap:10px;
  align-items: stretch;
  grid-template-columns: 1fr 7fr 2fr;
}
.title {
  display:flex;
  justify-content: space-between;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  align-content: center;
  align-items: center;
  color:#ffda8f;
  background-color: #3d325a; 
  padding: 10px;
  height:40px;
  margin:auto;
  margin-bottom: 20px;
  width:800px;
  border-radius:40px
}
.sec-left {
	text-align: center;
}
.sec-center {
  display:flex;
  flex-direction:column;
  text-align: center;
  align-items: center;
  justify-content: center;
  gap:10px;
  }
.sec-right {
	text-align: center;
}
.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;
  overflow:auto;
  color: #3d325a;
  background-color: #ffda8f;
  font-size:15px;
  text-align: left;
  align-content: center;
  align-items: center;
  padding:10px;
  height:25px;
  border-radius: 20px;
  font-weight: bold;
}

.headergifs {
  display:inline-block;
  background-image:url("https://abberance-star.neocities.org/images/dividerstars.gif");
  background-size: cover;
  background-repeat: no-repeat; 
  background-position: center; 
  margin-top:10px;
  margin-bottom:10px;
  width:367px;
  height:57px;
}
.icongif {
  height:30px;
  margin: 5px
}

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

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

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

  .fixedimage{
    z-index:1; 
    position: absolute;
  }
  

 @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}

}