@font-face {
	font-family: Cloud;
	src: url('Cloud-LightBold/Cloud-Light.otf');
}

html {
	scroll-behavior: smooth;
	height: 100%;
	font-smooth: always;
	-webkit-font-smoothing: auto;
}

body {
	font-family: 'Helvetica', sans-serif;
	padding: 0 0 10vh 0;
}

a:visited {
	color: inherit;
}

.title-container {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
}

.title-container>.title {
	display: inline-flex;
	flex-direction: column;
	transform: rotate(-5deg) skew(-5deg);
}

.title-container>.title .row {
	display: flex;
}

.title-continer>.title .row:not(:first-child){
	margin: 0.5vh 0 0 0;
}

.title .row .item {

}

#hello {
	font-size: 5vh;
	font-weight: 100;
	letter-spacing: 0.1vh;
}

#hand {
	font-size: 5vh;
}

.wave {
  animation-name: wave-animation;  /* Refers to the name of your @keyframes element below */
  animation-duration: 4s;        /* Change to speed up or slow down */
  animation-iteration-count: infinite;  /* Never stop waving :) */
  transform-origin: 70% 70%;       /* Pivot around the bottom-left palm */
  display: inline-block;
}

@keyframes wave-animation {
    0% { transform: rotate( 0.0deg) }
   10% { transform: rotate(10.0deg) }  /* The following five values can be played with to make the waving more or less extreme */
   20% { transform: rotate(-5.0deg) }
   30% { transform: rotate(10.0deg) }
   40% { transform: rotate(-2.0deg) }
   50% { transform: rotate(8.0deg) }
   60% { transform: rotate( 0.0deg) }  /* Reset for the last half to pause */
  100% { transform: rotate( 0.0deg) }
}

#im {
	font-size: 5vh;
	font-weight: 100;
	letter-spacing: 0.1vh;
}

#will {
	font-size: 5vh;
	font-weight: 100;
	letter-spacing: 0.1vh;
	color: white;
	font-weight: 900;
	text-shadow: -1px 1px #000, -2px 2px #000, -3px 3px #000, -4px 4px #000, -5px 5px #000, -6px 6px #000;
}

#will:hover {
	text-shadow: 1px -1px #000, 2px -2px #000, 3px -3px #000, 4px -4px #000, 5px -5px #000, 6px -6px #000;
}

#profile {
	font-size: 5vh;
}

.typer-container {
	font-size: 2.35vh;
	font-style: italic;
	color: #777;
	font-family: Cloud;
	margin: 1vh 0 1vh 0.4vh;
}

.button-box {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}

.button-box .row {

}

.button-box .row:not(:first-child) {
	margin: 1.5vh 0 0 0;
}

.button-box>.row>a {
	flex: 1;
	padding: 0 0 0 -1vh;
}

.button-box>.row>.spacer {
	flex: 0.1;
}

a {
  position: relative;
  display: flex;
  justify-content: center;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  font-size: 1.35vh;
  font-family: inherit;
}
a.learn-more {
  font-weight: 200;
  color: #666;
  text-transform: uppercase;
  padding: 1.25vh 2vh;
  background: #fff;
  border: 2px solid #bbb;
  border-radius: 0.5vh;
  -webkit-transform-style: preserve-3d;
		  transform-style: preserve-3d;
  -webkit-transition: background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
  transition: background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
  transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1);
  transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
}
a.learn-more::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /*background: #00000000;*/
  border-radius: inherit;
  box-shadow: 0 0 0 2px #bbb, 0 0.625vh 0 0 #ddd;
  -webkit-transform: translate3d(0, 0.75vh, -1vh);
		  transform: translate3d(0, 0.75vh, -1vh);
  -webkit-transition: box-shadow 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
  transition: box-shadow 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
  transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
  transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
}
a.learn-more:hover {
  background: #ddd;
  -webkit-transform: translate(0, 0.25vh);
		  transform: translate(0, 0.25vh);
}
a.learn-more:hover::before {
  box-shadow: 0 0 0 2px #bbb, 0 0.5vh 0 0 #ddd;
  -webkit-transform: translate3d(0, 0.5vh, -1vh);
		  transform: translate3d(0, 0.5vh, -1vh);
}
a.learn-more:active {
  background: #ddd;
  -webkit-transform: translate(0vh, 0.75vh);
		  transform: translate(0vh, 0.75vh);
}
a.learn-more:active::before {
  box-shadow: 0 0 0 2px #bbb, 0 0 #ddd;
  -webkit-transform: translate3d(0, 0, -1vh);
		  transform: translate3d(0, 0, -1vh);
}

.bottom {
  position: absolute;
  bottom: 0;
  /*width: 100%;*/
  margin: 4vh auto;
  padding: 0 0.3vh 0 0;
}

.scroll-indicator {
  width: 3vh;
  height: 3vh;
  border-right: 0.2vh solid #000;
  border-bottom: 0.2vh solid #000;
  border-bottom-right-radius: 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-name: fade;
          animation-name: fade;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes fade {
  0% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    opacity: 1;
  }
  75% {
    -webkit-transform: rotate(45deg) translateY(-2vh) translateX(-2vh);
            transform: rotate(45deg) translateY(-2vh) translateX(-2vh);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fade {
  0% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    opacity: 1;
  }
  75% {
    -webkit-transform: rotate(45deg) translateY(-2vh) translateX(-2vh);
            transform: rotate(45deg) translateY(-2vh) translateX(-2vh);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}


.information-container {
	margin: 0 auto;
	width: 50%;
}

.information-container .pane {
	margin: 5vh 0 0 0;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}

.information-container .pane .title {
	font-family: 'Cloud';
	font-size: 2vh;
	color: #007DD6;
	font-weight: 50;
}

.information {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	margin: 1.5vh 0 0 1.5vh;
}

.description {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	font-size: 1vh;
}

.description .point {
	font-size: 1.35vh;
	font-weight: 1000;
}

.description .subpoint {
	margin: 0.25vh 0 0vh 0;
	font-size: 1.35vh;
	line-height: 1.25;
}

.wrapper {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
}

.skills-container {
	padding: 0 0 0 1vh;
}

.skills-box {
	display: flex;
	flex-wrap: wrap;
}

.skills-column {
	margin: 1vh 0 1vh 0;
	padding: 0 5vh 0 0;
	flex: 1 1 0px;
	font-size: 1.25vh;
}

.skills-column>:first-child {
	font-weight: 1000;
}

.skills-column>:not(:first-child) {
	margin: 0.75vh 0 0 0;
}

.preview {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#resume2 {
	margin: 1vh 0 0 1vh;
	width: 15vh;
}

@media screen and (max-width: 1200px) {
	.information-container {
		width: 90%;
	}
}