@charset "UTF-8";
/* Common */
/* Written by Hanson Ma */

*{
	margin: 0;
}

html, body{
	height: 100%;
	background: #181818; 
	font-family: "Roboto-Regular", "Trebuchet MS";
	cursor: url("../Resources/cursor-football.png"), default; /* If swag fails */
}

::-moz-selection { /* Code for Firefox */
  color: #fff;
  background: #56d46a;
}

::selection {
  color: #fff;
  background: #56d46a;
}

.hidemagic{
  display: none;
}

#loadmorehold{
  float: left;
  width: 100%;
  height: 130px;
  margin-top: 30px;
  color: #000;
  line-height: 20px;
  font-size: 20px;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
}

#yeet{
  color: #4D4D4D;
  font-size: 13px;
  font-family: "Roboto-Italic";
  margin-top: 10px;
}

#loadAll{
  color: #56d46a;
  text-decoration: none;
  font-size: 20px;
}

#loadAll:hover{
  color: #439b51;
}

#loadmorehold2{
  float: left;
  width: 100%;
  height: auto;
  background:;
  text-align: center;
  margin-top: 30px;
  font-family: "Roboto-Thin";
}

#held{
  margin: 0 auto;
  width: 50px;
  height: 25px;
  /*background: url("../Resources/down.png");
  background-size: 100% 100%;*/
  position: relative;
}

#loadMore{
  width: 50px;
  height: 25px;
  position: absolute;
  z-index: 50;
}

nav{
	height: 62px;
	width: 100%;
	position: fixed;
	top: 0;
	background-color: rgba(255,255,255,.8);
	-moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  font-family: "Roboto-Light", "Trebuchet MS";
  line-height: 62px;
  z-index: 1000000001;
}

nav a{
	color: #000;
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
  nav {
      background: rgba(255,255,255,.8);
      -webkit-backdrop-filter: brightness(5) blur(7px);
      backdrop-filter: brightness(5) blur(7px);
  }
}

nav ul{
	float: center;
	width: 855px;
	height: 62px;
	margin: 0 auto;
	list-style-type: none;
	overflow: hidden;
	padding: 0;
}

nav li{
	float: left;
	height: 62px;
	text-align: center;
	transition: background 0.3s;
	-moz-transition: background 0.3s;
	-webkit-transition: background 0.3s;
	-o-transition: background 0.3s;
}

nav li:hover{
	background: #56d46a;
	color: #ffffff;
}

#baconsandwich{
	width: 375px;
	font-size: 32px;
}

.eggsandwich{
	width: 160px;
	font-size: 22px;
}

#overlay{
	width: 855px;
	height: 100%;
	margin: 0 auto;
	margin-top: 62px;
}

#goback{
  	float: left;
  	z-index: 50;
  	width: auto;
  	height: 22px;
  	margin-top: 25px;
  	font-size: 18px;
  	color: #56d46a;
  	-moz-user-select: -moz-none;
  	-khtml-user-select: none;
  	-webkit-user-select: none;
  	position: relative;
}

#goback:hover{
  	color: #439b51;
}

#hidy{
	display: none;
}

#disqus_thread{
  padding-left: 0px;
  padding-right: 0px;
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
}

#backtopBTN{
  display: none;
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 80px;
  left: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background: rgba(86,212,106,.7);
  cursor: pointer;
  border-radius: 50%;
  padding: 0px;
}

#backtopBTN:hover{
  background-color: rgba(67,155,81,.7);
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
  #backtopBTN {
      background: rgba(86,212,106,.7);
      -webkit-backdrop-filter: brightness(2) blur(4px);
      backdrop-filter: brightness(1) blur(4px);
  }
  #backtopBTN {
      background: rgba(67,155,81,.7);
  }
}

#gotop{
    width: 100%;
    height: 100%;
    background: url("../Resources/goup.svg");
    background-position: center;
    background-size: 50%;
    background-repeat: no-repeat;
    margin: 0;
}

/* The holy magic */

@media only screen and (max-width: 855px) {
  	nav{
  		height: 50px;
  		line-height: 50px;
  	}
  	nav ul{
  		width: 100%;
  		height: 50px;
  	}
  	.noper{
  		display: none;
  	}
  	#baconsandwich{
  		width: 19%;
  	}
  	.eggsandwich{
  		float:left;
  		width: 27%;
  	}
  	nav li{
  		display:inline-block;
  	}
  	#overlay{
  		margin-top: 50px;
  		width: 100%;
  	}
  	#goback{
    	margin-left: 25px;
  	}
    #loadmorehold{
    margin-top: 13px;
    }
    #disqus_thread{
      padding-left: 10px;
      padding-right: 10px;
    }
    #backtopBTN{
        width: 50px;
        height: 50px;
        left: 15px;
        bottom: 65px;
    }
}

@media only screen and (max-width: 750px) {
	#goback{
    	margin-left: 13px;
    	margin-top: 13px;
  	}
}

@media only screen and (max-width: 600px) {
  	#goback{
  		margin-left: 0px;
    	margin-top: 0px;
    	width: 100%;
    	height: 45px;
    	background: #3a3a3a;
    	display: flex;
    	align-items: center;
    	font-size: 20px;
    	z-index: 50;
  	}

  	#texty{
    	margin-left: 15px;
  	}

  	#hidy{
    	display: inline;
  	}

  	#goback:hover{
    	background: #2f2f2f;
    	color: #56d46a;
  	}
}

#copyright{
  	width: 100%;
  	height: 50px;
  	background: rgba(86,212,106,.5);
  	bottom: 0;
  	z-index: 10000;
  	position: fixed;
  	color: #000;
  	-moz-user-select: -moz-none;
  	-khtml-user-select: none;
  	-webkit-user-select: none;
  	transition: background 0.3s;
  	-moz-transition: background 0.3s;
  	-webkit-transition: background 0.3s;
  	-o-transition: background 0.3s;
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
  #copyright {
      background: rgba(86,212,106,.5);
      -webkit-backdrop-filter: brightness(1) blur(4px);
      backdrop-filter: brightness(1) blur(4px);
  }
}

#copyright:hover{
  	background: rgba(86,212,106,1);
}

.nocopy{
  	width: 100%;
  	height: 25px;
  	line-height: 25px;
  	text-align: center;
  	font-size: 14px;
}

.jazzy{
  	font-family: "Roboto-Medium", "Trebuchet MS";
}

.jazz{
  	display: none;
  	font-family: "Roboto-Medium", "Trebuchet MS";
}

@media only screen and (max-width: 500px) {
  	#copyright{
    	height: 40px;
  	}

  	.nocopy{
    	height: 20px;
    	line-height: 20px;
    	font-size: 12px;
  	}

  	.jazz{
    	display: inline;
  	}

  	.jazzy{
    	display: none;
  	}
    #backtopBTN{
        bottom: 55px;
    }
}

/* font stuff */

@font-face {
    font-family: "Roboto-Bold";
    src: url(roboto/Roboto-Bold.ttf);
}
@font-face {
    font-family: "Roboto-Italic";
    src: url(roboto/Roboto-Italic.ttf);
}
@font-face {
    font-family: "Roboto-Light";
    src: url(roboto/Roboto-Light.ttf);
}
@font-face {
    font-family: "Roboto-LightItalic";
    src: url(roboto/Roboto-LightItalic.ttf);
}
@font-face {
    font-family: "Roboto-Medium";
    src: url(roboto/Roboto-Medium.ttf);
}
@font-face {
    font-family: "Roboto-MediumItalic";
    src: url(roboto/Roboto-MediumItalic.ttf);
}
@font-face {
    font-family: "Roboto-Regular";
    src: url(roboto/Roboto-Regular.ttf);
}
@font-face {
    font-family: "Roboto-Thin";
    src: url(roboto/Roboto-Thin.ttf);
}
@font-face {
    font-family: "Roboto-ThinItalic";
    src: url(roboto/Roboto-ThinItalic.ttf);
}