* {
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
  color: white !important;
}
html {
  height: 100vh; 
  overflow: hidden;
}
body {
  margin: 0 auto;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  background: #d19900 repeat;
  background-size: contain;
}
main {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  width: 90vw;
  height: 80vh;
  align-self: center;
}
#container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  height: 80vh;
}
aside {
  justify-self: center;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  align-self: center;
}
#username-heading {
  text-decoration: none;
  margin: 0 auto;
  text-align: center;
  color: white; 
  position: relative;
  opacity: 0;
}
#junior-dev {
  opacity: 0;
}
.alpha {
  display: inline-block;
}
a:hover {
  text-decoration: none;
}
nav  {
  width: 100vw;
  z-index: 1000;
}
.navlinks {
  position: relative;
  bottom: 56px;
}
#play-button {
  z-index: 2;
}
.show-up {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  opacity: 0;
}
.show-up-image {
  width: 10vmin;
  height: 10vmin;
}
.github-logo {
  width: 25vmin;
  height: 10vmin;
}
.linkedin-logo {
  width: 20.5vmin;
  height: 5vmin;
}

/*Mobiles Portrait*/
@media only screen and (min-width: 320px)  and (max-width: 479px) {
  aside {
    width: 25vw;
    height: 50vh;
  }
  #username-heading {
    font-size: 10vmin;
  }
  #play-button {
    width: 14vmin;
    height: 14vmin;
    position: relative;
    right: 3vw;
    bottom: 10vh;
  }
  .nav-item {
    width: 18vw;
    margin-right: 0 !important;
  }
  .navbar-nav {
    align-items: flex-end;
  }
}
/*Mobile Landscape*/
@media only screen and (min-width: 540px) and (max-height: 479px) and (max-width: 900px) {
  aside {
    height: 80vh;
  }
  #play-button {
    width: 50px;
    height: 50px;
    position: relative;
    bottom: 70px;
    
  }
  .alpha {
    font-size: 5vw;
  }
  .nav-item {
    margin-right: 0 !important;
    width: 18vw;
    text-align: right;
  }
  #junior-dev {
    position: relative;

  }
  .navbar-nav {
    align-items: flex-end;
  } 
}
/*Small Tablets Portrait */
@media only screen and (min-width: 480px) and (min-height: 767px) and (max-width: 767px) {
  #play-button {
    height: 80px;
    width: 80px;
    position: relative;
  }
  .navbar-nav {
    align-items: flex-end;
  }
  aside {
    height: 50vh;
  }
  #username-heading {
    font-size: 5vw;
  }
  nav button {
    height: 70%;
  }
}
/* Big tablets portrait and Small tablets landscape */
@media only screen and (min-width: 767px) and (max-width: 1024px) {
  aside {
    height: 60vh;
  }
  #play-button {
    width: 150px;
    height: 150px;
    position: relative;
    bottom: 100px;
  }
  #username-heading {
    font-size: 4em;
  }
}
@media only screen and (min-width: 1025px) {
  #play-button {
    width: 120px;
    height: 120px;
    position: relative;
    bottom: 150px;
  }
  #container {
    flex-flow: column-reverse nowrap;
    flex: 1;
  }
  aside {
    height: 40vh;
    width: 95vw;
    flex-flow: row wrap;
    justify-content: space-around;
    align-content: center;
  }
  main {
    width: 95vw;
    justify-content: flex-end;
  }
  #email {
    position: relative;
    top: 2vh;
  }
}