@font-face {
  font-family: 'Clemente2';
  font-style: normal;
  font-weight: 400;
  src: local('Clemente2'), local('Clemente2-Regular'), url(font/ClementePDac-ExtraLight.woff) format('woff');
}

/**
 * Initiate height
 */
html,body{
  height:100%;
}

body{
  font-family: 'Clemente2', sans-serif;
  font-weight: lighter;
  margin:0px;
  padding:0px;
  display:flex;
}

div.content{
  flex:1 auto;
  margin-left:250px;
}

/**
 *Navigation, Logo, Links, and Footer
 */
.nav h1{
  font-size: 30px;
  font-weight: normal;
  margin:0px;
  margin-top: 65px;
  text-align: center;
  padding-right: 7px;
}

.nav h1 a{
  text-decoration:none;
  font-weight: normal;
}

.nav h1 span{
  display:block;
}

.nav h1 span.nicki{
  color: #c33200;
  font-size: 85px;
  letter-spacing: -2px;
  line-height:.8;
}

.nav h1 .brink{
  font-size: 34px;
  letter-spacing: -3px;
  line-height:.9;
  color:#a00101;
  padding-top: 2px;
}

.nav .ramey{
  font-size: 39px;
  letter-spacing: -5px;
  line-height:.40;
  color:#8a082a;
}

.nav{
  font-size:29px;
  letter-spacing: -1px;
  position:fixed;
  min-height: 100%;
  width:250px;
  background: url('image/retro3.png') 0px -1px no-repeat;
}

.links{
  margin-right: 95px;
  margin-top: 75px;
}

.links ul{
  text-align: right;
  list-style: none;
  padding: 0px;
}

.links ul ul{
  display: none;
  letter-spacing: -1px;
}

.links ul a{
  text-decoration: none;
}

footer{
  position:absolute;
  /*top:705px;*/
  bottom:20px;
  text-align:center;
}

/**
 * Selecting Nav
 */
li ul.selected{
  display: block;
}

/**
 *Bolding Nav
 */
.bold{
  font-weight: bold;
}

.right{
  width: 250px;
  border: 1px solid black;
  background: yellow;
}

/**
 *About page setup
 */
.about{
  font-size: 20px;
  line-height: 43px;
  padding-right:20px;
}

.about a{
  text-decoration: none;
  color: #c33200;
}

.about p{
  text-indent: 30px;
}


.content{
  padding-top:60px;
  letter-spacing: 1px;
}

/**
 * About Picture Setup
 */
.selfie{
  float:right;
  padding: 6px 6px 30px 30px;
  margin-left:30px;
  border: solid black;
  border-width:14px 14px 6px 6px;
}

/**
 * Resume/About Page
 */
.location{
  float: right;
}

.skills{
  display: inline-block;
  padding-right: 50px;
  vertical-align: top;
}

.resume{
  padding: 0px 25px 0px 25px;
}

.category{
  font-weight: bold;
  font-size: 25px;
}

.job, .school, .location{
  display: inline-block;
}

/**
 * Demo Reel Set up
 */
.youtube{
  display: inline-block;
  padding: 5px;
  border: solid black;
  border-width: 14px 14px 6px 6px;
  margin: 5px;
}

.description{
  display: inline-block;
  vertical-align: top;
  font-size: 23px;
  margin:5px;
}

.title{
  font-weight: bold;
}

/**
 * Animation for Nav and Footer Images. Transition down
 */

footer img{
  transition:All .5s ease;
}

.nav .nicki{
  transition: color .5s ease;
}


/*Screen Size*/
@media screen and (max-width:1440px) {
  .skills{
    padding-right: 200px;
  }
}

@media screen and (max-width:1025px) {
  .content{
    padding-top: 40px;
  }

  .about p{
    margin-top: 0px;
    margin-bottom: 0px;
    /*margin: 0px inherit;*/
  }

  .resume{
    padding:5px;
    line-height: 25px;
  }

  .skills{
    padding-right: 75px;
  }

  .description{
    font-size: 18px;
  }

  .about{
    font-size: 18px;
    line-height: 36px;
  }
}

/**
 * 800 Width
 */
@media screen and (max-width:800px) {
  body{
    font-size:20px;
  }

  .nav{
    background: #fff url('image/retrovert1.png') top right no-repeat;
    background-size: 800px 150px;
    width:100%;
    height: 20px;
    min-height: 150px;
    float: right;
    vertical-align: top;
  }

  .nav h1 .hamburger{
    background: url('image/hamburger.png') 0px 0px no-repeat;
    background-size: 90px 90px;
    display: inline-block;
    width: 90px;
    height: 80px;
    float:right;
    margin-top:40px;
    margin-right:35px;
  }

  .nav h1{
    margin-top: 0px;
    text-align: left;
    min-height: 120px;
  }

  .nav h1 span.nicki{
    padding-top: 15px;
    font-size:80px;
    letter-spacing: -3px;
    line-height:.6;
  }

  .nav h1 .brink{
    font-size: 30px;
    letter-spacing: -2px;
    line-height:.6;
    float: left;
    padding-left: 35px;
  }

  .nav .ramey{
    letter-spacing: -3px;
    line-height:.5;
    padding-top: 20px;
    padding-left: 10px;
  }

  .links{
    float: right;
    margin-right:0px;
    margin-top: 15px;
    background:#fff;
    padding:0px 8px;
    border:13px solid #111;
    border-radius:10px;
    display:none;
  }

  .links ul{
    margin:0px;
  }

  .links.display{
    display:inline-block;
  }

  footer{
    position:absolute;
    top:70px;
    right:175px;
  }

  .content{
    padding-top: 150px;
  }

  div.content{
    margin-left: 20px;
  }

  .selfie{
    margin-top: 5px;
    margin-left:15px;
    padding-left: 15px;
    padding-bottom: 12px;
    border-top: 12px solid black;
    border-right: 12px solid black;
  }

  .skills{
    display: inline-block;
    padding-left: 10px;
    padding-right: 25px;
  }

  .skills ul{
    margin-top: 5px;
  }

  .resume{
    padding-left: 5px;
    padding-right: 5px;
    font-size: 16px;
    line-height: 30px;
  }

  .youtube{
    display: inline-block;
    padding: 5px;
    border-top: 12px solid black;
    border-right: 12px solid black;
  }

  .about{
    font-size: 16px;
    line-height: 30px;
  }
}


@media screen and (max-width:465px) {
  .nav{
    background:#fff url('image/retrovertsm.png') top right no-repeat;
    background-size: 500px 100px;
    width:100%;
    min-height: 100px;
    position: fixed;
  }

  .nav h1 .hamburger{
    background-size: 60px 60px;
    width:60px;
    height:60px;
    margin-right:18px;
    margin-top: 27px;
  }

  .nav h1{
    min-height: 80px;
  }

  .nav .nicki{
    padding-top: 10px;
    position: absolute;
    left:5px;
    top:5px;
  }

  .nav .brink, .nav .ramey{
    display:none;
  }

  .content{
    padding-top: 110px;
  }

  .links ul{
    margin-top: 0px;
  }

  .links{
    margin-top: 15px;
    margin-right: -85px;
  }

  footer{
    position: absolute;
    top: 30px;
    left: 135px;
  }

  .selfie{
    float:left;
  }

  .about{
    display: inline-block;
    line-height:normal;
    width: 400px;
    max-width: 425px;
    padding-right: 0px;
  }

  .about p{
    margin-top: 7px;
    margin-bottom: 7px;
  }

  .content{
    width: 425px;
    margin-left: 5px;
  }

  .resume{
    padding-left: 0px;
    padding-right: 0px;
    font-size: 16px;
    line-height: normal;
    }
  }

  .skills{
    padding-left: 0px;
  }

  .location{
    display: block;
    padding-right: 20px;
  }
}

@media screen and (max-width:425px){
  footer img{
   transform: scale(0.85, 0.85);
   margin-left: -10px;
  }
}

@media screen and (max-width:400px){
  footer img{
   transform: scale(0.75, 0.75);
   margin-left: -15px;
  }

}

@media screen and (max-width:375px) {
  footer{
    left:auto;
  }

  .nav{
    background:#fff url('image/retrovertsm.png') top right no-repeat;
    background-size: 450px 75px;
    width:100%;
    min-height:75px;
    position: fixed;
  }

  .nav h1 .hamburger{
    background-size: 40px 40px;
    width:40px;
    height:40px;
    margin-top: 21px;
    margin-right: 28px;
  }

  .nav h1{
    min-height: 75px;
    padding-right: 0px;
  }

  .nav h1 span.brink, .nav h1 span.ramey{
    position: absolute;
      left: 5px;
      top: 5px;
  }

  .nav h1 span.nicki{
    font-size: 65px;
    padding-top: 8px;
  }

  footer{
    display: none;
  }

  .links{
    margin-top: -5px;
    margin-right: auto;
  }

  .content{
    padding-top: 80px;
  }

  .selfie{
    margin-left: 0px;
  }

  .about{
    max-width: 355px;
    padding-right: 0px;
  }

  div.content{
    margin-left: 10px;
  }
}


@media screen and (max-width:320px) {
  .nav h1 span.nicki{
    font-size: 70px;
  }

  .selfie img{
    width: 100%;
  }

  .selfie{
    padding:0px;
  }

  div.content{
    margin-left: 0px;
  }

  .about {
    max-width: 300px;
    padding-left: 5px;
  }

  .resume{
    padding-left: 5px;
  }
}
.tags{
  display:none;
}