$break-small:50px;
$break-large:500px;

@media only screen and (min-width: $break-small) and (max-width: $break-large){

  body{
    background-color: green;
  }
}
@charset "UTF-8";
$break-small:50px;
$break-large:500px;

@media only screen and (min-width: $break-small) and (max-width: $break-large){

  body{
    header{
      height: 75px;
      background: url(personal-website-new.png) no-repeat right 0px;
      a.logo{
        width: 105px;
        height: 40px;
        top:16px;
      }
    }

    article{
      padding: 20px 20px 10px 20px;
    }

    nav{
      position: static;
      padding: 10px 0px 10px 0px;
      background-color: #515673;

      /*mobile link buttons*/
      a{
        color: #a6abc5;
        display: block;
        margin: 15px;
        padding: 9px;
        border: 1px solid #a6ab65;
        background: url(mobile_link_arrow.png) no-repeat right center;
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;
        -border-radius: 12px;
      }

      a:hover{
        color: #fff;
        background-color: rgba(255,255,255,.15);
      }
    }

    .promo-container{
      padding: 0px;

      .promo{
        width: auto;
        float: none;
        padding: 10px 0px 0px 0px;
        border-top: 1px solid #ccc;

        .content{
          padding: 0px 20px 5px 90px;
        }
      }
    }
  }
}
Add responsiveness to small screen
Add responsiveness to small screen
