/*hi there welcome to hell*/
html {
text-align: center;
font-family: "Blossom";
background-color: #0e452d;
overflow-x: hidden;
cursor: default;
}
@font-face {
font-family: "Blossom";
src: url("blossom.ttf"), format('ttf');
}
@font-face {                  
font-family: 'UTSangeth';
src: url("https://humantooth.neocities.org/fonts/UTSangeth.woff") format('woff');
font-weight: normal;
font-style: normal;
} 
h1, h2, h3, b {
font-family: "UTSangeth";
}
/*TABS == src: https://www.w3schools.com/howto/howto_js_tabs.asp */
/* Style the tab */
.tab {
  overflow: hidden;
  transition: 100ms;
  background-image: url("images/yessirr.png");
  margin: -7px;
  color: #161830;
  padding: 4px;
  background-repeat: no-repeat;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: #9adbab;
  text-align: centre;
  cursor: pointer;
  transition: 0.2s;
  border-radius: 5px 3px 5px 3px;
  border: 1px outset #16182b;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #daf099;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #61a65e;
}

/* Style the tab content */
.tabcontent {
  display: none;
  animation: fadeEffect 0.3s; /* Fading effect takes 1 second */
}
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}
.base {
max-width: 700px;
border: 1px outset #240c0e;
min-height: 350px;
overflow-y: auto;
overflow-x: hidden;
border-radius: 15px 15px 5px 5px;
margin: -100px;
align-items: center;
justify-content: center;
padding: 15px;
background-color: #754932;
box-shadow: 1px 1px 10px #471806;
}
/* width */::-webkit-scrollbar {width: 7px;}/* Track */::-webkit-scrollbar-track {background: #2e1822; border-radius: 1px 1px 4px 1px;}::-webkit-scrollbar-thumb {background: #f55733; border: 1px outset #a027d9;cursor: pointer; transition: all 175ms;}::-webkit-scrollbar-thumb:hover {background: #ff684a; }
font {
font-family: "UTSangeth";
}
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  cursor: pointer;
}

.tooltiptext {
  visibility: hidden;
  max-width: 270px;
  background-color: rgba(0,0,0,70%);
  color: #ffffff;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 65%;
  margin-left: -65px;
  font-family: blossom;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
.panel {
max-width: 100%;
transition: all 100ms;
cursor: pointer;
}
.panel:active {
  -ms-transform: scale(1.15); /* IE 9 */
  -webkit-transform: scale(1.15); /* Safari 3-8 */
}
@media (max-width: 700px) {
  .nomobile {
    display: none;
  }
}
.gal {
max-width: 150px;
transition: all 200ms;
border: 2.5px solid rgba(1,1,1,0%);
}
.gal:hover {
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  border: 2.5px solid #331121;
}
summary {
cursor: pointer;
background-color: #ffb347;
border-radius: 2px 6px 2px 6px;
max-width: 280px;
border: 1px outset #69081f;
padding: 2px;
transition: all 150ms;
background-image: linear-gradient(to bottom, #ffb347, #ffd363);
}
summary:hover {
background-color: #ff9854;
background-image: linear-gradient(to bottom, #ff9854, #ffb940);
}
summary:active {
background-color: #eb4e2f;
background-image: linear-gradient(to bottom, #e06f36, #eb4e2f);
}
details {
background-color: #8f5538;
border-radius: 5px;
border: 1px inset #803d21;
padding: 10px;
width: 90%;
}
details details {
background-color: #B68C66;
}
.gals {
max-width: 85%;
transition: all 200ms;
border: 2.5px solid rgba(1,1,1,0%);
}
.gals:hover {
  -ms-transform: scale(1.2); /* IE 9 */
  -webkit-transform: scale(1.2); /* Safari 3-8 */
  border: 2.5px solid #331121;
}