* {
	margin: 0;
	padding: 0;
}
body {
	font-family: 'Baloo 2', cursive;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
	height: 100%;
	width: 100%;
}

.banner-text {
	width: 100%;
	position: absolute;
	z-index: 1;
}

.center-icons{
	animation: fadeInAnimation ease 5s; 
	animation-iteration-count: 1; 
	animation-fill-mode: forwards; 
    height: 30vh;
    display: flex;
    justify-content: center;
    align-items: center;
	text-align: center;
}

.center-icons .file {
	animation-duration: 1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both;
	opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp; 
    height: 100px;
    width: 100px;
    margin: 30px;
    line-height: 110px;
    text-align: center;
    border-radius: 50px;
    border: 3px solid white;
    transition: 0.3s;
}

.center-icons .github {
	animation-duration: 4s;
    animation-fill-mode: both;
    -webkit-animation-duration: 4s;
    -webkit-animation-fill-mode: both;
	opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp; 
    height: 100px;
    width: 100px;
    margin: 30px;
    line-height: 110px;
    text-align: center;
    border-radius: 50px;
    border: 3px solid white;
    transition: 0.3s;
}

.center-icons .envelope {
	animation-duration: 7s;
    animation-fill-mode: both;
    -webkit-animation-duration: 7s;
    -webkit-animation-fill-mode: both;
	opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp; 
    height: 100px;
    width: 100px;
    margin: 30px;
    line-height: 110px;
    text-align: center;
    border-radius: 50px;
    border: 3px solid white;
    transition: 0.3s;
}

.center-icons .linkedin {
	animation-duration: 10s;
    animation-fill-mode: both;
    -webkit-animation-duration: 10s;
    -webkit-animation-fill-mode: both;
	opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp; 
    height: 100px;
    width: 100px;
    margin: 30px;
    line-height: 110px;
    border-radius: 50px;
    border: 3px solid white;
    transition: 0.3s;
}

.center-icons .projects {
	animation-duration: 10s;
    animation-fill-mode: both;
    -webkit-animation-duration: 10s;
    -webkit-animation-fill-mode: both;
	opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp; 
    height: 100px;
    width: 100px;
    margin: 30px;
    line-height: 110px;
    text-align: center;
    border-radius: 50px;
    border: 3px solid white;
    transition: 0.3s;
}

.center-icons a:hover{
    color: black;
    border: 3px solid black;
	border-radius: 20px;
}

.tt-resume{
	visibility: hidden;
	color: rgb(255, 255, 255);
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;

	position: absolute;
	z-index: 1;
	top: 100%;
	left: 70%;
	margin-left: -60px;
}

.file:hover .tt-resume{
	visibility: visible;
}

.tt-github{
	visibility: hidden;
	color: rgb(255, 255, 255);
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;

	position: absolute;
	z-index: 1;
	top: 100%;
	left: 70%;
	margin-left: -60px;
}

.github:hover .tt-github{
	visibility: visible;
}

.tt-email{
	visibility: hidden;
	color: rgb(255, 255, 255);
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;

	position: absolute;
	z-index: 1;
	top: 100%;
	left: 70%;
	margin-left: -60px;
}

.envelope:hover .tt-email{
	visibility: visible;
}

.tt-linkedin{
	visibility: hidden;
	color: rgb(255, 255, 255);
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;

	position: absolute;
	z-index: 1;
	top: 100%;
	left: 70%;
	margin-left: -60px;
}

.linkedin:hover .tt-linkedin{
	visibility: visible;
}

.tt-projects{
	visibility: hidden;
	color: rgb(255, 255, 255);
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;

	position: absolute;
	z-index: 1;
	top: 100%;
	left: 70%;
	margin-left: -60px;
}

.projects:hover .tt-projects{
	visibility: visible;
}

.fa-github:hover{
    color: black;
}

.fa-file:hover{
    color: black;
}

.fa-envelope:hover{
    color: black;
}

.blink {
	animation: blink 0.5s infinite;
}

@keyframes blink{
	to { opacity: .0; }
}

.header-sub-title {
	display: inline;
	color: #fff;
	font-family: "Courier";
	font-size: 20px;
	padding: 0.1em;
  }

.banner-text h2 {
	animation-duration: 3s;
    animation-fill-mode: both;
    -webkit-animation-duration: 3s;
    -webkit-animation-fill-mode: both;
	opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
	opacity: 0;
	text-align: center;
	color: #fff;
	font-size: 80px;
	margin-top: 15%;
}

.banner-text h3 {
	animation-duration: 3s;
    animation-fill-mode: both;
    -webkit-animation-duration: 3s;
    -webkit-animation-fill-mode: both;
	opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp; 
	text-align: center;
	color: #fff;
	font-size: 20px;
}

.animation-area {
	animation: fadeInAnimation ease 1s; 
	animation-iteration-count: 1; 
	animation-fill-mode: forwards; 
	background: linear-gradient(to left, #000428  ,	#004e92);
	width: 100%;
	height: 100vh;
}

.box-area {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.box-area li {
	position: absolute;
	display: block;
	list-style: none;
	width: 25px;
	height: 25px;
	background: rgba(255, 255, 255, 0.2);
	animation: animate 20s linear infinite;
	bottom: -150px;
}

.box-area li:nth-child(1) {
	left: 86%;
	width: 80px;
	height: 80px;
	animation-delay: 0s;
}

.box-area li:nth-child(2) {
	left: 12%;
	width: 30px;
	height: 30px;
	animation-delay: 1.5s;
	animation-duration: 10s;
}

.box-area li:nth-child(3) {
	left: 70%;
	width: 100px;
	height: 100px;
	animation-delay: 5.5s;
}

.box-area li:nth-child(4) {
	left: 42%;
	width: 150px;
	height: 150px;
	animation-delay: 0s;
	animation-duration: 15s;
}

.box-area li:nth-child(5) {
	left: 65%;
	width: 40px;
	height: 40px;
	animation-delay: 4s;
}

.box-area li:nth-child(6) {
	left: 15%;
	width: 110px;
	height: 110px;
	animation-delay: 3.5s;
}

.box-area li:nth-child(7) {
	left: 5%;
	width: 70px;
	height: 70px;
	animation-delay: 3s;
}

.box-area li:nth-child(8) {
	left: 80%;
	width: 150px;
	height: 150px;
	animation-delay: 3.5s;
}

.box-area li:nth-child(9) {
	left: 50%;
	width: 30px;
	height: 30px;
	animation-delay: 3.5s;
}

.box-area li:nth-child(10) {
	left: 74%;
	width: 80px;
	height: 80px;
	animation-delay: 3.5s;
}

@keyframes animate {
	0% {
		transform: translateY(0) rotate(0deg);
		opacity: 1;
	}
	100% {
		transform: translateY(-800px) rotate(360deg);
		opacity: 0;
	}
}

@keyframes fadeInAnimation { 
	0% { 
		opacity: 0; 
	} 
	100% { 
		opacity: 1; 
	} 
} 

@keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}