JustalK/PORTFOLIO

@import (reference) "libs/constants.less";
@import (reference) "libs/mixins.less";
 
// Partial Meyer Reset
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
 
a {
    text-decoration: none;
    color: inherit;
}
 
.font-face('Lato-Light','../../fonts/Lato-Light', normal, normal);
.font-face('Lato-Bold','../../fonts/Lato-Bold', normal, normal);
.font-face('Lato-Black','../../fonts/Lato-Black', normal, normal);
.font-face(@font-name-1,'../../fonts/Lato-LightItalic', normal, normal);
 
html {
    font-size: 62.5%;
    height: 100%;
}
 
body {
    overflow-x: hidden;
    height: inherit;
}
 
#app {
    height: inherit;
}
 
html,
body,
#app {
    margin: 0;
    background-color: @background-color;
    -webkit-font-smoothing: antialiased;
    font-family: 'Lato-Light', sans-serif;
    color: @text-color;
    width: 100%;
}
 
#PROJECT,
#PORTFOLIO,
#RESUME {
    &::before,
    &::after {
        content: ' ';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 0;
        z-index: @LAYER-ANIMATION;
    }
 
    &::before {
        .transition(all 0.6s cubic-bezier(0.87, 0.32, 0.81, 0.36));
 
        background: @background-color-transition-d;
        opacity: 0.7;
    }
 
    &::after {
        .transition(all 1s cubic-bezier(0.87, 0.32, 0.81, 0.36));
 
        background: @background-color-transition-l;
    }
 
    &.unmounted {
        &::before,
        &::after {
            width: 100%;
        }
    }
}