/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
body {  
  background: #242424;
  font-family: 'F5.6', 'Trebuchet MS';  
  margin: 0.5vh;
  border: 4px outset #505050;  
}

@font-face {                  
font-family: 'F5.6';
src: url(https://humantooth.neocities.org/fonts/F5.6-Regular.woff) format('woff');
font-weight: normal;
font-style: normal;
}


a:link {
  color: #BF006C;
  background-color: transparent;
  text-decoration: none;  
}

a:visited {
  color: #BF006C;
  background-color: transparent;
  text-decoration: none;  
}

a:hover {
  color: #FD59B7;
  background-color: transparent;
  text-decoration: none;
}

a:active {
  color: #FD59B7;
  background-color: transparent;
  text-decoration: none;  
}

.main-bar {
  background-color: #404040;
  text-align: left;
  font-size: 2vh;
  padding:5px;  
  width:100;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}

.main-bar > a {
  color: #FD59B7;
  text-decoration: none;  
}

.main-frame {
  height: 90.4vh;  
  border-left: 4px solid #404040;
  border-right: 4px solid #404040;
}

.main-window {
  height: calc(90.4vh - 8px);
  border: 4px inset #505050;
  overflow: scroll;
  background: #661946;
  background-image: linear-gradient(to right, rgba(255,0,0,0) 0%, #242424 30%, #242424 70%, rgba(255,0,0,0) 100%),url("images/BG2.webp");
  background-attachment: fixed,scroll;
  background-size: auto,100vh;
}

.button-link {
  background: #FD59B7;
  margin: 2vh;
  width: 50%;
  min-width: 30vh;
  color: #242424;
  padding: 1vh;
  font-size: 3vh;
  box-shadow: 10px 10px rgba(14,14,14,0.5);
}

.button-link:hover {
  background: #FC97D1;
  transition: all 0.5s;
}

.button-link:not(:hover) {  
  transition: all 2s;
}

.label-text {
  position: absolute;
  top: 0;
  left: 0;  
  margin: 5px;
  font-size: 2vh;
  padding:7px;    
  border: 1px solid #FD59B7;  
  background-color: #242424;
  color: #FD59B7;
  z-index: 9000;
  box-shadow: 5px 5px rgba(14,14,14,0.5);
  border-radius: 10px;
}

.label-text-comm {
  position: absolute;
  height: auto;
  bottom: 5px;
  margin: 5px;
  font-size: 2vh;
  padding:5px;    
  border: 4px outset #FD59B7;  
  background-color: #242424;
  color: #FD59B7;
  z-index: 9000;
  box-shadow: 5px 5px rgba(14,14,14,0.5);
  text-align: right;
}

.label-text-commopen {
  position: absolute;
  height: auto;
  left: 10px;
  right: 10px;
  top: 43%;
  margin: 5px;
  font-size: 5vh;
  text-align: center;
  padding:7px;    
  border: 4px outset #00FF00;  
  background-color: #233D23;
  color: #00FF00;
  z-index: 9000;
  box-shadow: 5px 5px rgba(14,14,14,0.5);  
}

.label-feature {
  position: absolute;
  top: 0;
  left: 0;  
  margin: 5px;
  margin-top: calc(6vh - 5px);
  font-size: 3vh;
  padding:7px;    
  border: 1px solid #FD59B7;  
  background-color: #242424;
  color: #FD59B7;
  z-index: 9000;
  box-shadow: 5px 5px rgba(14,14,14,0.5);
  border-radius: 10px;
}

.label-text-title {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: calc(8px);  
  text-align: center;
  padding: 7px;    
  border: 1px solid #FD59B7;  
  background-color: #242424;
  color: #FD59B7;
  z-index: 1000;
  box-shadow: 5px 5px rgba(14,14,14,0.5);
  font-size: 1.8vh;
  border-radius: 10px;
}

.label-text-back {
  position: absolute;
  top: calc(84vh);
  right: 30px;  
  font-size: 3vh;
  padding:1vh;  
  background-color: #3E2333;
  color: #242424;
  z-index: 9000;
  box-shadow: 5px 5px rgba(14,14,14,0.5);
  text-align: center;  
  background: #FD59B7;
  }

.label-text-back:hover {
  background: #FC97D1;
  transition: all 0.5s;
}

.label-text-back:not(:hover) {  
  transition: all 2s;
}

.label-text-top {
  position: absolute;
  top: calc(84vh);
  right: calc(30px + 12vh);
  font-size: 3vh;
  padding:1vh;  
  background-color: #3E2333;
  color: #242424;
  z-index: 9000;
  box-shadow: 5px 5px rgba(14,14,14,0.5);
  text-align: center;  
  background: #FD59B7;
  }

.label-text-top:hover {
  background: #FC97D1;
  transition: all 0.5s;
}

.label-text-top:not(:hover) {  
  transition: all 2s;
}

/* Welcome page/Index */

.page-welcome{
  padding:4vh;
  text-align: center;
  color: #FD59B7;
}

/* Home Page */

.page-home {
  width: calc(80vh);
  height: calc(100% - 8px);
  max-width: calc(100% - 8px);
  box-sizing: border-box;
  overflow: hidden;
  float: left;
  margin: 4px;
}

.page-home img {
  width: 100%;
  height: 100%;  
  object-fit: cover;
  vertical-align: middle;
  z-index: 0;  
  background-color: #242424;
  opacity: 1;
}

.page-home img:hover {    
  opacity: 0.0;
  transition: all 1s;
}

.page-home img:not(:hover) {    
  transition: all 1s;
}

.page-home-left {
  width: 50%;  
  height: 100%;
  overflow: hidden;
  float: left;
}

.page-home-art {
  width: calc(100% - 2px);
  height: calc(40% - 2px);
  position: relative;
  border-top: 1px solid #FD59B7;
  border-left: 1px solid #FD59B7;
  border-right: 1px solid #FD59B7;
  border-bottom: 1px solid #FD59B7;
  background-image: url("images/ArtButtons/Home01.webp");
  background-size: cover;
  background-position: center;
}

.page-home-ocs {
  width: calc(100% - 2px);
  height: calc(40% - 1px);
  position: relative;
  border-top: 0px solid #FD59B7;
  border-left: 1px solid #FD59B7;
  border-right: 1px solid #FD59B7;
  border-bottom: 1px solid #FD59B7;
}

.page-home-about {
  width: calc(100% - 2px);
  height: calc(20% - 1px);
  position: relative;
  border-top: 0px solid #FD59B7;
  border-left: 1px solid #FD59B7;
  border-right: 1px solid #FD59B7;
  border-bottom: 1px solid #FD59B7;
}

.page-home-right {
  width: 50%;
  height: 100%;  
  overflow: hidden;
  float: left;
}

.page-home-comm {
  width: calc(100% - 1px);
  height: calc(80% - 2px);
  position: relative;
  border-top: 1px solid #FD59B7;
  border-left: 0px solid #FD59B7;
  border-right: 1px solid #FD59B7;
  border-bottom: 1px solid #FD59B7;
  background-image: url("images/ArtButtons/Home02.webp");
  background-size: cover;
  background-position: 40% 0%;
}

.page-home-social {
  width: calc(100% - 1px);
  height: calc(20% - 1px);
  position: relative;
  border-top: 0px solid #FD59B7;
  border-left: 0px solid #FD59B7;
  border-right: 1px solid #FD59B7;
  border-bottom: 1px solid #FD59B7;
}



.home-new-frame {
  width: calc(100% - 80vh - 8px - 4px);
  height: calc(65vh - 4px - 2px);
  min-width: 0;
  min-height: 0;
  overflow: scroll;
  float: left;  
  position: relative;
  margin-top: 4px;
  border-top: 1px solid #FD59B7;
  border-bottom: 1px solid #A93B7A;
}

.home-new {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: scroll;
  float: left;  
  position: relative;
}

.home-gallery {
  position: relative;
  width: calc((100% / 2) - 8px);
  height: calc((65vh / 2.25) - 12px);
  display: inline-block;
  float: left;
  text-align: center;
  color: #FD59B7;
  font-size: 0vh;
  border: 4px outset #FD59B7;
}

.home-gallery img {
  width: 100%;
  height: 100%;  
  object-fit: cover;
  vertical-align: middle;
  z-index: 0;  
  background-color: #242424;
  filter: saturate(20%);
}

.home-gallery img:hover {    
  filter: saturate(100%);
  transition: all 0.5s;
}

.home-gallery img:not(:hover) {    
  transition: all 0.5s;
}

.home-cards-frame {
  width: calc(100% - 80vh - 8px);
  height: calc(100% - 65vh - 4px);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  float: left;  
  position: relative;
  margin-top: 4px;
}

.home-cards {
  position: relative;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  display: inline-block;
  float: left;
  text-align: center;
  color: #FD59B7;
  font-size: 0vh;
  margin-right: 0px;
  margin-bottom: 0px;
  border: 1px solid #FD59B7;
  overflow: hidden;
}

.home-cards img {
  width: 100%;
  height: 100%;  
  object-fit: cover;
  vertical-align: middle;  
  z-index: 0;  
  background-color: #242424;
  filter: saturate(20%);
}

.home-cards img:hover {    
  transform: scale(1.1);
  filter: saturate(100%);
  transition: all 0.5s;
}

.home-cards img:not(:hover) {    
  transition: all 3s;
}

/* My Art Page */

.page-myart {
  display: grid;
  width: calc(80vh);
  height: calc(100% - 8px);
  max-width: calc(100% - 8px);
  box-sizing: border-box;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 6fr 3fr 4fr 2fr 2fr 1fr 3fr;
  grid-template-areas:
  "oc poke"
  "oc pop"
  "comic pop"
  "gift pop"
  "gift ani"
  "other ani"
  "other ani";    
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  float: left;
  margin: 4px;
}

.page-myart img{
  height: 100%;
  width: 100%;
  object-fit: cover;  
  filter: saturate(20%);
}

.page-myart img:hover {
  filter: saturate(100%);
  transform: scale(1.1);
  transition: all 0.5s;
}

.page-myart img:not(:hover) {    
  transition: all 3s;
}

.myart-poke  {
  grid-area: poke;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-top: 1px solid #FD59B7;
  border-left: 0px solid #FD59B7;
  border-right: 1px solid #FD59B7;
  border-bottom: 1px solid #FD59B7;
}

.myart-poke img {
  height: 100%;
  width: 100%;
  object-fit: cover;  
}

.myart-pop  {
  grid-area: pop;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-top: 0px solid #FD59B7;
  border-left: 0px solid #FD59B7;
  border-right: 1px solid #FD59B7;
  border-bottom: 1px solid #FD59B7;
}

.myart-oc  {
  grid-area: oc;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-top: 1px solid #FD59B7;
  border-left: 1px solid #FD59B7;
  border-right: 1px solid #FD59B7;
  border-bottom: 1px solid #FD59B7;
}

.myart-gift  {
  grid-area: gift;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-top: 0px solid #FD59B7;
  border-left: 1px solid #FD59B7;
  border-right: 1px solid #FD59B7;
  border-bottom: 1px solid #FD59B7;
}

.myart-other  {
  grid-area: other;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-top: 0px solid #FD59B7;
  border-left: 1px solid #FD59B7;
  border-right: 1px solid #FD59B7;
  border-bottom: 1px solid #FD59B7;
}

.myart-comic  {
  grid-area: comic;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-top: 0px solid #FD59B7;
  border-left: 1px solid #FD59B7;
  border-right: 1px solid #FD59B7;
  border-bottom: 1px solid #FD59B7;
}

.myart-ani  {
  grid-area: ani;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-top: 0px solid #FD59B7;
  border-left: 0px solid #FD59B7;
  border-right: 1px solid #FD59B7;
  border-bottom: 1px solid #FD59B7;
}

.myart-feature {
  width: calc(100% - 80vh - 8px);
  height: calc(100% - 4px);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  float: left;  
  position: relative;
  margin-top: 4px;   
}

.myart-gallery {
  position: relative;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  display: inline-block;
  float: left;
  text-align: center;
  color: #FD59B7;
  font-size: 0vh;
  margin-right: 4px;
  margin-bottom: 4px;
  border: 4px outset #FD59B7;
}

.myart-gallery img {
  width: 100%;
  height: 100%;  
  object-fit: cover;
  vertical-align: middle;
  z-index: 0;  
  background-color: #242424;
}

/* Gallery Page */

.page-gallery {
  position: relative;
  min-width: 0;
  min-height: calc(78vh);
  overflow: hidden;
  padding:2vh;
  text-align: center;
  color: #FD59B7;
  font-size: 2vh;
  padding-bottom: 10vh;  
}

.page-gallery img {
  width: 30vh;
  height: 30vh;
  object-fit: cover;
  border: 1px solid #FD59B7;
  box-shadow: 10px 10px rgba(14,14,14,0.5);
  margin-bottom: 12px;
  margin-top: 5px;
  z-index: 0;  
  background-color: #242424;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
}

.page-gallery img:hover {  
  object-fit: contain;  
  transform: scale(1.75);
  box-shadow: 20px 20px rgba(14,14,14,0.5);
  transition: all 0.5s;
  z-index: 3000;
}

.page-gallery img:not(:hover) {  
  transition: all 0.1s;
  z-index: 2000;
}

.page-gallery-text {
  height: 38vh;
  width: 39vh;
  display: inline-block;
  font-size: 1.8vh;
  vertical-align: text-top;
  margin-bottom: 15px;
}

.fan-group {
  display: inline-block;
  border: 1px solid #FD59B7;
  margin-bottom: 1vh;
  padding-top: 1vh;
  font-size: 3vh;
}

.fan-group:hover {
  background: #242424;
  transition: all 1s;
}

.fan-group:not(:hover) {
  transition: all 2s;
}

.fan-button {
  display: inline-block;
  margin-left: 1vh;
  margin-right: 1vh;
  margin-bottom: 0.5vh;
  padding: 1vh;
  border: 1px solid rgba(14,14,14,0.0);
}

.fan-button:hover {
  border: 1px solid #FD59B7;
}

.binder-orange {
  color: #ff8000;
}

.binder-orange img {
  border: 1px solid #ff8000;
}

.binder-purp {
  color: #9F40FF;
}

.binder-purp img {
  border: 1px solid #9F40FF;
}

/* My OCs */

.page-ocs {  
  color: #FD59B7;  
  font-size: 2vh;  
  overflow: visible;  
}

.page-ocs-main {
  width: calc(100% - 4vh);  
  overflow: scroll;
  padding: 2vh;  
  background-attachment: fixed;
  background-size: cover;  
  background-position: center;  
}

.page-ocs-ref {
  width: auto;
  max-width: calc(100% - 6px);
  display: inline-block;
  margin-bottom: 10px;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 10px;
  vertical-align: text-top;
}

.page-ocs-ref img {
  width: 40vh;
  height: 40vh;
  object-fit: cover;
  max-width: calc(100% - 6px);
  border: 3px outset #FD59B7;
  box-shadow: 10px 10px rgba(14,14,14,0.5);
  margin-bottom: 9px;
}

.myocs-menu img {
  height: 15vh;
  width: 30vh;  
  border: 3px outset #FD59B7;
  box-shadow: 10px 10px rgba(14,14,14,0.5);
  object-fit: cover;
  margin-bottom: 5px;
  border-radius: 0px;
}

.myocs-menu img:hover {
  object-fit: cover;  
  transform: scale(1.1);
  box-shadow: 25px 20px rgba(14,14,14,0.3);
  transition: all 0.5s;  
}

.myocs-menu img:not(:hover) {  
  transition: all 0.5s;  
}

.myocs-menu-text {
  height: auto;
  margin-bottom: 15px;
  width: 33vh;
  display: inline-block;
  font-size: 3vh;
}

.myocs-art img{
  width: 76%;
  height: 20vw;
  margin-top: 0.3vw;
  margin-bottom: 1vh;
  border: 1px solid #FD59B7;
  box-shadow: 10px 10px rgba(14,14,14,0.5);
  object-fit: cover;
  border-radius: 10px;
}

.myocs-art img:hover {
  width: 99%;
  transition: width 2s;
}

.myocs-art img:not(:hover) {  
  transition: width 8s;  
}

/* Comms */

.page-comms {  
  color: #FD59B7;  
  font-size: 2vh;  
  overflow: visible;
}

.page-comms-left {  
  width: calc(100vh);
  max-width: calc(100%);  
  overflow: scroll;
  float:left;  
}

.page-comms-right {  
  width: calc(100% - 100vh);  
  overflow: scroll;
  float:left;
}

.page-comms-main {
  width: calc(100% - 4vh);  
  overflow: scroll;
  padding: 2vh;
  margin-bottom: 4vh;
}

.page-comm-banner img{
  width: calc(100% - 2vh);  
  border: 1px solid #FD59B7;
  box-shadow: 10px 10px rgba(14,14,14,0.5);
  object-fit: cover;
  margin-bottom: 1vh;
}

.page-comm-banner-gif{
  margin: 0vh;
  float: right;
}

.page-comm-banner-gif img{
  height: 50vh;
  max-width: calc(100% - 2vh);
  border: 1px solid #FD59B7;
  box-shadow: 10px 10px rgba(14,14,14,0.5);
  object-fit: cover;
  margin-bottom: 2vh;
  margin-left: 1vh;
  
}

.page-comms-right img{  
  width: 19vw;
  height: 19vw;  
  border: 1px solid #FD59B7;
  box-shadow: 10px 10px rgba(14,14,14,0.5);
  margin: 1vh;
  object-fit: cover;
  background-color: #242424;
  z-index: 0;
}

.page-comms-right img:hover {    
  transform: scale(1.2);
  object-fit: contain;
  transition: all 0.5s;
  z-index: 3000;
}

.page-comms-right img:not(:hover) {    
  transition: all 0.2s;
}

/* About */

.page-about {
  color: #FD59B7;
  margin: 2vh;
  font-size: 2vh;
  margin-bottom: 5vh;
}

.page-about img {  
  border: 1px solid #FD59B7;
  width: 100%;
  max-height: 20vw;
  margin-bottom: 2vh;
  object-fit: cover;
  box-shadow: 10px 10px rgba(14,14,14,0.5);
}

/* Comics */

.page-comic-menu {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  text-align: center;
  color: #FD59B7;
  font-size: 2vh;  
  padding:2vh;
}

.page-comic-menu img {
  width: 30vh;
  background-color: grey;
  object-fit: cover;
  box-shadow: 1px 1px #F0F0F0, 2px 2px #E5E5E5, 3px 3px #D3D3D3, 4px 4px #B9B9B9, 5px 5px #9E9E9E, 6px 6px #8F8F8F, 12px 8px rgba(14,14,14,0.5);
  transform: skew(-5deg) scalex(1.05);
  z-index: 0;
  border: 0px solid grey;
}

.page-comic-menu img:hover {  
  transform: scale(1.3);
  box-shadow: 0px 0px #F0F0F0, 0px 0px #E5E5E5, 0px 0px #D3D3D3, 0px 0px #B9B9B9, 0px 0px #9E9E9E, 0px 0px #8F8F8F, 80px 30px rgba(14,14,14,0.3);
  z-index: 3000;
  transition: all 1s;
  border: 0px solid #FD59B7;
}

.page-comic-menu img:not(:hover) {  
  transition: all 0.5s;  
}

.page-comic-menu-contain{
  display: inline-block;
  vertical-align: text-top;
  width: 40vh;
  height: auto;
  max-width: 90%;
  padding-right: 1vh;
}

.page-comic-menu-contain > p{
  text-align: left;
}

.page-comic-menu-title{
  font-size: 3vh;  
  height: 9vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-comic-menu-desc{
  font-size: 2vh;  
  height: 15vh;
  text-align: left;
}

.page-comic {
  padding:2vh;
  overflow: hidden;
  text-align: center;
  color: #FD59B7;
  font-size: 2vh;
  margin-bottom: 6vh;
}

.page-comic img {  
  max-width: 98%;
  margin-bottom: 0.5%;
  border: 1px solid #FD59B7;  
  vertical-align: middle;
  background-color: #804000;
  z-index: 0;  
}

/* Font */

.text-font1 {
  font-size: 4vh;
  margin-bottom: 1vh;
}

.text-font2 {
  font-size: 3vh;
  margin-bottom: 1vh;
}

hr.normal {
  border: 1px solid #FD59B7;
  width: calc(100% - 2px);
  height:1px;
  background-color: #FD59B7;
  margin-top: 2vh;
  margin-bottom: 2vh;
}

.text-left {
  text-align:left;
  margin-left:2.5%;
  margin-right:2.5%;
}