/* 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." */

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

@font-face{
  font-family: customFont-Chintzy;
  src: url(Fonts/ZTChintzy-Heavy.ttf);
}

body{
  background-color:#13131c;
  background-image:url("https://i.sstatic.net/iPsyl.png");
  background-repeat:repeat;
  background-blend-mode:multiply;
}

body, input, #footer textarea{
  color: white;
  font-family: 'ApfelGrotezk';
}

textarea{
  background-color:#1f0202;
}

#topMenu{
  background-color:#13131c;
  position:fixed;
  width:100%;
  height:60px;
  margin-top:-10px;
  padding-left:5%;
  padding-right:5%;
  margin-left:-8px;
  margin-right:-8px;
  box-shadow:-50px 2px 20px black;
}

#topMenu h1{
  font-size:20px;
  color:white;
}

#navTitle img{
  float:left;
  display:block;
}

#navTitle h1{
  float:left;
  display:block;
}

#navTitle img{
  width:45px;
  padding-top:7px;
  padding-right:10px;
}

#navBtns{
  padding-right:10%;
}

#navBtns a{
  float:right;
  display:block;
  text-decoration:none;
  padding:18px 24px;
  transition:0.2s;
  color:white;
}

#navBtns a:hover{
  transition:0.2s;
  color:#c90000;
}

#blogHeader{
  padding-top:80px;
}

#content{
  padding-top:80px;
  padding-bottom:50px;
  width:80%;
  margin-left:10%;
  margin-right:10%;
  min-height:700px;
}

.separator{
  width:95vw;
  margin:0 auto;
}

.separator:before, .separator:after{
  content:'';
  display:block;
}

.separator:after{
  border-right: 97.1vw solid #3b0404;
  border-top: 60px solid transparent;
  border-left:0;
  border-bottom:0;
}

#footer{
  height:180px;
  padding-left:5%;
  padding-right:5%;
  margin-left:-8px;
  margin-right:-8px;
  padding-bottom:30px;
  margin-bottom:-10px;
  background: #3b0404;
}

#footer li{
  list-style-type: none;
  padding-top:15px;
  transition:all 0.2s;
}

/* ========= TEXT ========= */

/* Page Titles */
.pageTitle {
  font-family: customFont-Chintzy;
  font-size:30px;
  color:white;
  text-decoration:none;
}

.sectionTitle{
  font-size:20px;
  color:white;
  text-decoration:none;
}

/* Footer text */
.footerText{
  font-size:12px;
  color:white;
  text-decoration:none;
}

/* ========= SCROLLBARS ========= */

/* Scrollbar design */
#footer ::-webkit-scrollbar, #contactFormIframe ::-webkit-scrollbar{
  width:3px;
  height:3px;
  background-color:rgba(20, 20, 20, 0.75);
  border-radius:10px;
}

/* Scrollbar handle design */
#footer ::-webkit-scrollbar-thumb, #contactFormIframe ::-webkit-scrollbar-thumb{
  background-color:#940000;
  border-radius:10px;
}

/* ========= BUTTONS ========= */

/* Button design */
.myButton{
  background-color:#a63838;
  border-radius:10px;
  padding:10px;
  margin-bottom:5px;
  transition:all 0.2s;
  font-size:12px;
  color:white;
  text-decoration:none;
}

.myButton a{
  color:white;
  text-decoration:none;
}

/* Button hover */
.myButton:hover, .myButton-img:hover{
  transform:scale(1.15);
  border-style:solid;
  border-width:1px;
  border-color:white;
  border-radius:2px;
  transition:all 0.2s; 
}

#links-column{
  float:left;
  width:17%;
}

#siteLinksFooter{
  width:60%;
  margin-right:5%;
  float:right;
  height:140px;
  overflow-y:auto;
  text-align:center;
}

#siteLinksFooter p{
  margin-bottom:30px;
}

/* ========= SITE IMAGE LINKS GRID ========= */

* {
  box-sizing: border-box;
}

.siteImgLink-column{
  float:left;
  width:100%;
  padding:5px;
}

.siteImgLink-column img{
  width:100%;
  max-height:31px;
  max-width:88px;
}

.siteImgLink-row{
  content:"";
  display:table;
  clear:both;
  width:100%;
}

/* ========= MY SITE BUTTON LINKBACK ========= */
#linkback{
  text-align:center;
  float:right;
  height:100px;
  width:10%;
  padding-left:2%;
}

#linkback img{
  transition:all 0.2s;
  width:100%;
  max-width:88px;
}

#linkback-code{
  float:left;
  height:50px;
  width:100%;
}