@import url('https://fonts.googleapis.com/css?family=Amatic+SC|Rock+Salt|Montserrat:500|Oxygen|Poppins:500|Raleway:500');

* {
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
}

body {
	height: 100vh;
	width: 100%;
}

.scroll-down {
	display: none;
}

.scroll-down i {
  display: none;
	transform: translateY(-50%);
	opacity: 1;
	animation: scrollArrow .85s ease-in infinite;
}

#home {
	height: 100vh;
	width: 100%;
	display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around; 
	background-color: #bebebe;
	font-family: 'Raleway', sans-serif;
}

#home__mobile-main-pic {
  position: relative;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background-image: url('http://www.appliedwebdesign.com/images/ChristinaProfile_withTransparency.png');
  background-size: 120%;
  background-position: 0% 50%;
  box-shadow: 0px 0px 0px 2px #000,
              0px 0px 0px 5px #fff;
}

.navbar {
	display: none;
}

.navbar-items {
	display: none;
}

.navbar-items > li {
	display: none;
}

.navbar-items > li:hover {
	display: none;
}

#name, #dpt {
	align-self: center;
	font-family: 'Amatic SC', sans-serif;
}

#name {
	position: relative;
	display: block;
  font-size: 3.9rem;
  text-align: center;
}

#dpt {
	display: block;
	font-size: 5rem;
	color: #fff;
}

#about {
  position: relative;
	height: 100vh;
	width: 100%;
	background-color: #f0bdb2;
	font-family: 'Raleway', sans-serif;
	color: #333;
}

#about__grid {
	height: 100%;
	width: 100%;
}

#about__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: 100%;
  width: 100%;
	padding: 15px;
}

#about__info h1, #about__info h2 {
	color: #fff;
	font-family: 'Amatic SC', sans-serif;
}

#about__info h1 {
	font-size: 3.5rem;
}

#about__info p {
  font-size: .9rem;
  padding: 10px;
}

#about__image {
  display: none;
}

#about__mobile-id-badge i {
  font-size: 5rem;
  color: #fff;
}

#skills {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	width: 100%;
	background-color: #88a6a7;
	font-family: 'Raleway'sans-serif;
	color: #333;
}

#skills h1, #skills h2 {
	color: #fff;
	font-family: 'Amatic SC', sans-serif;
}

#skills h1 {
margin-top: 45px;
font-size: 5rem;
}

#skills h2 {
	margin-bottom: 20px;
	font-size: 2rem;
}

#skills__content {
	position: relative;
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

.skills__card {
	position: relative;
	height: 300px;
	width: 200px;
	padding: 10px;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr 3fr;
	grid-row-gap: 3px;
	background-color: #fff;
	border-radius: 10px;
	font-family: 'Raleway', sans-serif;
	font-size: .8rem;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

.skills__card i {
	grid-row: 1/2;
	font-size: 3rem;
	justify-self: center;
	align-self: center;
	color: #000;
}

.skills__card-title {
	grid-row: 2/3;
	align-self: center;
	justify-self: center;
	color: #000;
}

.skills__card-content {
	grid-row: 3/4;
	align-self: start;
	justify-self: center;
}

#contact {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	width: 100%;
	background-color: #c2ccd6;
	font-family: 'Raleway'sans-serif;
	color: #333;
}

#contact h1 {
	color: #333;
	font-family: 'Amatic SC', sans-serif;
	font-size: 4rem;
}

#contact__container {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}


#contact__form {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 300px;
	width: 450px;
	font-family: 'Raleway', sans-serif;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

#contact__form-container {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-template-rows: repeat(4, 1fr);
	height: 80%;
	width: 80%;
}

#contact__form-items {
	height: 80%;
	width: 80%;
}

.contact__input {
	display: block;
	grid-column: 1/2;
	justify-self: right;
}

#contact__name-label {
	grid-row: 1/2;
	align-self: center;
	justify-self: start;
}

#contact__email-label {
	grid-row: 2/3;
	align-self: center;
	justify-self: start;
}

#contact__phone-label {
	grid-row: 3/4;
	align-self: center;
	justify-self: start;
}

#contact__button {
	grid-row: 4/5;
	grid-column: 1/3;
	align-self: end;
	justify-self: center;
	height: 2.5rem;
	width: 10rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	cursor: pointer;
	transform: scale(1);
	transition: all .075 ease-in;
}

.contact__button {
	background-color: #5555ff;
	border: 2px solid #5555ff;
	color: #fff;
}

.contact__button:hover {
	background-color: #fff;
	color: #5555ff;
	animation: jiggleButton .3s ease-in-out;
}

.contact__button-pending {
	background-color: #ccc;
	color: #888;
	transform: rotateY(0deg);
	transform-style: preserve-3d;
	animation: buttonPending 2s ease-in-out infinite;
}

.contact__button-success {
	background-color: #5bff5b;
	color: #fff;
	font-weight: bold;
	font-family: 'Raleway', sans-serif;
	animation: jiggleButton .3s ease-in-out;
}

#contact__name {
	grid-row: 1/2;
	grid-column: 2/3;
	height: 25px;
	width: 100%;
	align-self: center;
	justify-self: center;
}

#contact__email {
	grid-row: 2/3;
	grid-column: 2/3;
	height: 25px;
	width: 100%;
	align-self: center;
	justify-self: center;
}

#contact__phone {
	grid-row: 3/4;
	grid-column: 2/3;
	height: 25px;
	width: 100%;
	align-self: center;
	justify-self: center;
}

@keyframes showNavbar {
	0% {
		opacity: 0;
		transform: translateY(-40px);
	}
	100% {
		opacity: 1;
		transform: traslateY(0px);
	}
}

@keyframes showNameTitle {
	0% {
		font-size: 0rem;
		opacity: 0;
	}
	100% {
		font-size: 3rem;
		opacity: 1;
	}
}

@keyframes scrollArrow {
	0% {
		opacity: 1;
		transform: translateY(-50%);
	}
	100% {
		opacity: 0;
		transform: translateY(50%);
	}
}

@keyframes buttonPending {
	0% {
		transform: rotateY(0deg);
	}
	50% {
		transform: rotateY(360deg);
	}
	100% {
		transform: rotateY(0deg);
	}
}

@keyframes jiggleButton {
	0% {
		transform: scale(1);
	}
	25% {
		transform: scale(.9);
	}
	50% {
		transform: scale(1);
	}
	75% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}