/* CSS Document */
/*

Discord:
    Blurple: #7289da rgba(114, 137, 218, 1.0)
    Full White: #ffffff rgba(255, 255, 255, 1.0)
    Greyple: #a3afba rgba(163, 175, 186, 1.0)
    Dark, but not black: #343335 rgba(52, 51, 53, 1.0)
    Not quite black: #2c2c2c rgba(44, 44, 44, 1.0)
    Balance: #66c0b2 rgba(102, 192, 178, 1.0)
    Brilliance: #ef7864 rgba(239, 120, 100, 1.0)
    Bravery: #9c88bf rgba(156, 136, 191, 1.0)
    Oranple: #fc964b rgba(252, 150, 75, 1.0)
    Hypesquad: #fab849 rgba(250, 184, 73, 1.0)
    Partner: #4f7ec0 rgba(79, 126, 192, 1.0)

Rainway:
    Dodger Blue: #029aeb rgba(2, 154, 235, 1.0)
    Malachite: #25c85e rgba(37, 200, 94, 1.0)
    Torea Bay: #2f2d83 rgba(47, 45, 131, 1.0)
    Midnight Express: #161d45 rgba(22, 29, 69)

font-family: 'Ubuntu Mono', monospace;
font-family: 'Roboto', sans-serif;

Icons:
	BTTBTN: "\f077"
	CodePen: "\f1cb"
	Git: "\f1d3"
	Github: "\f09b"
	StackOverflow: "\f16c"
	JS: "\f3b8"
	HTML: "\f13b"
	CSS: "\f38b"
	Cloudflare: "\e07d"
*/


body{
	-webkit-font-smoothing:antialiased;
	-webkit-font-kerning:normal;
	-webkit-text-size-adjust:100%
	}
a{
	text-decoration:none
	}
html,body{
	width:100vw;
	background:#2c2c2c;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	overflow-x:hidden;
	margin-bottom:-1px;
	font-family:roboto,sans-serif
	}

/* Title */

/*Neon*/
#title{
	font-size:7rem;
	margin:20px 0;
	-webkit-transition:all .5s;
	-moz-transition:all .5s;
	transition:all .5s;
	list-style-type:none;
	text-transform:uppercase;
	text-align:center
	}
#title a{
	color:#fc964b;
	font-family:ubuntu mono,monospace,700
	}
#title a:hover{
	-webkit-animation:neon5 1.5s ease-in-out infinite alternate;
	-moz-animation:neon5 1.5s ease-in-out infinite alternate;
	animation:neon5 1.5s ease-in-out infinite alternate
	}
#title a:hover{
	color:#fff
	}

/* Glow for webkit */
@-webkit-keyframes neon5{
	from{
		text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #f90,0 0 70px #f90,0 0 80px #f90,0 0 100px #f90,0 0 150px #f90
		}
		to{
			text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #f90,0 0 35px #f90,0 0 40px #f90,0 0 50px #f90,0 0 75px #f90
		}
	}

/*glow for mozilla*/
@-moz-keyframes neon5{
	from{
		text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #f90,0 0 70px #f90,0 0 80px #f90,0 0 100px #f90,0 0 150px #f90
		}to{
			text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #f90,0 0 35px #f90,0 0 40px #f90,0 0 50px #f90,0 0 75px #f90
		}
	}

/*glow*/
@keyframes neon5{
	from{
		text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #f90,0 0 70px #f90,0 0 80px #f90,0 0 100px #f90,0 0 150px #f90
		}to{
			text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #f90,0 0 35px #f90,0 0 40px #f90,0 0 50px #f90,0 0 75px #f90
		}
	}

/* Menu */
nav{
	height:90vh;
	width:100vw;
	padding-top:10%;
	font-family:ubuntu mono,monospace;
	font-style:normal;
	font-weight:700;
	background-image:url("../images/backgrounds/Sprinkles dark_bg.svg");
	background-attachment:fixed;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover
	}
.Menu-list{
	transform-style:preserve-3d;
	transform:perspective(60rem);
	font-size:4.25rem;
	line-height:1.2;
	text-transform:uppercase;
	text-align:center;
	display:flex;
	flex-direction:column;
	align-items:center;
	transform:rotateX(-10deg) rotateY(20deg)
	}
.Menu-list-item{
	position:relative;
	color:transparent;
	cursor:pointer
	}
.Menu-list-item::before{
	content:'';
	display:block;
	position:absolute;
	top:49%;
	left:-10%;
	right:-10%;
	height:4px;
	border-radius:4px;
	margin-top:-2px;
	background:#fc964b;
	transform:scale(0);
	transition:transform .8s cubic-bezier(.16,1.08,.38,.98);
	z-index:1
	}
.Mask{
	display:block;
	position:absolute;
	overflow:hidden;
	color:#fc964b;
	top:0;
	height:49%;
	transition:all .8s cubic-bezier(.16,1.08,.38,.98)
	}
.Mask span{
	display:block
	}
.Mask+.Mask{
	top:48.9%;
	height:51.1%
	}
.Mask+.Mask span{
	transform:translateY(-49%)
	}
.Menu-list-item:hover .Mask,.Menu-list-item:active .Mask{
	color:#fff;
	transform:skewX(12deg) translateX(5px)
	}
.Menu-list-item:hover .Mask+.Mask,.Menu-list-item:active .Mask+.Mask{
	transform:skewX(12deg) translateX(-5px)
	}
.Menu-list-item:hover::before,.Menu-list-item:active::before{
	transform:scale(1)
	}

/* Back to top button */

/* #bTTBtn{
	display:inline-block;
	background-color:#fab849;
	width:50px;
	height:50px;
	text-align:center;
	border-radius:4px;
	position:fixed;
	bottom:30px;
	right:30px;
	transition:background-color .3s,opacity .5s,visibility .5s;
	opacity:0;
	visibility:hidden;
	z-index:99
	}
#bTTBtn::after{
	content: "\f077";
	font-family:FontAwesome;
	font-weight:400;
	font-style:normal;
	font-size:2em;
	line-height:50px;
	color:#fff
	}
#bTTBtn:hover{
	cursor:pointer;
	background-color:#333;
	content:"\f077"
	}
#bTTBtn:active{
	background-color:#555
	}
#bTTBtn.show{
	opacity:1;
	visibility:visible
	} */
#bTTBtn {
	position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
	border-radius:4px;
    display:inline-block;
	background-color:#fab849;
	width:50px;
	height:50px;
	text-align:center;
	transition:background-color .3s,opacity .5s,visibility .5s;
	z-index:99;
}
#bTTBtn::after{
	content: "\f077";
	font-family:FontAwesome;
	font-weight:400;
	font-style:normal;
	font-size:2em;
	line-height:50px;
	color:#fff
	}
/*#bTTBtn span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
     border:8px solid transparent;
    border-bottom-color:#ffffff;
	font-family:FontAwesome;
	font-weight:400;
	font-style:normal;
	font-size:2em;
	line-height:50px;
	color:#fff;
	content: "\f077";
	transition:background-color .3s,opacity .5s,visibility .5s;
}*/
#bTTBtn:hover {
    background-color:#555;
    opacity:1;filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}

/* Content blocks */
.block{
	width:100vw
	}
.content{
	font-family:roboto,sans-serif;
	color:#2c2c2c;
	padding:1vw;
	padding-top:1vh
	}
#social{
	background-color:#fab849;
	height:100vh;
	border-radius:.15rem
	}
#banner{
	height:25vh;
	background-image:url("../images/backgrounds/Sprinkles dark_bg.svg");
	background-attachment:fixed;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover
	}
#about{
	display:flex;
	flex-direction:row
	}
.acolumn{
	width:33.3vw
	}
#about #acoll{
	background-color:#66c0b2;
	border-radius:.15rem 0 0 .15rem
	}
#about #acolm{
	background-color:#ef7864
	}
#about #acolr{
	background-color:#9c88bf;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	padding:1vh 2vw;
	border-radius:0 .15rem .15rem 0
}
#contact{
	background-color:#7289da;
	height:102vh
	}
#icons-title{
	display:flex;
	}
#rainway-url{
	color:#0299eb;
	}
#hypesquad-url{
	color:#fab849;
	}
#discord-url{
	color:#7289da;
	}
#lmd-url{
	color:#edb511;
	}
#nerdforge-url{
	color:#741FBE;
	}
#twitch-url{
	color:#9146FF;
	}
#wolfytoons-url{
	color:#EE8F4C;
	}
#jordansweeto-url{
	color:#CB0806;
	}
#wolfychu-url{
	color:#95E0FF;
	}


/* About Icons */
#icons-wrapper{
	/* background-color:#343335; */
	border-radius:.15rem;
	color:#23272a;
	font-weight:700;
	display:flex;
	flex: 1, 0, 25%;
	flex-wrap:wrap;
	flex-direction:row;
	justify-content:space-around;
	align-items:flex-start;
	align-content:space-around;
	padding:2vh 1vw
	}


/* Bootstrap sections */
.card{
	position:relative;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-direction:column;
	flex-direction:column;
	min-width:0;
	word-wrap:break-word;
	background-color:#fff;
	background-clip:border-box;
	border:1px solid rgba(0,0,0,.125);
	border-radius:.15rem;
	max-width:25vw;
	overflow:hidden;
	margin:1vh;
	}
.mb-3{
	margin-bottom:1rem!important
	}
.card-header{
	padding:.75rem 1.25rem;
	margin-bottom:0;
	width:10vw;
	height: 10vw;
	}
.card-body{
	width:10vw;
	height:10vw;
	-ms-flex:1 1 auto;
	flex:1 1 auto;
	padding:1.25rem;
	background-color:rgba(0,0,0,.05);
	border-top:1px solid rgba(0,0,0,.125);
}
.card-title{
	margin-bottom:.75rem
	}
.card-text:last-child{
	margin-bottom:0
	}
/*.icon1{
	width:20vw
	}*/
/*img#icon1{
	max-width:90%
	}*/
.card-header{
	max-width:8vw;
	margin:auto auto;
	}
#contact{
	background-image:url("../images/backgrounds/Sprinkles dark_bg.svg");
	background-attachment:fixed;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover
	padding: 20px;
	margin: 0 auto -50px;
	}

/* Footer styling */
#footer-left{
		float: left;
}

#footer-right{
		float: right;
}

.footer > li {
	height: 3em;
	width: 15em;
	border-radius: 4px;
	border: 1px solid rgba(0,0,0,.125);
	margin: 5%;
	position: relative;
}
.footercard {
	padding: 5%;
	background-color: #404040;
	float: left;
}
.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
	float: left;
}

#CodePen::before{

}
#Git::before{

}
#github{

}
#HTML{

}
#CSS{

}
#JS{

}
#StackOverflow{

}
#Cloudflare::before{
	/* font-family:FontAwesome;
	font-weight:400;
	font-style:normal;
	font-size:2em;
	content: "\e07d"; */
}
#footer, #push {
	/* background-color: #a1a1a1; */
	background-color:#2c2c2c;
	color:#fff;
}