/* 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 #cc6600;  
}

@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: #BF6000;
  background-color: transparent;
  text-decoration: none;  
}

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

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

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

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

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

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

.main-window {
  height: calc(90.4vh - 8px);
  border: 4px inset #cc6600;
  overflow: scroll;
  background: #3C2F22;
  background-image: linear-gradient(to right, rgba(255,0,0,0) 0%, #3C2F22 20%, #3C2F22 80%, rgba(255,0,0,0) 100%),url("images/BG2.png");
  background-attachment: fixed,scroll;
  background-size: auto,100vh;
}

.button-link {
  background: #FF8000;
  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: #FF9F40;
  transition: all 0.5s;
}

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

.label-text {
  position: absolute;
  top: 0;
  left: 0;  
  margin: 0.8vh;
  font-size: 2vh;
  padding:0.8vh;    
  border: 1px solid #FF8000;  
  background-color: #3C2F22;
  color: #ff8000;
  z-index: 9000;
  box-shadow: 0.8vh 0.8vh rgba(14,14,14,0.5);
}

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

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

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

.label-text-back {
  position: absolute;
  bottom: calc(2.4vh + 8px + 3px);
  right: 25px;  
  font-size: 3vh;
  padding:1vh;  
  background-color: #3C2F22;
  color: #242424;
  z-index: 9000;
  box-shadow: 5px 5px rgba(14,14,14,0.5);
  text-align: center;  
  background: #FF8000;
  }

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

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

/* Welcome page/Index */

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

/* Home Page */

.page-home {
  display: grid;
  width: 100vh;
  height: 100%;
  max-width: 100%;
  box-sizing: border-box;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 2fr 2fr 1fr 1fr;
  grid-template-areas:
  "art comm"
  "ocs comm"   
  "socials card"
  "about card";
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  float: left;
}

.home-art  {
  grid-area: art;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #FF8000;
}

.home-art img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.home-art img:hover {    
  transform: scale(1.1);
  transition: all 0.5s;
}

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

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

.home-comm img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.home-comm img:hover {    
  transform: scale(1.1);  
  transition: all 0.5s;
}

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

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

.home-ocs img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.home-ocs img:hover {    
  transform: scale(1.1);
  transition: all 0.5s;
}

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

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

.home-socials img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.home-socials img:hover {    
  transform: scale(1.1);
  transition: all 0.5s;
}

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

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

.home-about img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.home-about img:hover {    
  transform: scale(1.1);
  transition: all 0.5s;
}

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

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

.home-card img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.home-card img:hover {    
  transform: scale(1.1);
  transition: all 0.5s;
}

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

.page-new {
  display: grid;
  width: calc(100% - 100vh);
  height: 100%;
  box-sizing: border-box;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
  "two two two"
  "one three four";
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  float: left;  
  position: relative;
}

.page-new-1 {
  grid-area: one;
  position: relative;
  overflow: hidden;
  border-top: 0px solid #FF8000;
  border-left: 0px solid #FF8000;
  border-right: 1px solid #FF8000;
  border-bottom: 1px solid #FF8000;
}

.page-new-1 img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  background-color: #804000;  
}

.page-new-1 img:hover {
  transform: scale(1.1);
  transition: all 0.5s;
}

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

.page-new-2 {
  grid-area: two;
  position: relative;
  overflow: hidden;
  border-top: 1px solid #FF8000;
  border-left: 0px solid #FF8000;
  border-right: 1px solid #FF8000;
  border-bottom: 1px solid #FF8000;
}

.page-new-2 img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  background-color: #804000;
}

.page-new-2 img:hover {
  transform: scale(1.1);
  transition: all 0.5s;
}

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

.page-new-3 {
  grid-area: three;
  position: relative;
  overflow: hidden;
  border-top: 0px solid #FF8000;
  border-left: 0px solid #FF8000;
  border-right: 1px solid #FF8000;
  border-bottom: 1px solid #FF8000;
}

.page-new-3 img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  background-color: #804000;
}

.page-new-3 img:hover {
  transform: scale(1.1);
  transition: all 0.5s;
}

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

.page-new-4 {
  grid-area: four;
  position: relative;
  overflow: hidden;
  border-top: 0px solid #FF8000;
  border-left: 0px solid #FF8000;
  border-right: 1px solid #FF8000;
  border-bottom: 1px solid #FF8000;
}

.page-new-4 img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  background-color: #804000;  
}

.page-new-4 img:hover {
  transform: scale(1.1);
  transition: all 0.5s;
}

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

/* My Art Page */

.page-myart {
  display: grid;
  width: 100vh;
  height: 100%;
  max-width: 100%;
  box-sizing: border-box;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-areas:
  "poke og"
  "poke comic"
  "pop gift"
  "pop other";    
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  float: left;
}

.myart-poke  {
  grid-area: poke;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #FF8000;
}

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

.myart-poke img:hover {    
  transform: scale(1.1);
  transition: all 0.5s;
}

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

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

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

.myart-pop img:hover {    
  transform: scale(1.1);
  transition: all 0.5s;
}

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

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

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

.myart-og img:hover {    
  transform: scale(1.1);
  transition: all 0.5s;
}

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

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

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

.myart-gift img:hover {    
  transform: scale(1.1);
  transition: all 0.5s;
}

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

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

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

.myart-other img:hover {    
  transform: scale(1.1);
  transition: all 0.5s;
}

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

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

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

.myart-comic img:hover {    
  transform: scale(1.1);
  transition: all 0.5s;
}

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

.myart-feature {
  width: calc(100% - 100vh);
  height: calc(90.4vh - 8px);
  overflow: hidden;
  object-fit: cover;
  float: left;    
}

.page-feature {
  display: grid;
  width: calc(100% - 100vh);
  height: 100%;
  box-sizing: border-box;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas:
  "one";
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  float: left;  
  position: relative;
}

.page-feature-1 {
  grid-area: one;
  overflow: hidden;
  border-top: 1px solid #FF8000;
  border-left: 0px solid #FF8000;
  border-right: 1px solid #FF8000;
  border-bottom: 1px solid #FF8000;
}

.page-feature-1 img {  
  height: 100%;
  width: 100%;
  object-fit: cover;
  background-color: #804000;  
}

.page-feature-1 img:hover {
  transform: scale(1.1);
  transition: all 0.5s;
}

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

/* Gallery Page */

.page-gallery {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding:2vh;
  text-align: center;
  color: #FF8000;
  font-size: 2vh;
  margin-bottom: 6vh;
}

.page-gallery img {
  width: 30vh;
  height: 30vh;
  object-fit: cover;
  border: 1px solid #FF8000;
  margin-left: 3vw;
  margin-right: 3vw;
  margin-bottom: 3vw;
  box-shadow: 10px 10px rgba(14,14,14,0.5);
  vertical-align: middle;
  z-index: 0;
  background-image: url("images/BG2.png");
  background-size: 20vh;
  background-color: #242424;
}

.page-gallery img:hover {  
  object-fit: contain;  
  background-color: #FF8000;
  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;
}

/* My OCs */

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

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

.myocs-menu img {
  height: 25vw;
  width: 30vh;
  margin: 1vh;
  border: 1px solid #FF8000;
  box-shadow: 10px 10px rgba(14,14,14,0.5);
  object-fit: cover;  
}

.myocs-menu img:hover {
  transform: scale(1.1);
  box-shadow: 15px 15px rgba(14,14,14,0.5);
  transition: all 0.5s;
}

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

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

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

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

/* Comms */

.page-comms {  
  color: #FF8000;  
  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 #FF8000;
  box-shadow: 10px 10px rgba(14,14,14,0.5);
  object-fit: cover;
  margin-bottom: 1vh;  
}

.page-comms-right img{  
  width: 13vw;
  height: 13vw;  
  border: 1px solid #FF8000;
  box-shadow: 10px 10px rgba(14,14,14,0.5);
  margin: 2vh;
  object-fit: cover;
  background-image: url("images/BG2.png");
  background-size: 30vh;
  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;
  background-color: #FF8000;
}

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

/* About */

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

.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: #FF8000;
  font-size: 2vh;
  padding:2vh;
}

.page-comic-menu img {
  width: 30vh;
  object-fit: cover;
  box-shadow: 1px 1px #F0F0F0, 2px 2px #E5E5E5, 3px 3px #D3D3D3, 4px 4px #B9B9B9, 5px 5px #9E9E9E, 6px 6px #8F8F8F;
  margin: 1vh;
}

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

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

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

.page-comic img {  
  max-width: 98%;
  margin-bottom: 0.5%;
  border: 1px solid #FF8000;  
  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 #FF8000;
  width: calc(100% - 2px);
  height:1px;
  background-color: #FF8000;
  margin-top: 2vh;
  margin-bottom: 2vh;
}

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