/* -------------------------------------   Base   ----------------------------------------- */

* {
	box-sizing: border-box;
}

html,
body {
	font-family: "Trebuchet MS", sans-serif;
}

html,
body,
article,
section,
header,
footer,
div,
nav,
ul,
ol,
li,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
p {
	font-weight: normal;
	margin: 0;
	padding: 0;
	outline: 0;
}

ul,
ol {
	list-style: none;
}

a {
	text-decoration: none;
}

body {
	/*display: flex;*/
	/*flex-flow: row wrap;*/
	height: 100vh;
	/*padding: 3em 4em;*/
	/*background: rgb(61, 67, 115);*/
	/*#1e2b44*/
	background: radial-gradient(ellipse, #41495a 10%, #0c1629 100%);
	color: white;
}

/* Mainbar */

.cover {
	width: 100vw;
	height: 100vh;
	transition: all 3s;
}

.cover.animate {
	height: 16.66vh;
    padding: 0 4em;
    transition: all 3s;
}

.home {
	display: flex;
    align-items: flex-end;
    justify-content: space-between;
	flex: 1 100%;
	order: 2;
	transition: all 3s;
}

.cover.animate .home {
	flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding-top: 3em;
	transition: all 3s;
}

.cover.animate .home > div {
	text-align: left;
	transition: all 3s;
}

	.home__title {
		font-size: 2.15em;
	}

	.home__subtitle {
    	margin-bottom: 1em;
    	font-size: .9em;
		opacity: .95;
		text-transform: uppercase;
	}

	.home__description {
		display: inline-block;
		font-size: 1em;
	}

	.home__icons {
		display: flex;
		align-items: center;
	}

		.home__link {
    		margin-left: 1em;
			color: white;
			font-size: 1em;
		}

		.home__icon {
			font-size: 1.35em;
			color: white;
		}

			.home__icon:hover {
				transition: all 0.5s;
				color: rgb(244, 154, 34);
			}

			.icon--github {
				font-size: 46px;
				margin-top: 7px;
			}

@keyframes show-section--bottom {
	from {
		opacity: 0;
		transform: translateY(15%);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes show-section--left {
	from {
		opacity: 0;
		transform: translateX(-25%);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes show-section--right {
	from {
		opacity: 0;
		transform: translateX(25%);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes radial-progress {
	from {
		stroke-dashoffset: -339.292;
	}
	to {
    	stroke-dashoffset: -150;
	}
}


/* Interests */

.interests {
	height: 66vh;
    flex: 1 auto;
    order: 0;
}

.interests.animate {
	animation: 1s ease-in-out forwards show-section--left;
}

	.section-title {
		color: #ececec;
		text-transform: uppercase;
		letter-spacing: 7px;
		font-size: 1.1em;
		margin-left: 0.5em;
		margin-bottom: 1em;
		display: inline-block;
		opacity: .95;
	}

	.interests__icons {
		display: flex;
		flex-direction: column;
		align-content: space-between;
		line-height: 3em;
	}

		.interest {
			display: flex;
			align-items: center;
			opacity: 0;
			animation: 1s ease-in-out forwards show-section--left;
		}

		.interest:nth-child(1) { animation-delay: 0.1s; }
		.interest:nth-child(2) { animation-delay: 0.3s; }
		.interest:nth-child(3) { animation-delay: 0.5s; }
		.interest:nth-child(4) { animation-delay: 0.7s; }
		.interest:nth-child(5) { animation-delay: 0.9s; }
		.interest:nth-child(6) { animation-delay: 1.1s; }
		.interest:nth-child(7) { animation-delay: 1.3s; }
		.interest:nth-child(8) { animation-delay: 1.5s; }


			.interest__icon {
				width: 32px;
				height: 32px;
				margin-right: 15px;
			}

			.interest__name {
				text-transform: uppercase;
			}

			.interest__name::first-letter {
				font-size: 1.5em;
			}

/* Skills */

.skills {
	height: 66vh;
    flex: 1 auto;
    order: 0;
}

.skills.animate {
	animation: 1s ease-in-out forwards show-section--bottom;
}

	.radar-chart {
		width: 100%;
		height: 100%;
	}

		.radar-chart .legend {
			fill: white;
			text-transform: uppercase;
			letter-spacing: 1px;
			font-size: 12px;
		}

		/*.radar-chart .legend tspan::first-letter {
			font-size: 14px;
		}*/

.experience {
    height: 66vh;
    flex: 1 auto;
    order: 2;

    text-align: right;
}

.experience.animate {
	animation: 1s ease-in-out forwards show-section--right;
}

	.radial-chart {
		margin: 20px;
	}

		.progress__meter,
		.progress__value {
			fill: none;
			stroke-width: 8;
		}

		.progress__meter {
			stroke: #e6e6e6;
		}

		.progress__value {
			stroke: #fdca73;
			stroke-dasharray: 339.292;
			stroke-dashoffset: 339.292;
			animation: 1.5s ease-in-out 1s forwards radial-progress;
		}

		.progress text {
			fill: #e6e6e6;
			text-transform: uppercase;
		}

		.progress__label-number {
			font-size: 2.15em;
		}

.bar-chart,
.bar-chart > svg {
	width: 100%;
	height: 100%;
}

.bar-chart .domain,
.bar-chart .tick line {
	display: none;
}

/*.bar-chart .bar {
	fill: #6F257F;
}*/
/*.bar-chart .axis path,
.bar-chart .axis line {
  fill: none;
  stroke: #D4D8DA;
  stroke-width: 1px;
  shape-rendering: crispEdges;
}*/
.bar-chart .x path {
	display: none;
}
.bar-chart .toolTip {
	position: absolute;
  display: none;
  min-width: 80px;
  height: auto;
  background: none repeat scroll 0 0 #ffffff;
  border: 1px solid #6F257F;
  padding: 14px;
  text-align: center;
}

.radial-chart {
	margin: 20px;
}

.home {
	display: flex;
    align-items: center;
    flex: 1 100%;
    flex-direction: column;
    height: 100%;
    align-content: center;
    justify-content: center;
}

.home > div {
	text-align: center;
    width: 460px;
}

.doom {
	display: none;
}

.btn-see-more {
	padding: 1em;
    width: 12em;
    border-radius: 2px;
    background: deepskyblue;
    text-align: center;
    color: white;
    text-transform: capitalize;
    outline: none;
    border: none;
    margin: 2em;
    font-size: 15px;
	transition: all 3s;
}