html {
  font-size: 62.5%;
}

body {
  background: url(images/mobback.jpg) fixed;
  color: rgba(255, 255, 255, .7);
  transition: background 1s;
  font-family: 'share tech mono', monospace;
  font-size: 1.6rem;
  margin: 0;
}

header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 2.2rem;
  margin: 2rem 0;
}

header h1 {
  margin: 0;
  font-size: 3rem;
  background: rgba(200, 200, 255, .9);
}

header p {
  margin: 0;
  background-color: rgba(255, 239, 190, .7);
  border-radius: 5rem;
  padding: 0rem 2rem;
}

a {
  color: black;
  text-decoration: none;
  /* text-shadow: 0px 0px 1rem rgba(0, 0, 255, .4); */
}

.homeButton, .demoButton {
  display: none;
}

.top {
  order: 1;
  flex-basis: 100%;
  margin: 1rem 0 2rem;
  text-align: center;
}

.homeButton {
  order: 2;
  margin-left: 1rem;
}

.demoButton {
  order: 3;
}

.right {
  order: 4;
  margin: 0 1rem;
}

span {
  display: inline-block;
}

.github {
  filter: invert(85%);
  height: 50px;
  width: 50px;
  margin: 1rem;
}

main {
  clear: both;
  text-shadow: .1rem .1rem .5rem rgba(200, 200, 255, .5);
}

#home h1 {
  margin: 1rem;
}

.code {
  height: 25px;
  width: 25px;
  vertical-align: text-top;
}

ul {
  list-style: none;
}

.stack-item {
  font-size: 8rem;
  color: #fff;
  width: 13rem;
  height: 13rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: all 2s;
}

img {
  height: 75%;
  width: 75%;
  filter: invert(100%);
}

.stack-html {
  background: rgba(255, 84, 0, .7);
}

.stack-css {
  background: rgba(0, 168, 226, .7);
  top: -2rem;
}

.stack-sass {
  background: rgba(224, 80, 153, .7);
  top: -2rem;
  left: -3rem;
}

.stack-js {
  background: rgba(250, 228, 0, .7);
  top:-4rem;
}

.stack-node {
  background: rgba(0, 161, 60, .7);
  top: -6rem;
}

.stack-express {
  background: rgba(53, 53, 53, .7);
  top: -6rem;
  left: -3rem;
}

.stack-mongo {
  top: -8rem;
  left: 11rem;
  background: rgba(81, 165, 94, .7);
  transform: rotate(40deg);
}

.stack-react {
  background: rgba(86, 213, 250, .7);
  top: -4rem;
  left: -3rem;
}

#home {
  transition: opacity 5s; 
}

#demo {
  display: inline;
  flex-wrap: wrap;
  flex-direction: row;
  opacity: 0;
  transition: opacity 5s; 
  justify-content: space-around;
}

#demo h1{
  text-align: left;
  font-size: 5rem;
  margin-top: 4rem;
  text-shadow: 5rem 2rem 1.8rem black;
  flex: 0 100%;
  padding-bottom: 2rem;
}

#demo div {
  text-align: center;
}

.container {
  display: flex;
  justify-content: space-around;
  align-content: space-around;
  width: 100%;
  flex-wrap: wrap;
}

.container a div {
  margin: 2rem;
  height: 17.5rem;
  width: 25rem;
  border: none;
  border-radius: 5rem;
  color: #333;
  box-shadow: .5rem .5rem 1.5rem black;
}

.container a div p {
  height: 80%;
  padding: 2rem 1rem 0 0;
}

.icon {
  font-size: 5rem;
  float: left;
  margin: 2rem 0 0 2rem;
}

.project-icon {
  width: 50px;
  height: 50px;
  filter: none;
  float: left;
  margin: 2rem 0 0 2rem;
}

.space-shuttle{
  transform: rotate(-90deg);
}

.brown {
  background: rgba(165, 100, 100, .8);
}

.yellow {
  background: rgba(255, 255, 200, .8);
}

.orange {
  background: rgba(255, 165, 125, .8);
}

.blue {
  background: rgba(200, 200, 255, .8);
}

.red {
  background: rgba(255, 200, 200, .8);
}

.green {
  background: rgba(200, 255, 200, .8);
}

.purple {
  background: rgba(128, 100, 128, .8)
}

@media only screen and (min-width: 700px) {
  body {
    background: url(images/back.jpg) fixed left bottom;
    transition: background 7.5s;
  }
  
  header {
    font-size: 2.6rem;
  }
  
  header h1 {
    display: block;
    padding: 0 1rem;
    align-self: center;
    flex-basis: 25%;
    text-align: center;
  }
  
  a {
    text-shadow: none;
  }
  
  header a:hover {
    text-shadow: 0px 0px 1rem black;
  }
  
  .homeButton, .demoButton {
    display: block;
  }
  
  #demo {
    display: none;
  }
  
  #demo h1 {
    text-align: right;
    margin: 0;
    font-size: 7rem;
  } 
  
  .github {
    color: rgba(255, 255, 255, .7);
  }
  
  .github:hover {
    filter: invert(25%);
  }

  .stack-css {
    top: -13rem;
    left: 11rem;
  }

  .stack-sass {
    top: -2rem;
    left: -3rem;
  }

  .stack-js {
    top: -26rem;
    left: 22rem;
  }

  .stack-react {
    top: -15rem;
    left: 8rem;
  }

  .stack-node {
    top: -39rem;
    left: 33rem;
  }

  .stack-express {
    background: rgba(53, 53, 53, .7);
    top: -28rem;
    left: 19rem;
  }

  .stack-mongo {
    top: -41rem;
    left: 44rem;
    background: rgba(81, 165, 94, .7);
    transform: rotate(40deg);
  }
  
  .brown:hover {
    background: rgba(165, 42, 42, .8);
  }
  
  .yellow:hover {
    background: rgba(255, 255, 20, .8);
  }
  
  .orange:hover {
    background: rgba(255, 165, 0, .8);
  }
  
  .blue:hover {
    background: rgba(20, 20, 255, .8);
  }

  .red:hover {
    background: rgba(255, 20, 20, .8);
  }

  .green:hover {
    background: rgba(20, 255, 20, .8);
  }
  
  .purple:hover {
    background: rgba(128, 0, 128, .8)
  }
}