/* 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-attachment: scroll,fixed;
  background-image: url("images/BG1.png"),radial-gradient(circle,#FF8000 30%,#242424 90%);
  background-color: #242424;
  background-size: 2%,auto;
  font-family: 'F5.6', 'Trebuchet MS';
  font-size: 2vh;
  padding: 0.5%;  
}

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

.main  {
  display: flex;
  flex-direction: column;
  background: #FF8000;
  margin: auto;
  overflow: hidden;
  position: relative;
  border-top: 4px solid #FF8000;
  border-left: 4px solid #FF8000;
  border-right: 4px solid #FF8000;
  border-bottom: 4px solid #FF8000;
  height: 89vh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: inherit;
  text-align: left;
  padding-bottom: 0.5vh;
  padding-left: 0.5%;
  font-size: 2vh;
  
}

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

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

.credit {
  position: sticky;
  top: 0;
  z-index: 100;
  background: inherit;
  font-size: 1.5vh;
  text-align: left;
  padding-top: 0.2%;  
  padding-left: 0.5%;
  color: #242424;
}

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

.button-link {
background: #FF8000;
margin: auto;
margin: 1vh;
width: 90%;
color: #242424;
padding-top: 1vh;
padding-bottom: 1vh;
font-size: 30px;
box-shadow: 10px 10px rgba(14,14,14,0.5);
}

li {
  margin-top: 0.5vh;
}

/* Home Page */

.home-page {
  color: #FF8000;
  background: #3C2F22;  
  display: grid;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 4fr 2fr 2fr 3fr;
  grid-template-areas:
  "art comm"
  "ocs socials"
  "ocs about"   
  "club club";
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-top: 4px solid #242424;
  border-left: 4px solid #242424;
  border-right: 4px solid #3C2F22;
  border-bottom: 4px solid #3C2F22;
}

.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-comm  {
  grid-area: comm;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid #FF8000;
  border-bottom: 1px solid #FF8000;
  border-top: 1px solid #FF8000;
}

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

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

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

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

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

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

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

/* Club Page */

.home-club  {
  grid-area: club;
  position: relative;
  font-size: 0;
  min-width: 0;
  min-height: 0;
  overflow: scroll;
  background-image: linear-gradient(rgba(35,28,36,0.9), rgba(218,0,255,0.3)),url("images/Club/ClubBG.png"),linear-gradient(#242424, #DA00FF, #FFCCFF);
  background-size: auto,10vh,auto;
  background-color: pink;
  border-left: 1px solid #FF8000;
  border-right: 1px solid #FF8000;
  border-bottom: 1px solid #FF8000;
  padding-top: 5vh;
}

.home-club img {
  height:calc(15vh - 0vh);
}

/* My Art Page */

.myart-page {
  color: #FF8000;
  background: #3C2F22;
  display: grid;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1.5fr 0.8fr 0.7fr;
  grid-template-areas:
  "poke pop"
  "og comic"
  "gift other";    
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-top: 4px solid #242424;
  border-left: 4px solid #242424;
  border-right: 4px solid #3C2F22;
  border-bottom: 4px solid #3C2F22;
}

.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-pop  {
  grid-area: pop;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid #FF8000;
  border-bottom: 1px solid #FF8000;
  border-top: 1px solid #FF8000;  
}

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

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

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

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

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

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

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

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

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

/* Gallery Page */

.gallery-art {
  position: relative;
  min-width: 0;
  min-height: 0;
  width: 95%;
  overflow: hidden;
  font-size: 0;  
}

.gallery-art img {
  width: 30vh;
  max-height: 30vh;
  object-fit: cover;
  border: 1px solid #FF8000;
  margin: 1vw;
  box-shadow: 10px 10px rgba(14,14,14,0.5);
  vertical-align: middle;
}

.gallery-art-dice {
  position: relative;
  min-width: 0;
  min-height: 0;
  width: 95%;
  overflow: hidden;
  font-size: 0;  
}

.gallery-art-dice img {
  width: 30vh;
  max-height: 30vh;
  object-fit: cover;
  border: 1px solid #9F40FF;
  margin: 1vw;
  box-shadow: 10px 10px rgba(14,14,14,0.5);
  vertical-align: middle;
}

.gallery-art-angel {
  position: relative;
  min-width: 0;
  min-height: 0;
  width: 95%;
  overflow: hidden;
  font-size: 0;  
}

.gallery-art-angel img {
  width: 30vh;
  max-height: 30vh;
  object-fit: cover;
  border: 1px solid #FD59B7;
  margin: 1vw;
  box-shadow: 10px 10px rgba(14,14,14,0.5);
  vertical-align: middle;
}

/* Comics page */

.comicbook-art {
  position: relative;
  min-width: 0;
  min-height: 0;
  width: 95%;
  overflow: hidden;
  font-size: 0; 
}

.comicbook-art 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;
}

.comic-page {
  position: relative;
  min-width: 0;
  min-height: 0;
  width: 95%;
  overflow: hidden;
  font-size: 0; 
}

.comic-page img {
  width: 30vh;
  margin:1vh;
  object-fit: cover;
  border: 1px solid #FF8000;
  box-shadow: 10px 10px rgba(14,14,14,0.5);
  vertical-align: middle;
}

/* Comm Page */

.comm-page {
  color: #FF8000;
  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,50%;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: scroll;
  border-top: 4px solid #242424;
  border-left: 4px solid #242424;
  border-right: 4px solid #3C2F22;
  border-bottom: 4px solid #3C2F22; 
}

.comm-main {
  position: relative;
  min-width: 0;
  min-height: 0;
  height:100%;
  border-right: 1px solid #FF8000;
  border-bottom: 1px solid #FF8000;
}
  
.comm-text {
  margin: 2vh;  
}

.comm-text img {
  border: 1px solid #FF8000;
  height: 20vw;
  object-fit: cover;
  margin-bottom: 2vh;
  box-shadow: 10px 10px rgba(14,14,14,0.5);
}  

/* My OCs Page */

.myocs-page {
  color: #FF8000;
  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,50%;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: scroll;
  border-top: 4px solid #242424;
  border-left: 4px solid #242424;
  border-right: 4px solid #3C2F22;
  border-bottom: 4px solid #3C2F22;
}

.myocs-main {
  position: relative;
  min-width: 0;
  min-height: 0;
  height:100%;
  border-right: 1px solid #FF8000;
  border-bottom: 1px solid #FF8000;
}

.myocs-text {
  margin: 2vh;
}

.myocs-menu {
  font-size: 0;
  margin: 2vh;
}

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

.myocs-art img {
  
  width: 95%;
  max-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;  
}

/* Socials Page */

.social-page {
  color: #FD59B7;
  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,50%;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: scroll;
  border-top: 4px solid #242424;
  border-left: 4px solid #242424;
  border-right: 4px solid #3C2F22;
  border-bottom: 4px solid #3C2F22; 
}

.social-main {
  position: relative;
  min-width: 0;
  min-height: 0;
  height:100%;
  border-right: 1px solid #FF8000;
  border-bottom: 1px solid #FF8000;
}
  
.social-text {
  margin: 2vh; 
}

.social-text img {
  border: 1px solid #FD59B7;
  width: 30vh;
  float: left;
  margin: 1vh;
  object-fit: cover
}

/* About Page */

.about-page {
  color: #FD59B7;
  background: #3D2332;
  background-image: linear-gradient(to right, rgba(255,0,0,0) 0%, #3D2332 20%, #3D2332 80%, rgba(255,0,0,0) 100%),url("images/BG2.png");
  background-attachment: fixed,scroll;
  background-size: auto,50%;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: scroll;
  border-top: 4px solid #242424;
  border-left: 4px solid #242424;
  border-right: 4px solid #3D2332;
  border-bottom: 4px solid #3D2332; 
}

.about-main {
  position: relative;
  min-width: 0;
  min-height: 0;
  height:100%;
  border-right: 1px solid #FD59B7;
  border-bottom: 1px solid #FD59B7;
}
  
.about-text {
  margin: 2vh; 
}

.about-text 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);
}

/* Welcome Page */

.welcome-page {
  color: #FF8000;
  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,50%;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 4px solid #3C2F22;
  border-top: 4px solid #242424;
  border-left: 4px solid #242424;
  border-right: 4px solid #3C2F22;
  border-bottom: 4px solid #3C2F22;  
}

.welcome-main {
  position: relative;
  min-width: 0;
  min-height: 0;
  height:100%;
  border-right: 1px solid #FF8000;
  border-bottom: 1px solid #FF8000;
}

.welcome-text {
  margin: 3vh; 
}

/* Error Page */

.error-page {
  color: red;
  background: #3D2323;
  background-image: linear-gradient(to right, rgba(255,0,0,0) 0%, #3D2323 20%, #3D2323 80%, rgba(255,0,0,0) 100%),url("images/BG2.png");
  background-attachment: fixed,scroll;
  background-size: auto,50%;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-top: 4px solid #242424;
  border-left: 4px solid #242424;
  border-right: 4px solid #3D2323;
  border-bottom: 4px solid #3D2323;
   
}

.error-main {
  position: relative;
  min-width: 0;
  min-height: 0;
  height:100%;
  border-right: 1px solid red;
  border-bottom: 1px solid red;
}

.error-text {
  margin: 3vh; 
}

/* Text Boxes */

.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);
}

/* Font */

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

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

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

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