@import url('https://fonts.googleapis.com/css?family=Inconsolata|Rubik');

html {
	font-size:14px;
}

body {
	background-color:#E4CC02;
	font-family: 'Inconsolata', monospace;
  margin:64px auto;
  max-width:1200px;
}

h1 {
	font-family: 'Rubik', sans-serif;
	font-weight:400i;
	font-size: 3rem;
  margin: 0;
  text-transform: capitalize;
}

h2 {
	font-size:1.5rem;
	font-weight:400;
}

h3 {
  font-size:1.1rem;
  margin:0;
}

li {
	font-size:1.5rem;
	list-style-type: decimal-leading-zero;
}

.container {
	display:flex;
	flex-wrap: wrap;
}

.container div {
	width:33%;
}

.container div:nth-child(2) {
	margin-top:-20px;
}

.cover-letter-link {
  font-size:1.2rem;
}

nav {
  margin: 30px 0 0 0;
}

nav .menu-button {
	display:none;
}

nav li {
  list-style-type: none;
  line-height: 1.8;
  display: inline-block;
  margin: 0 16px 0 0;
}

a {
  text-decoration: none;
  padding: 3px 6px;
  border-bottom: solid 3px #D8D8D8;
  color: black;
	position: relative;
  z-index: 1; 
  font-size:1.5rem;
}

a:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scaleY(0);
  transform-origin: bottom center;
	background-color:#D8D8D8;
  z-index: -1;
  transition: transform 0.5s;
}

a:hover::after {
  transform: scaleY(1);
}

.plant-and-bubble-container {
  margin: 0 auto;
}

.plant-and-bubble-container img {
	transition: all 0.8s ease-in-out;
  width:150px;
}

.plant-and-bubble-container img:hover {
	transform: scale(1.1) rotate(3deg);
}

img.speech-bubble,
img.superhi-student {
  z-index: 1;
  position: absolute;
  opacity: 0.85;
  display: block;
}

img.speech-bubble {
 margin: -32px 0 -45px -80px;
}

img.superhi-student {
  margin: 315px 0px 0 80px;
}

.plant {
	transition:0.3s ease-in-out;
}


/* Responsive */

@media (max-width:1200px) and (min-height:420px) {
  body {
    margin: 115px auto;
  }

}

@media (max-width:1200px) {
  body {
    height:auto;
    overflow:visible;
    width: 70%;
    /*margin: 115px auto;*/
  }

  .container div {
    width:100%;
    margin:0 auto;
  }

  .container div:nth-child(2) {
    margin: 64px 64px 32px 64px;
  }

  .container div:nth-child(3) {
    margin:85px 0 0 0;
  }
}

@media (max-width:500px) {
  html {
    font-size: 12px;
  }

  body {
    width: 85%;
    margin: 32px auto;
  }

  .plant-and-bubble-container img {
    width:120px;
  }

  img.speech-bubble {
    margin: -45px 0 0px -55px;
  }

  img.superhi-student {
    margin: 255px 0px 0 60px;
  }

  li {
    font-size: 1.2rem;
  }

  nav li {
    display:block;
  }
}


@media (min-width:1400px) {
  body{
    margin: 128px auto;
  }
}