{}body {
    background-image: url("TBA") ;
    background-color:#E4F3F6;
    background-size: cover ;
    background-position: center center;
    background-repeat: no-repeat ;
    background-attachment: fixed;
    color: #594c6d;
    font-size:13px;
    font-family: "Comic Sans MS", "Comic Sans"
  }
a {
  color: inherit
}

.wrapper {
  height:650px;
  width:1000px;
  display: flex;
  flex-direction:column;
  margin: auto;
  background-color: #A3C0E6;
  border-radius: 20px 20px 0px 0px;
  border: 3px solid #594c6d;
  margin-top:20px;
  margin-bottom:20px;
}

.box {
  color: #594c6d;
  background-color:#F9C2CC;
  border-radius: 5px;
  border: 2px solid #594c6d;
  }

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

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


.header{
  background-image: linear-gradient(45deg, #89B2E3 10%, #F9C2CC 10%, #F9C2CC 20%, #F9EFE1 20%, #F9EFE1 30%, #F9C2CC 30%, #F9C2CC 40%, #89B2E3 40%, #89B2E3 50%, #89B2E3 50%, #89B2E3 60%, #F9C2CC 60%, #F9C2CC 70%, #F9EFE1 70%, #F9EFE1 80%, #F9C2CC 80%, #F9C2CC 90%, #89B2E3 90%, #89B2E3 100%);
  background-size: 280px 280px;
  grid-column: 1 / span 2;
  border-radius: 20px 20px 0px 0px;
  text-align:center;
  border-bottom:2px solid #594c6d;
  height:auto; 
}

.content {
  text-align: center;
  align-items: stretch;
  justify-content: center;
  background-color:#FFFCEB;
  border: 2px solid #594c6d;
  border-radius:10px;
  overflow: scroll;
  margin:10px;
  padding:10px;
  }
.contentflex {
  justify-content: center;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items: stretch
  }
  .sectionflex{
    display:flex;
    gap:10px;
  }
  
  .bottom{
  background-image: linear-gradient(45deg, #594c6d 10%, #f1d132 10%, #f1d132 20%, #F9EFE1 20%, #F9EFE1 30%, #89b2e3 30%, #89b2e3 40%, #594c6d 40%, #594c6d 50%, #e99230 50%, #e99230 60%, #f1d132 60%, #f1d132 70%, #F9EFE1 70%, #F9EFE1 80%, #89b2e3 80%, #89b2e3 90%, #594c6d 90%, #594c6d 100%);
  background-size: 350px 350px;
  grid-column: 1 / span 2;
  }
  
  
.endsection {
  display:flex;
  justify-content: center;
  text-align: center;
  align-content: center;
  align-items: center;
  color:#f6e9d5;
  margin:auto;
  font-size:11px;
}
  .sectiontitle{
  display:block;
  color: #FFFDF3;
  background-color: #A3C0E6;
  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 #594c6d;
}

.headertitle {
  font-size:20px;
  font-weight:bold;
  color:#f1d132;
  text-shadow: -1px -1px 0 #594c6d, 1px -1px 0 #594c6d, -1px 1px 0 #594c6d, 1px 1px 0 #594c6d;
}

.title{
  margin: -10px -10px -10px -10px ;
  color: #594c6d;
  background-color: #f1d132;
  font-size:15px;
  text-align: left;
  justify-content: center;
  align-content: center;
  align-items: center;
  padding:10px;
  height:auto;
  font-weight: bold;
  border-top:2px solid #594c6d;
  border-bottom:2px solid #594c6d;
}

.icongif {
  height:30px;
  margin: 5px
}

 .highlight {
  background-color: rgba(246, 233, 213, 0.7);
}
.img {
    height: 350px;
    margin:5px;
}

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

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

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

.tooltip .tooltiptext {
  visibility: hidden;
  width: 160px;
  background-color: #F9EFE1;
  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;
}

.hometop{
height:auto;
border-bottom:2px solid #594c6d;
background-image: linear-gradient(to bottom, #f1d132, #E1D0E7);
padding: 10px; 
border-radius:19px 19px 0px 0px;
}

.pagelink_text {
  color: #FFFDF3FF;
  text-decoration: none;
  font-size: 11px;
}
.homelink{
  padding: 8px;
  align-self: center;
  cursor: pointer;
  transition-duration: 0.4s;
  background-color: #594c6d;
  border-radius:10px;
  text-align:center;
  width:100px;
  margin:auto;
}
.homelink:hover {
  background-color:#e99230;
  color:#5D5E8FFF;
}

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

}