<commit_before>::-moz-selection {
    // background: #b3d4fc;
    background: darken($purple, 8%);
    color:#fff;
    text-shadow: none;
}

::selection {
    // background: #b3d4fc;
    background: darken($purple, 8%);
    color:#fff;
    text-shadow: none;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}



h1, h2, h3, h4, h5, h6 {
    letter-spacing: -1px;
    text-align: center;
}


#console {
    color: #FF0000;
    // display: none;
    font: 14px/1.3 'Helvetica Neue',Helvetica,Arial,sans-serif;
    right: 0;
    padding: 20px;
    position: fixed;
    text-align: left;
    top: 0;
    z-index: 1000;    
}
.top-anchor {
    position:absolute;
    top:0;
    left:0;
    z-index:-100000;
}

.back-to-top {
    position:fixed;
    z-index:10;
    bottom:emCalc(22);
    right:emCalc(6);
    font-size:emCalc(34);
    color:#fff;
    &:hover {
        color:darken($asphalt, 10%);
    }
}

.main-nav {
    position:fixed;
    left:0;
    top:0;
    z-index:5;
    overflow:hidden;
    .logo {
        display:block;
        float:left;
        background:$green-sea;
        width:emCalc(86);
        height:emCalc(72);
        position:relative;
        z-index:2;
        border-bottom:1px solid rgba(darken($green-sea, 20%), 0.4);
        border-right:1px solid rgba(darken($green-sea, 20%), 0.4);
        .circle {
            @include border-radius($global-rounded);
            width:emCalc(58);
            height:emCalc(58);
            text-align: center;
            line-height:emCalc(58);
            display:block;
            margin:0 auto;
            margin-top:emCalc(7);
            // border:1px solid transparent;
            border:1px solid darken($green-sea, 20%);
            color:darken($green-sea, 20%);
        }
    }
    &:hover {
        ul {
            margin-left:0!important;
        }
        .circle {
            background:darken($green-sea, 20%);
            color:$green-sea;
        }
    }
    ul {
        list-style: none;
        margin:0;
        float:left;
        overflow:hidden;
        position:relative;
        z-index:1;
        @include transition(all 0.3s linear);
        margin-left:-100%;
        // border-right:1px solid rgba(darken($asphalt, 20%), 0.2);
        // border-right:1px solid rgba(darken($asphalt, 20%), 0.2);
        li {
            float:left;
            height:emCalc(72);
            line-height: emCalc(72);
            a {
                border-bottom:1px solid rgba(darken($asphalt, 20%), 0.2);
                padding:0 emCalc(8);
                display:block;
                background:#2b4f62;
                background:rgba($asphalt, 0.9);
                color:darken(#fff, 40%);
                font-size:emCalc(20);
                &:hover {
                    color:#fff;
                    background:darken($asphalt, 4%);
                }
            }
            &:last-child {
                a {
                    border-right:1px solid rgba(darken($asphalt, 20%), 0.2);
                }
            }
            &.active {
                a {
                    background:darken($asphalt, 10%);
                    color:#fff;
                }
            }
        }
    }
}


#skrollr-body {
    // height: 100%;
    z-index:4;
    position: relative;
}

.intro {
    width:100%;
    height:100%;
    z-index:1;
    position:relative;
    // background: image_url('intro_bg1.jpg');
    // background-repeat:no-repeat;
    // background-position: 50% 0;
    // background-attachment: fixed;
    // background-size: 100% auto;
  // background: -webkit-linear-gradient(#fff, $asphalt);



    @include background(radial-gradient(ellipse farthest-side at -10% 90%, rgba($asphalt, 0.9) 20%, rgba($asphalt,0)),
                        radial-gradient(ellipse farthest-side at 100% 75%, #fff, rgba(#fff,0) 80%));
    background-color:lighten($asphalt,34%);


// @include background(radial-gradient(closest-corner, rgba(16, 47, 70, 0) 60%, rgba(16, 47, 70, 0.2)), 
//                     linear-gradient(108deg, #E5E9BF 10%, #00396F 90%));
// @include background(radial-gradient(closest-corner, rgba(16, 47, 70, 0) 60%, rgba(16, 47, 70, 0.26)), 
                    // linear-gradient(108deg, #26D0CE, #1A2980 90%));

// @include background(radial-gradient(closest-corner, rgba(16, 47, 70, 0) 60%, rgba(16, 47, 70, 0.2)), linear-gradient(108deg, #E0DA81, #E0A681 10%, #0F1B58 90%));
    // linear-gradient(left bottom, #fff 0%, $asphalt 100%)
  // @include background(radial-gradient(ellipse farthest-side at -10% 90%, rgba($asphalt, 0.9) 20%, rgba($asphalt,0)), /* #505A6A */
  //             radial-gradient(ellipse farthest-side at 100% 75%, #fff, rgba(#fff,0) 80%),
  //             radial-gradient(ellipse farthest-side at 85% 60%, lighten($asphalt,30%) 10%, rgba(lighten($asphalt,30%),0)), /* 787F8A */
  //             radial-gradient(circle closest-corner at 50% 0, #fff, #afb4bc));

    .abs-centered {
        position:absolute;
        top:50%;
        left:50%;
    }
    .centered {
        top:24%;
        position:relative;
    }
    max-height:100%;

    // .abs-centered {
    //     margin-top: -5%;
    // } 
    h1 {
        color: #fff;
        // height:200px;
        // margin-top:-100px;
        // top:50%;
        // position: relative;
        text-align: center;
        font-family: 'open_sansregular';
    }
    .profile-pic {
        width:emCalc(40); 
        height:auto; 
        @include border-radius($global-rounded);
        margin-top:emCalc(6);
    }
    .lang-selection {
        position:absolute;
        top:0;
        right:emCalc(20);
        ul {
            list-style: none;
            background:#3c6276;
            background:rgba($asphalt, 0.7);
            overflow: hidden;
            li {
                float:left;
                a {
                    display:block;
                    padding:emCalc(10, 15);
                    color:darken(#fff, 40%);
                    font-size:emCalc(16);
                    &:hover {
                        color:#fff;
                    }
                    &.active {
                        background:darken($asphalt, 10%);
                        color:#fff;
                    }
                }
            }
        }
    }
    .scroll-down {
        position:absolute; 
        bottom:0;
        left:50%; 
        width:emCalc(280); 
        height:50px; 
        margin-left:emCalc(-140); 
        text-align:center;
        span {
            display: inline-block;
        }
        i {
            top:emCalc(4);
            position:relative;
            font-size:emCalc(18);
            display:block;
        }
    }
}

html, body  {
    height: 100%;
}
html.skrollr, .skrollr body {
    height:auto!important;
}
.fixed {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

.cssanimations {
        .fadeIn {
            opacity:0;
        }
        .popupOut {
            @include transform(scale(0));
        }
        .delayedAnimateStuff {
            .fadeIn,
            .popupOut {
                -webkit-animation-fill-mode:forwards!important;
                -moz-animation-fill-mode:forwards!important;
                -o-animation-fill-mode:forwards!important;
                animation-fill-mode:forwards!important;
            }
            .fadeIn {
                -webkit-animation:fadeIn ease-in 1;
                -moz-animation:fadeIn ease-in 1;
                -o-animation:fadeIn ease-in 1;
                animation:fadeIn ease-in 1;
            }
            .popupOut {
                -webkit-animation:popupOut linear 1;
                -moz-animation:popupOut linear 1;
                -o-animation:popupOut linear 1;
                animation:popupOut linear 1;
            }
        }
    // }
}

 
/* Animation Times - Time for image to fade in
---------------------------------------------------- */
.animation-400ms {
    -webkit-animation-duration:400ms!important;
    -moz-animation-duration:400ms!important;
    -o-animation-duration:400ms!important;
    animation-duration:400ms!important;
}

.animation-600ms {
    -webkit-animation-duration:600ms!important;
    -moz-animation-duration:600ms!important;
    -o-animation-duration:600ms!important;
    animation-duration:600ms!important;
}

.animation-1s {
    -webkit-animation-duration:1s!important;
    -moz-animation-duration:1s!important;
    -o-animation-duration:1s!important;
    animation-duration:1s!important;
}
 
/* Animation Delay - Time for image to be delayed
---------------------------------------------------- */
.animationDelay-400ms {
    -webkit-animation-delay:400ms!important;
    -moz-animation-delay:400ms!important;
    -o-animation-delay:400ms!important;
    animation-delay:400ms!important;
}
.animationDelay-2s {
    -webkit-animation-delay:2s!important;
    -moz-animation-delay:2s!important;
    -o-animation-delay:2s!important;
    animation-delay:2s!important;
}
.animationDelay-3s {
    -webkit-animation-delay:3s!important;
    -moz-animation-delay:3s!important;
    -o-animation-delay:3s!important;
    animation-delay:3s!important;
}
.animationDelay-4s {
    -webkit-animation-delay:4s!important;
    -moz-animation-delay:4s!important;
    -o-animation-delay:4s!important;
    animation-delay:4s!important;
}

.content {
    position:relative;
    z-index:2;
    // top:1000px;;
    // height:1000px;
    background:darken(#fff, 5%);
    overflow: hidden;
    @include box-shadow(0 -1px 2px rgba(60,60,60,0.4), 0 1px 2px rgba(60,60,60,0.4));
}


.developer {
    padding: emCalc(30) 0;
    background-color: $brown;
    // background-color: $asphalt;
    h2 {
        &.subheader {
            font-size:emCalc(28);
            color:lighten($brown, 30%);
        }
    }
    .skills {
        list-style: none;
        color:#fff;
        li {
            line-height: 1.8;
            // height:$progress-bar-height;
            text-indent: emCalc(8);
            .category {
                font-size:emCalc(14);
                font-weight: bold;
                white-space: nowrap;
            }
            .meter {
                background-color:$green;
            }
            &:nth-child(1){
                .meter {
                    background-color:$purple;
                    // color:lighten($purple, 20%);
                    // text-shadow:0 1px 1px rgba(lighten($purple, 30%), 0.4);
                }
            }
            &:nth-child(2){
                .meter {
                    background-color:$blue;
                    // color:darken($blue, 30%);
                    // text-shadow:0 1px 1px rgba(lighten($blue, 30%), 0.4);
                }
            }
            &:nth-child(3){
                .meter {
                    background-color:darken($green, 5%);
                    // color:darken($green, 30%);
                    // text-shadow:0 1px 1px rgba(lighten($green, 30%), 0.4);
                }
            }
            &:nth-child(4){
                .meter {
                    background-color:$pumpkin;
                    // color:darken($pumpkin, 30%);
                    // text-shadow:0 1px 1px rgba(lighten($pumpkin, 30%), 0.4);
                }
            }
            &:nth-child(5){
                .meter {
                    background-color:$yellow;
                    // color:darken($yellow, 40%);
                    // text-shadow:0 1px 1px rgba(lighten($yellow, 30%), 0.4);
                }
            }
            &:nth-child(6){
                .meter {
                    background-color:$skin;
                    // color:darken($skin, 40%);
                    // text-shadow:0 1px 1px rgba(lighten($skin, 30%), 0.4);
                }
            }
        }
    }    
    .technologies-wrap {
        position:relative;
        background:$brown;
    }
    .technologies {
        &.legend {
            text-align: center;
            // for mobile text-align:left;
            span {
                cursor: help;
                &:before {
                    content:'';
                    height:1em;
                    width: 1em;
                    left: 0;
                    top:2px;
                    margin-right:4px;
                    display:inline-block;
                    // top: 50%;
                    // margin-top:-0.5em;
                    position: relative;
                }
                &.front-end:before {
                    background-color:$skin;
                }
                &.mvc:before {
                    background-color:$purple;
                }
                &.api:before {
                    background-color:$blue;
                }
                &.test:before {
                    background-color:$pumpkin;
                }
                &.version-control:before {
                    background-color:$green;
                }
                &.lib-fram:before {
                    background-color:$yellow;
                }
                &.various:before {
                    background-color:$asphalt;
                }
                position: relative;
                // padding-left:1.2em;
                margin-right:1em;
                white-space: nowrap;
            }
        }
        .label {
            margin-bottom:emCalc(2);
            margin-right:emCalc(2);
            @include transition(all 0.3s ease-in);
            &.front-end {
                background-color:$skin;
            }
            &.mvc {
                background-color:$purple;
            }
            &.api {
                background-color:$blue;
            }
            &.test {
                background-color:$pumpkin;
            }
            &.version-control {
                background-color:$green;
            }
            &.lib-fram {
                background-color:$yellow;
            }
            &.various {
                background-color:$asphalt;
            }
        }
    }
    .experience hr {
        margin-left: auto;
        margin-right: auto;
        width:30%;
    }    
}
.blurred {
    @include filter(blur(2px));
}

.scaledOut {
    @include transform(scale(0.6));
}

.grayscale {
    background-color:lighten($brown, 3%)!important;
    color:darken(#fff, 20%);
}

.photography {
    background-color:$asphalt;
    padding:14% 0 18%;
    max-height: 100%;
    overflow: hidden;
    position:relative;
    text-align: center;
    z-index: 3;
    .backstretch-wrap {
        position:absolute;
        top:0;right:0;left:0;width:0;
        width:100%;
        height:130%;
    }
    h2 {
        // text-shadow: 0 1px 1px rgba(#000, 0.8);
        position: relative;
        z-index: 1;
        span {
            background: $brown;
            background: rgba($brown, 0.8);
            color:lighten($brown, 60%);
            padding:emCalc(2, 4);
        }
        &.subheader {
            font-size:emCalc(22);
            // background: rgba(lighten($brown, 5%), 0.8);
            // color:lighten($brown, 30%);
            // padding:emCalc(1, 2);
        }
    }
    .icon {
        position:relative;
        z-index: 1;
        font-size:emCalc(24);
        cursor: pointer;
        color:#fff;
        background: $brown;
        background: rgba($brown, 0.8);
        &:hover {
            color:darken(#fff, 20%);
        }
    }
}

.no-js {
    .backstretch-wrap {
        background-image:image_url('photos/stuck-in-traffic.jpg');
        background-repeat:no-repeat;
        background-position: 50% 0;
        @include background-size(cover);
    }
    .photography .icon {
        display:none;
    }
}
@media #{$media-phone} {
    .developer {
        h2 {
            &.subheader {
                font-size:emCalc(24)!important;
            }
        }
    }
    .photography {
        h2 {
            font-size:emCalc(30);
            padding-top:10%;
            line-height:1.6;
            &.subheader {
                padding-top:0;
                padding-bottom:6%;
            }
        }
    }
    .writing {
        h2.subheader {<commit_msg>added fixed background for .no-js<commit_after>::-moz-selection {
    // background: #b3d4fc;
    background: darken($purple, 8%);
    color:#fff;
    text-shadow: none;
}

::selection {
    // background: #b3d4fc;
    background: darken($purple, 8%);
    color:#fff;
    text-shadow: none;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}



h1, h2, h3, h4, h5, h6 {
    letter-spacing: -1px;
    text-align: center;
}


#console {
    color: #FF0000;
    // display: none;
    font: 14px/1.3 'Helvetica Neue',Helvetica,Arial,sans-serif;
    right: 0;
    padding: 20px;
    position: fixed;
    text-align: left;
    top: 0;
    z-index: 1000;    
}
.top-anchor {
    position:absolute;
    top:0;
    left:0;
    z-index:-100000;
}

.back-to-top {
    position:fixed;
    z-index:10;
    bottom:emCalc(22);
    right:emCalc(6);
    font-size:emCalc(34);
    color:#fff;
    &:hover {
        color:darken($asphalt, 10%);
    }
}

.main-nav {
    position:fixed;
    left:0;
    top:0;
    z-index:5;
    overflow:hidden;
    .logo {
        display:block;
        float:left;
        background:$green-sea;
        width:emCalc(86);
        height:emCalc(72);
        position:relative;
        z-index:2;
        border-bottom:1px solid rgba(darken($green-sea, 20%), 0.4);
        border-right:1px solid rgba(darken($green-sea, 20%), 0.4);
        .circle {
            @include border-radius($global-rounded);
            width:emCalc(58);
            height:emCalc(58);
            text-align: center;
            line-height:emCalc(58);
            display:block;
            margin:0 auto;
            margin-top:emCalc(7);
            // border:1px solid transparent;
            border:1px solid darken($green-sea, 20%);
            color:darken($green-sea, 20%);
        }
    }
    &:hover {
        ul {
            margin-left:0!important;
        }
        .circle {
            background:darken($green-sea, 20%);
            color:$green-sea;
        }
    }
    ul {
        list-style: none;
        margin:0;
        float:left;
        overflow:hidden;
        position:relative;
        z-index:1;
        @include transition(all 0.3s linear);
        margin-left:-100%;
        // border-right:1px solid rgba(darken($asphalt, 20%), 0.2);
        // border-right:1px solid rgba(darken($asphalt, 20%), 0.2);
        li {
            float:left;
            height:emCalc(72);
            line-height: emCalc(72);
            a {
                border-bottom:1px solid rgba(darken($asphalt, 20%), 0.2);
                padding:0 emCalc(8);
                display:block;
                background:#2b4f62;
                background:rgba($asphalt, 0.9);
                color:darken(#fff, 40%);
                font-size:emCalc(20);
                &:hover {
                    color:#fff;
                    background:darken($asphalt, 4%);
                }
            }
            &:last-child {
                a {
                    border-right:1px solid rgba(darken($asphalt, 20%), 0.2);
                }
            }
            &.active {
                a {
                    background:darken($asphalt, 10%);
                    color:#fff;
                }
            }
        }
    }
}


#skrollr-body {
    // height: 100%;
    z-index:4;
    position: relative;
}

.intro {
    width:100%;
    height:100%;
    z-index:1;
    position:relative;
    // background: image_url('intro_bg1.jpg');
    // background-repeat:no-repeat;
    // background-position: 50% 0;
    // background-attachment: fixed;
    // background-size: 100% auto;
  // background: -webkit-linear-gradient(#fff, $asphalt);



    @include background(radial-gradient(ellipse farthest-side at -10% 90%, rgba($asphalt, 0.9) 20%, rgba($asphalt,0)),
                        radial-gradient(ellipse farthest-side at 100% 75%, #fff, rgba(#fff,0) 80%));
    background-color:lighten($asphalt,34%);


// @include background(radial-gradient(closest-corner, rgba(16, 47, 70, 0) 60%, rgba(16, 47, 70, 0.2)), 
//                     linear-gradient(108deg, #E5E9BF 10%, #00396F 90%));
// @include background(radial-gradient(closest-corner, rgba(16, 47, 70, 0) 60%, rgba(16, 47, 70, 0.26)), 
                    // linear-gradient(108deg, #26D0CE, #1A2980 90%));

// @include background(radial-gradient(closest-corner, rgba(16, 47, 70, 0) 60%, rgba(16, 47, 70, 0.2)), linear-gradient(108deg, #E0DA81, #E0A681 10%, #0F1B58 90%));
    // linear-gradient(left bottom, #fff 0%, $asphalt 100%)
  // @include background(radial-gradient(ellipse farthest-side at -10% 90%, rgba($asphalt, 0.9) 20%, rgba($asphalt,0)), /* #505A6A */
  //             radial-gradient(ellipse farthest-side at 100% 75%, #fff, rgba(#fff,0) 80%),
  //             radial-gradient(ellipse farthest-side at 85% 60%, lighten($asphalt,30%) 10%, rgba(lighten($asphalt,30%),0)), /* 787F8A */
  //             radial-gradient(circle closest-corner at 50% 0, #fff, #afb4bc));

    .abs-centered {
        position:absolute;
        top:50%;
        left:50%;
    }
    .centered {
        top:24%;
        position:relative;
    }
    max-height:100%;

    // .abs-centered {
    //     margin-top: -5%;
    // } 
    h1 {
        color: #fff;
        // height:200px;
        // margin-top:-100px;
        // top:50%;
        // position: relative;
        text-align: center;
        font-family: 'open_sansregular';
    }
    .profile-pic {
        width:emCalc(40); 
        height:auto; 
        @include border-radius($global-rounded);
        margin-top:emCalc(6);
    }
    .lang-selection {
        position:absolute;
        top:0;
        right:emCalc(20);
        ul {
            list-style: none;
            background:#3c6276;
            background:rgba($asphalt, 0.7);
            overflow: hidden;
            li {
                float:left;
                a {
                    display:block;
                    padding:emCalc(10, 15);
                    color:darken(#fff, 40%);
                    font-size:emCalc(16);
                    &:hover {
                        color:#fff;
                    }
                    &.active {
                        background:darken($asphalt, 10%);
                        color:#fff;
                    }
                }
            }
        }
    }
    .scroll-down {
        position:absolute; 
        bottom:0;
        left:50%; 
        width:emCalc(280); 
        height:50px; 
        margin-left:emCalc(-140); 
        text-align:center;
        span {
            display: inline-block;
        }
        i {
            top:emCalc(4);
            position:relative;
            font-size:emCalc(18);
            display:block;
        }
    }
}

html, body  {
    height: 100%;
}
html.skrollr, .skrollr body {
    height:auto!important;
}
.fixed {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

.cssanimations {
        .fadeIn {
            opacity:0;
        }
        .popupOut {
            @include transform(scale(0));
        }
        .delayedAnimateStuff {
            .fadeIn,
            .popupOut {
                -webkit-animation-fill-mode:forwards!important;
                -moz-animation-fill-mode:forwards!important;
                -o-animation-fill-mode:forwards!important;
                animation-fill-mode:forwards!important;
            }
            .fadeIn {
                -webkit-animation:fadeIn ease-in 1;
                -moz-animation:fadeIn ease-in 1;
                -o-animation:fadeIn ease-in 1;
                animation:fadeIn ease-in 1;
            }
            .popupOut {
                -webkit-animation:popupOut linear 1;
                -moz-animation:popupOut linear 1;
                -o-animation:popupOut linear 1;
                animation:popupOut linear 1;
            }
        }
    // }
}

 
/* Animation Times - Time for image to fade in
---------------------------------------------------- */
.animation-400ms {
    -webkit-animation-duration:400ms!important;
    -moz-animation-duration:400ms!important;
    -o-animation-duration:400ms!important;
    animation-duration:400ms!important;
}

.animation-600ms {
    -webkit-animation-duration:600ms!important;
    -moz-animation-duration:600ms!important;
    -o-animation-duration:600ms!important;
    animation-duration:600ms!important;
}

.animation-1s {
    -webkit-animation-duration:1s!important;
    -moz-animation-duration:1s!important;
    -o-animation-duration:1s!important;
    animation-duration:1s!important;
}
 
/* Animation Delay - Time for image to be delayed
---------------------------------------------------- */
.animationDelay-400ms {
    -webkit-animation-delay:400ms!important;
    -moz-animation-delay:400ms!important;
    -o-animation-delay:400ms!important;
    animation-delay:400ms!important;
}
.animationDelay-2s {
    -webkit-animation-delay:2s!important;
    -moz-animation-delay:2s!important;
    -o-animation-delay:2s!important;
    animation-delay:2s!important;
}
.animationDelay-3s {
    -webkit-animation-delay:3s!important;
    -moz-animation-delay:3s!important;
    -o-animation-delay:3s!important;
    animation-delay:3s!important;
}
.animationDelay-4s {
    -webkit-animation-delay:4s!important;
    -moz-animation-delay:4s!important;
    -o-animation-delay:4s!important;
    animation-delay:4s!important;
}

.content {
    position:relative;
    z-index:2;
    // top:1000px;;
    // height:1000px;
    background:darken(#fff, 5%);
    overflow: hidden;
    @include box-shadow(0 -1px 2px rgba(60,60,60,0.4), 0 1px 2px rgba(60,60,60,0.4));
}


.developer {
    padding: emCalc(30) 0;
    background-color: $brown;
    // background-color: $asphalt;
    h2 {
        &.subheader {
            font-size:emCalc(28);
            color:lighten($brown, 30%);
        }
    }
    .skills {
        list-style: none;
        color:#fff;
        li {
            line-height: 1.8;
            // height:$progress-bar-height;
            text-indent: emCalc(8);
            .category {
                font-size:emCalc(14);
                font-weight: bold;
                white-space: nowrap;
            }
            .meter {
                background-color:$green;
            }
            &:nth-child(1){
                .meter {
                    background-color:$purple;
                    // color:lighten($purple, 20%);
                    // text-shadow:0 1px 1px rgba(lighten($purple, 30%), 0.4);
                }
            }
            &:nth-child(2){
                .meter {
                    background-color:$blue;
                    // color:darken($blue, 30%);
                    // text-shadow:0 1px 1px rgba(lighten($blue, 30%), 0.4);
                }
            }
            &:nth-child(3){
                .meter {
                    background-color:darken($green, 5%);
                    // color:darken($green, 30%);
                    // text-shadow:0 1px 1px rgba(lighten($green, 30%), 0.4);
                }
            }
            &:nth-child(4){
                .meter {
                    background-color:$pumpkin;
                    // color:darken($pumpkin, 30%);
                    // text-shadow:0 1px 1px rgba(lighten($pumpkin, 30%), 0.4);
                }
            }
            &:nth-child(5){
                .meter {
                    background-color:$yellow;
                    // color:darken($yellow, 40%);
                    // text-shadow:0 1px 1px rgba(lighten($yellow, 30%), 0.4);
                }
            }
            &:nth-child(6){
                .meter {
                    background-color:$skin;
                    // color:darken($skin, 40%);
                    // text-shadow:0 1px 1px rgba(lighten($skin, 30%), 0.4);
                }
            }
        }
    }    
    .technologies-wrap {
        position:relative;
        background:$brown;
    }
    .technologies {
        &.legend {
            text-align: center;
            // for mobile text-align:left;
            span {
                cursor: help;
                &:before {
                    content:'';
                    height:1em;
                    width: 1em;
                    left: 0;
                    top:2px;
                    margin-right:4px;
                    display:inline-block;
                    // top: 50%;
                    // margin-top:-0.5em;
                    position: relative;
                }
                &.front-end:before {
                    background-color:$skin;
                }
                &.mvc:before {
                    background-color:$purple;
                }
                &.api:before {
                    background-color:$blue;
                }
                &.test:before {
                    background-color:$pumpkin;
                }
                &.version-control:before {
                    background-color:$green;
                }
                &.lib-fram:before {
                    background-color:$yellow;
                }
                &.various:before {
                    background-color:$asphalt;
                }
                position: relative;
                // padding-left:1.2em;
                margin-right:1em;
                white-space: nowrap;
            }
        }
        .label {
            margin-bottom:emCalc(2);
            margin-right:emCalc(2);
            @include transition(all 0.3s ease-in);
            &.front-end {
                background-color:$skin;
            }
            &.mvc {
                background-color:$purple;
            }
            &.api {
                background-color:$blue;
            }
            &.test {
                background-color:$pumpkin;
            }
            &.version-control {
                background-color:$green;
            }
            &.lib-fram {
                background-color:$yellow;
            }
            &.various {
                background-color:$asphalt;
            }
        }
    }
    .experience hr {
        margin-left: auto;
        margin-right: auto;
        width:30%;
    }    
}
.blurred {
    @include filter(blur(2px));
}

.scaledOut {
    @include transform(scale(0.6));
}

.grayscale {
    background-color:lighten($brown, 3%)!important;
    color:darken(#fff, 20%);
}

.photography {
    background-color:$asphalt;
    padding:14% 0 18%;
    max-height: 100%;
    overflow: hidden;
    position:relative;
    text-align: center;
    z-index: 3;
    .backstretch-wrap {
        position:absolute;
        top:0;right:0;left:0;width:0;
        width:100%;
        height:130%;
    }
    h2 {
        // text-shadow: 0 1px 1px rgba(#000, 0.8);
        position: relative;
        z-index: 1;
        span {
            background: $brown;
            background: rgba($brown, 0.8);
            color:lighten($brown, 60%);
            padding:emCalc(2, 4);
        }
        &.subheader {
            font-size:emCalc(22);
            // background: rgba(lighten($brown, 5%), 0.8);
            // color:lighten($brown, 30%);
            // padding:emCalc(1, 2);
        }
    }
    .icon {
        position:relative;
        z-index: 1;
        font-size:emCalc(24);
        cursor: pointer;
        color:#fff;
        background: $brown;
        background: rgba($brown, 0.8);
        &:hover {
            color:darken(#fff, 20%);
        }
    }
}

.no-js {
    .backstretch-wrap {
        background-image:image_url('photos/stuck-in-traffic.jpg');
        background-repeat:no-repeat;
        background-position: 50% 0;
        @include background-size(cover);
        background-attachment: fixed;
    }
    .photography .icon {
        display:none;
    }
}
@media #{$media-phone} {
    .developer {
        h2 {
            &.subheader {
                font-size:emCalc(24)!important;
            }
        }
    }
    .photography {
        h2 {
            font-size:emCalc(30);
            padding-top:10%;
            line-height:1.6;
            &.subheader {
                padding-top:0;
                padding-bottom:6%;
            }
        }
    }
    .writing {
        h2.subheader {
{'fraction_non_alphanumeric': 0.1423183072677093, 'fraction_numerical': 0.039987733823980375, 'mean_word_length': 1.3528860028860028, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '907432', 'n_tokens_mistral': 11482, 'n_tokens_neox': 9879, 'n_words': 1616}