@font-face {
    font-family: Montserrat-Regular;
    src: url(font/Montserrat-Regular.otf);
}

/*  base64
@font-face {
    font-family: Montserrat-Medium;
    src: url(font/Montserrat-Medium.otf);
}
*/

@font-face {
    font-family: Montserrat-SemiBold;
    src: url(font/Montserrat-SemiBold.otf);
}

/*  base64
@font-face {
    font-family: Montserrat-Bold;
    src: url(font/Montserrat-Bold.otf);
}
*/

/*  base64
@font-face {
    font-family: Montserrat-ExtraBold;
    src: url(font/Montserrat-ExtraBold.otf);
}
*/

/*  base64
@font-face {
    font-family: MontserratAlternates-Medium;
    src: url(font/MontserratAlternates-Medium.otf);
}
*/

*, *::before, *::after {
    box-sizing: border-box;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background: transparent;
    display: none;
}
::-webkit-scrollbar-thumb {
    background: hsl(192, 100%, 26%);
    border-radius: 10px;
    /*box-shadow: 7px 10px 12px #000000;*/
}
::-webkit-scrollbar-thumb:hover{
    background: hsl(186, 100%, 35%);
}
::-webkit-scrollbar-track{
    background: transparent;
    border-radius: 10px;
}

body {
    min-height: 100%;
    padding: 0;
    margin: 0;
    background: hsl(192, 100%, 2%);
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern";
    -webkit-font-feature-settings: "kern";
    -moz-font-feature-settings: "kern";
    -moz-font-feature-settings: "kern=1";

    touch-action: pan-x pan-y;

    transition: all 300ms ease !important;
}

h1 {
    font-family: Montserrat-Bold;
    text-transform: uppercase;
    font-size: 12pt;
    letter-spacing: 0.1rem;
    color: hsl(188, 90%, 48%);
}

h2 {
    font-family: Montserrat-Bold;
    text-transform: uppercase;
    font-size: 11pt;
    letter-spacing: 0rem;
    color: hsl(192, 100%, 26%);
}

h3 {
    font-family: Montserrat-Bold;
    text-transform: uppercase;
    font-size: 10pt;
    letter-spacing: 0rem;
}

#logo {
    position: absolute;
    left: 20px;top: 0;
    margin: auto;
    width: 200px;
}

#menu {
    position: absolute;
    top: -150px;
    left: 0; right: 0;
    width: 100%;
    height: 150px;
    background: hsl(185, 100%, 95%);
    z-index: 10;

    transition: all 300ms ease !important;
}

    #directory {
        position: absolute;
        top: 0; bottom: 0;
        left: 0; right: 0;
        margin: auto;
        width: calc(100% - 20px);
        height: 60px;
        text-align: center;
    }

    #directory a {
        float: right;
        width: 120px; height: 40px;
        margin: 10px;
        padding: 10px;
        text-align: center;
        text-decoration: none;
        transition: all 300ms ease !important;

        background: hsl(185, 100%, 95%);
        color: hsl(192, 100%, 4%);
    }

    #directory a:hover {
        border-radius: 10px;

        background: hsl(192, 100%, 4%);
        color: hsl(185, 100%, 95%);
    }

        #directory a h3 {
            position:relative;
            top: calc(50% - 8px);bottom: 0;
            margin: auto;
            display: block;
            height: 16px;
        }

        #directory > a:nth-of-type(3) > h3::before {
            content: 'resumé';
        }

        #directory > a:hover:nth-of-type(3) > h3::before {
            content: 'download';
        }

        #directory > a:nth-of-type(2) > h3::before {
            content: 'portfolio';
        }

        #directory > a:hover:nth-of-type(2) > h3::before {
            content: 'download';
        }

        #directory > a:nth-of-type(1) > h3::before {
            content: 'contact';
        }

        #directory > a:hover:nth-of-type(1) > h3::before {
            content: 'hello!';
        }

#backdrop {
    width: 100vw;
    height: 100vh;
    background: hsl(192, 100%,26%);
    z-index: 5;

    opacity: 0;

    transition: all 300ms ease !important;
}

#landing {
    position: absolute;
    top: 0;
    left: 0;right: 0;
    width: 100%;
    height: 100%;
    background: hsl(192, 100%, 2%);
    z-index: 100;

    transition: all 300ms ease !important;
}

#mark {
    position: absolute;
    top: 0; bottom: 0;
    left: 50px;
    margin: auto;
    width: 150px;
    height: 535px;
    padding-bottom: 15px;
}

    #mark img {
        width: 100%;
        height: 100%;
        background: url(img/mark.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position-y: bottom;
    }

#intro {
    position: absolute;
    right: 40px;
    top: 0; bottom: 0;
    margin: auto;
    width: 450px;
    height: 535px;

    transition: all 300ms ease !important;
}

    #intro p {
        text-align: justify;
        line-height: 160%;
        font-family: Montserrat-Medium;
        /*font-size: 0.9196rem;
        letter-spacing: 0.05rem;*/
        font-size: 11pt;
        letter-spacing: 0.05rem;
        color: #ffffff;
    }

    @keyframes introOnboarding {
        0%, 50%, 100% {
            opacity: 0.75;
        }
        25%, 75% {
            opacity: 0.25;
        }
    }

    #intro::before {
        position: absolute;
        content: 'scroll up for menu';
        margin-top: -50px;
        font-family: Montserrat-ExtraBold;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.3rem;
        font-size: 10pt;    
        color: hsla(185, 100%, 95%, 0.6);
        width: 100%;
        -webkit-animation: introOnboarding 10s infinite;
        animation: introOnboarding 10s infinite;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    #intro::after {
        position: absolute;
        content: 'scroll down for more';
        margin-top: 30px;
        font-family: Montserrat-ExtraBold;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.3rem;
        font-size: 10pt;    
        color: hsla(185, 100%, 95%, 0.6);
        width: 100%;
        -webkit-animation: introOnboarding 10s infinite;
        animation: introOnboarding 10s infinite;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

#skills {
    float: left;
    align-items: center;
    align-content: center;
    padding: 40px;
    width: 100%;
    background: hsl(192, 100%, 8%);
    z-index: 110;

    transition: all 300ms ease !important;
}

    #skills h1 {
        display: flex;
        margin-top: 10px;
        float: left;
        width: 110px;
        text-align: left;
    }

    #skills span {
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        float: left;
        margin-left: 100px;
        width: calc(100% - 210px);
    }

    #skills span a {
        display: flex;
        margin: 10px;
        text-decoration: none;
        border-radius: 30px;
        background: hsla(192, 100%, 26%, 0.25);

        transition: all 300ms ease !important;
    }

    #skills span a:hover {
        background: hsl(192, 100%, 26%) !important;
        border-radius: 5px;
    }

    #skills span a h2 {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        margin: 0;
        padding: 5px 10px;
        color: hsl(192, 100%, 26%);
    }

    #skills span a:hover h2 {
        color: hsl(185, 100%, 95%) !important;
    }

    #skills span a h2::before {
        display: flex;
        height: inherit;
        overflow-y: hidden;
        transition: all 300ms ease !important;
    }

    #skills span a:hover h2::before {
        height: 0;
    }

    #skills span a h2::after {
        display: flex;
        content: '[+]';
        height: 0;
        overflow-y: hidden;
        transition: all 300ms ease !important;
    }

    #skills span a:hover h2::after {
        height: inherit;
    }

    #skills > span > a:nth-of-type(1) > h2::before {
        content: 'web development';
    }

    #skills > span > a:nth-of-type(2) > h2::before {
        content: 'CRM Platforms';
    }

    #skills > span > a:nth-of-type(3) > h2::before {
        content: '3d modeling';
    }

    #skills > span > a:nth-of-type(4) > h2::before {
        content: 'APP PROTOTYPING';
    }

    #skills > span > a:nth-of-type(5) > h2::before {
        content: 'adobe cC';
    }

    #skills > span > a:nth-of-type(6) > h2::before {
        content: 'studio photography';
    }

    #skills > span > a:nth-of-type(7) > h2::before {
        content: 'I.T. ops and Other tech skills';
    }

    
#works {
    float: left;
    width: 100%; height: 100vh;
    background: hsl(192, 100%, 2%);
}

#footer {
    position: fixed;
    left: 50px;bottom: 20px;
    /*padding-left: 30px;*/
    height: 50px;
    width: 380px;
    background: hsl(192, 100%, 4%);
    z-index: 200;
}

#footer::before {
    position: absolute;
    left: -29.4514px;
    content: " ";
    display: block;
    width: 30.5486px;
    height: 50px;
    background-image: url(img/slice-uleft.svg);
    background-size: contain;
}

#footer::after {
    position: absolute;
    right: -29.4514px;
    content: " ";
    display: block;
    width: 30.5486px;
    height: 50px;
    background-image: url(img/slice-bright.svg);
    background-size: contain;
}

    #footer h1 {
        float: left;
        margin-left: 0px;
        padding-right: 30px;
        font-family: MontserratAlternates-Medium;
        font-size: 15pt;
        letter-spacing: 0.025rem;
        color: hsl(0, 100%, 100%);
    }    

    #footer i1 {
        font-family: Montserrat-Medium;
        font-size: 15pt;
        letter-spacing: 0.025rem;
        color: hsl(0, 100%, 100%);
    }

    #footer h2 {
        float: left;
        margin-top: 12px;
        font-family: Montserrat-Bold;
        font-size: 8pt;
        letter-spacing: 0.1rem;
        color: hsl(185, 100%,35%);
    }

    @media only screen and (max-width: 740px) {
        
    }

    @media only screen and (min-width: 1194px) {
        #intro {
            right: calc(50vh - 252.5px);
        }

        #skills span {
            justify-content: flex-start;
        }
    }