/* Setup background-color, font-color/size/family, and padding of body  */
body{
  color: #171717;
  background-color: #f8f8f8;
  font-family: 'Inconsolata', monospace;
  font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1600 - 300)));
  line-height: calc(1.5em + (1.6 - 1.5) * ((100vw - 300px)/(1600 - 300)));
  padding-left: 8%;
}

/* Give the nav bar some margins */
#nav-placeholder{
  margin: 1.5em 0 3.5em;
}

/* align along leftside */
.navigation{
  margin-left: 0;
}

/* style all li elements in navbar */
.mainmenu li{
  padding-right: 40px;
  display: inline;
  list-style-type: none;
  cursor: pointer;
  margin:0;
}

/* get rid of underline on links and set to black */
.mainmenu a{
  text-decoration: none;
  color:black;
}

.submenu{
  display: inline;
}

.submenu a {
  letter-spacing: 0.05em;
}

/* make my name larger and bolder */
#name{
  font-size: 2.1em;
  font-weight: 1000;
}

.content{
  min-height: 500px;
}
.content ul{
  margin: 0 0 0 15px;;
}
/* global settings - more to come */
ul, p{
  margin: 0;
  padding: 0;
  border: 0;
}

/* all paragraphs to have space at bottom and not take up full screen */
p{
  margin-bottom: 1.5em;
  max-width:80%;
}

/* set profile image to set size */
.about-content img{
  max-width: 300px;
}

.about-content .bio{
  max-width:700px;
}
/*  */
.box{
  max-width: 320px;
}

img{
  min-width: 280px;
  max-width: 300px;
  margin-bottom: 50px;
}
.box img{
  display: block;
  margin: 0 auto;
  border: none;
  margin-bottom: 20px;
}

.box p{
  text-align: center;
}

.grid-container{
  display: grid;
  transition: all 0.5s;
  grid-template-columns: 300px 300px;
  grid-gap: 90px;
  grid-template-areas: 
    'realness harlem'
    'kero1 kero2'
    'traj adhoc';
}

.realness {
  grid-area: realness;
}

.harlem {
  grid-area: harlem;
}

.kero1 {
  grid-area: kero1;
}

.kero2 {
  grid-area: kero2;
}

.traj {
  grid-area: traj;
}

.adhoc{
  grid-area: adhoc;
}
.box p {
  display: block;
  text-align: center;
}

.bold{
  font-weight: bold;
}

/* Style all font awesome icons */
.fa {
  padding: 10px;
  font-size: 30px !important;
  width: 30px;
  text-align: center;
  text-decoration: none;
}

/* Set a specific color for each brand */
.fa-twitter, .fa-github, .fa-bandcamp, .fa-instagram {
  color: black;
}

/* https://codepen.io/ahmmu15/pen/EVqWvz */
/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fade-in.one {
  -webkit-animation-delay: 0.05s;
  -moz-animation-delay: 0.05s;
  animation-delay: 0.05s;
}

.back-link{
  text-decoration: none;
  color: black;
}

#footer{
  text-align: center;
  font-size: 0.55em;
  font-style: italic;
  margin: 50px 0px;
}
/* responsive design for screens larger than my laptop */
@media screen and (min-width: 1300px){
  .grid-container{
    grid-template-areas:
    'realness harlem kero1'
    'kero2 traj adhoc'
  }
}
/* responsive design for screens smaller than my laptop */
@media screen and (max-width: 600px){
  .submenu{
    display:block;
  }
  .grid-container{
    grid-template-areas:
    'realness'
    'harlem'
    'kero1'
    'kero2'
    'traj'
    'adhoc'
  }
}