html, body, div, h1, h2, h3 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	list-style-type: none;
	vertical-align: baseline; 
	scroll-behavior: smooth;
	font-family: 'Open Sans', sans-serif;
}
img{
	border-radius: 1px;
	width: 500px;
}
.container{
  background-color: #222222;
  margin: 0 0 0 0;
  width: 100%;
}
#projects{
  margin: 0 0 0 0;
  padding: 30px 100px;
  color: #666666;
  background-color: #111111;
}
.projects{
	margin: 0 0 0 0;
	padding: 30px 100px;
	color: #666666;
	background-color: #111111;
}
h1 {
  text-align: center;
}
#title{
	position: absolute;
	top: 64%;
	left: 50%;
	transform: translateX(-50%);
	width: fit-content;
	margin: 0 auto;
  font-size: 3.2em;
  animation: fadeIn 1.8s ease 1;
  text-align: left;
  color: #f5f5f5 !important;
}
#subtitle{
	position: absolute;
	top: calc(64% + 60px);
	left: 50%;
	transform: translateX(-50%);
}
#scroll-button{
	position: absolute;
	top: calc(64% + 105px);
	left: 50%;
	transform: translateX(-50%);
}
.slowFade{
	animation: fadeIn 2.5s ease 1;
}
main{
  width: 75%;
  float: right;
}
.dark {
	font-size: .8em;
	background-color: #111111;
}			
.wrapper.fullscreen {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
}
#intro {
font-family: 'Poppins', sans-serif;
background-color: #222; 
color:#f5f5f5;
background-size: cover;
background-attachment: fixed;
background-repeat: repeat;
height: 100vh;
margin: 0;
border-radius: 0;
}
#intro p {
	font-size: 1.25em;
}
p { 
	text-align: center;
	margin-top: 10px;
}
.scroll-button{
	animation: blink 1s infinite alternate, fadeIn 2.5s ease 1;
	background-color: transparent;
	border: none;
	color: #f5f5f5;
	cursor: pointer;
	margin: .5em  auto;
	width: 100%;
}
.fa-3x{
	font-size: 30px!important;
	color: #f5f5f5;
	margin-left: 10px;
	margin-right: 10px;
}
svg:not(:root).svg-inline--fa {
	overflow: visible;
}
.svg-inline--fa.fa-w-14 {
	width: 0.875em;
}
.fa-2x {
	font-size: 2em!important;
}
.svg-inline--fa {
	display: inline-block;
	font-size: inherit;
	height: 1em;
	overflow: visible;
	vertical-align: -0.125em;
}
footer {
	background-color: #222222;
	padding: 10px;
}
:focus{
	outline: 0px!important;
}
.middle {
	width: 100%;
	transition: .5s ease;
	opacity: 0;
	position: absolute;
	top: 12px;
	left: 10px;
	text-align: center;
	border-radius: 3px;
}

.img-fluid{
	transition: filter .4s ease;
}

.img-fluid:hover{
	filter: brightness(.7);
	transition: filter .4s ease;
}

.text {
	color: white;
	font-size: 16px;
	line-height: 30px;
	padding: 0px 11px;
	text-align: left;
}
.card{
	margin: 25px auto;
	width: 500px;
	border: 0px;
	background-color: #151515;
	border: 1px solid #666;
	border-radius: 0px;
}
.card h2{
	text-align: center;
	color: #f5f5f5;
	padding: 15px;
	font-size: 1.5em;
	font-weight: 100;
}
.ico {
	margin: 3px;
	height: 30px;
	width: 30px;
	display: inline-block;
}
.ico-container{
	margin: 0 auto;
	height: 50px;
	width: fit-content;
}
.bootstrap{
	filter: invert(23%) sepia(14%) saturate(2336%) hue-rotate(222deg) brightness(103%) contrast(88%);
}
.spotify{
	filter: invert(66%) sepia(96%) saturate(424%) hue-rotate(81deg) brightness(88%) contrast(92%);
}
.angularjs{
	filter: invert(28%) sepia(89%) saturate(3040%) hue-rotate(340deg) brightness(91%) contrast(96%);
}
.react{
	filter: invert(73%) sepia(30%) saturate(719%) hue-rotate(150deg) brightness(99%) contrast(98%);
}
.node{
	filter: invert(44%) sepia(12%) saturate(2343%) hue-rotate(71deg) brightness(106%) contrast(94%);
}
.mongo{
	filter: invert(54%) sepia(8%) saturate(4076%) hue-rotate(72deg) brightness(100%) contrast(65%);
}
.tensorflow{
	filter: invert(58%) sepia(89%) saturate(713%) hue-rotate(359deg) brightness(101%) contrast(105%);
}
.materialui {
	filter: invert(90%) sepia(23%) saturate(5692%) hue-rotate(179deg) brightness(104%) contrast(95%);
}
.btn-link{
	border-radius: 0px;
	font-weight: 400;
	color: white;
	text-decoration: none;
	border: 1px solid;
}
.btn-link:hover{
	font-weight: 400;
	color: #222222;
	background-color: #f5f5f5;
	text-decoration: none;
	border: 1px solid #f5f5f5;
}
.fa-3x:hover{
	color: #61dbfb;
}
.blurb{
	color: #f5f5f5;
	padding: 0px 25px 10px 25px;
}
@keyframes fadeIn {
  0% {
		opacity: 0;
  }

  90% {
		opacity: 0;
	}
	100% {
		opacity: 1;
  }
}
@keyframes blink {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;

  }
}

@media screen and (max-width: 1168px) {
	.column {
			flex: 100%;
			max-width: 90%;
	}
	.card{
		width: 100%;
	}
	img{
		width: 100%;
	}
	#title{
		top: 70%;
	}
	#subtitle{
		top: calc(70% + 60px);
	}
	#scroll-button{
		top: calc(70% + 105px);
	}
}