/* Typography */

html {
	font-family: 'Lato', sans-serif;
}

@media (min-width: 576px) {
	html {
		font-size: 14px;
	}
}

@media (min-width: 768px) {
	html {
		font-size: 16px;
	}
}

@media (min-width: 992px) {
	html {
		font-size: 18px;
	}
}

@media (min-width: 1200px) {
	html {
		font-size: 20px;
	}
}

.icons-social i {
	font-size: 3em;
}

/* Custom Styles */

main {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	justify-content: center;
	padding: 0 30px;
	text-align: center;
}

main > .intro {
	font-family: 'Reem Kufi', sans-serif;
	font-size: 3.75em;
  font-weight: 600;
  animation: 2s explode_title;
}

main > .subintro {
  font-family: 'Reem Kufi', sans-serif;
	font-size: 1.25em;
  font-weight: 100;
  animation: 2s explode_title;
}

main > .tagline {
	font-size: 1.5rem;
	margin: 1.5rem 0;
  font-weight: 100;
}

.icons-social i {
	padding: 10px;
}

.devto {
	margin-bottom: -0.20rem;
}

.devto svg {
	margin-bottom: -0.20rem;
	margin-left: 0.675rem;;
	width: 2.65rem;
	height: 2.65rem;
}

.breathing:hover,
.breathing:focus {
  animation: breathing 1s ease-out infinite normal;
}

/* Custom Styles for Buttons */
.icons-social a {
  text-decoration: none;
}

.icons-social a:focus {
  outline: none;
}

.icons-social a.threads svg {
  width: 55px;
  height: 55px;
  vertical-align: sub;
}

.icons-social a.threads:hover path,
.icons-social a.threads:focus path {
  fill: #333;
}

.icons-social a:hover i,
.icons-social a:focus i,
.icons-social a:hover svg,
.icons-social a:focus svg {
  animation: breathing 1s ease-out infinite normal;
}

.icons-social a.hashnode:hover,
.icons-social a.hashnode:focus {
  color: #2463eb;
}

.icons-social a.github:hover,
.icons-social a.github:focus {
  color: #333;
}

.icons-social a.gitlab:hover,
.icons-social a.gitlab:focus {
  color: #e24329;
}

.icons-social a.twitter:hover,
.icons-social a.twitter:focus {
  color: #1da1f2;
}

.icons-social a.linkedin:hover,
.icons-social a.linkedin:focus {
  color: #0077b5;
}

.icons-social a.steam:hover,
.icons-social a.steam:focus {
  color: #1b2838;
}

.icons-social a.instagram:hover,
.icons-social a.instagram:focus {
  color: #c32aa3;
}

.icons-social a.pinterest:hover,
.icons-social a.pinterest:focus {
  color: #bd081c;
}

.icons-social a.twitch:hover,
.icons-social a.twitch:focus {
  color: #9146ff;
}

.icons-social a.youtube:hover,
.icons-social a.youtube:focus {
  color: #f00;
}

.icons-social a.mal:hover,
.icons-social a.mal:focus {
  color: #1d439b;
}

.icons-social a.dev:hover,
.icons-social a.dev:focus {
  color: #363d44;
}

.icons-social a.stack-overflow:hover,
.icons-social a.stack-overflow:focus {
  color: #f48024;
}
@keyframes explode_title {
  10% {
    transform:scaleY(0.2);
    transform-origin:0 bottom 0;
  }
  20% {
    transform:scaleY(1.3);
    transform-origin:0 bottom 0;
  }
  30% {
    transform:scaleY(0.7);
    transform-origin:0 bottom 0;
  }
  40% {
    transform:scaleY(1);
    transform-origin:0 bottom 0;
  }
  100% {
    transform:scaleY(1);
    transform-origin:0 bottom 0;
  }
}
@keyframes breathing {
  0% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }

  25% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  60% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }
}