/* 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: 0.8vw;
  padding-top: 2%;
  padding-left: 3%;
  padding-right: 3%;
  }


@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: 0px solid #242424;
  border-left: 4px solid #FF8000;
  border-right: 4px solid #FF8000;
  border-bottom: 0px solid #242424;   
  
}

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

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: 0.9vw;
  text-align: left;
  padding-top: 0.2%;  
  padding-left: 0.5%;
  color: #242424;
}

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

/* Home Page */

.home-page {
  color: #FF8000;
  background: #3C2F22;
  display: grid;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  grid-template-columns: 1fr 1fr 2fr 2fr;
  grid-template-rows: 2fr 0.55fr 0.55fr 0.8fr;
  grid-template-areas:
  "art comm recent feature"
  "ocs socials recent feature" 
  "ocs socials club club" 
  "ocs about club club";
  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;
}

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

.home-recent  {
  grid-area: recent;
  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-recent img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.home-feature  {
  grid-area: feature;
  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-feature img {
  height:100%;
  width:100%;
  object-fit: cover;
  
}

.home-club  {
  grid-area: club;
  position: relative;
  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-color: pink;
  border-right: 1px solid #FF8000;
  border-bottom: 1px solid #FF8000;    
}

/* Socials Page */

.social-page {
  color: #FF8000;
  background: #3C2F22;
  display: grid;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  grid-template-columns: 2fr 3fr 1.5fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas:
  "discord bluesky pf"
  "discord bluesky pf"
  "discord fur pf"
  "stream fur i"
  "stream hf i"
  "stream hf i";
  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;  
}

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

.social-discord img {
  height: 100%;
  width: 100%;
  object-fit: cover;  
}

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

.social-stream img {
  height: 100%;
  width: 100%;
  object-fit: cover;  
}

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

.social-bluesky img {
  height: 100%;
  width: 100%;
  object-fit: cover;  
}

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

.social-fur img {
  height: 100%;
  width: 100%;
  object-fit: cover;  
}

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

.social-hf img {
  height: 100%;
  width: 100%;
  object-fit: cover;  
}

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

.social-pf img {
  height: 100%;
  width: 100%;
  object-fit: cover;  
}

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

.social-i img {
  height: 100%;
  width: 100%;
  object-fit: cover;  
}

/* About Page */

.about-page {
  color: #FF8000;
  background: #3C2F22;
  display: grid;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 2fr 1fr;
  grid-template-areas:
  "id details" 
  "stats details";
  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;  
}

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

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

.about-details  {
  grid-area: details;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: scroll;
  margin: 0.7vw;
  font-size: 0.9vw;
}

.about-stats  {
  grid-area: stats;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  margin-top: 0.0vw;
  margin-left: 0.7vw;
}

/* Error Page */

.error-page {
  color: #FF8000;
  background: #3C2F22;
  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;  
}

.error-text {
  margin: auto;
  height: 75%;  
  display: grid;
  place-items: center;  
}

/* Text Boxes */

.section-text {
  position: absolute;
  top: 0;
  left: 0; 
  margin: 0.3vw;
  font-size: 1.1vw;
  padding:0.3vw;
  padding-top:0.2vw;  
  border: 1px solid #FF8000;  
  background-color: #3C2F22;
  color: #ff8000;
  z-index: 9000;
}

.home-title {
  position: absolute;
  top: 0;
  left: 0; 
  margin: 0.3vw;
  margin-top: 2.6vw;
  font-size: 0.8vw;
  padding:0.3vw;
  padding-top:0.2vw;  
  border: 1px solid #FF8000;  
  background-color: #3C2F22;
  color: #ff8000;
  z-index: 9000;
}

.section-textquit {
  position: absolute;
  top: 0;
  right: 0; 
  margin: 0.1vw;
  margin-top: 0.4vw;
  font-size: 1.1vw;
  padding:0.3vw;
  padding-top:0.2vw;
  padding-left:0.5vw;
  padding-right:0.5vw;
  background-color: #3C2F22;
  color: #ff8000;
  z-index: 9000;
}

.back-button {
  position: relative;  
  margin: 1vw;  
  font-size: 2vw;
  padding:0.4vw;
  padding-top:0.3vw;
  padding-left:0.9vw;
  padding-right:0.9vw;
  background-color: #242424;
  color: #ff8000;
  z-index: 9000;
  border: 1px solid #FF8000;
  display: grid;
  place-items: center;  
}