@import url('https://fonts.googleapis.com/css?family=Exo+2:500');

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.mainWrapper {
    height: 100vh;
    width: 100vw;
    font-family: 'Exo 2', sans-serif;
    position: fixed;
}

/* .hello, */
.one,
.two,
.three,
.four,
.five,
.six,
.seven {
    height: 98vh;
    width: 98vw;
    width: 97vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 7px;
}

.hello {
    /* border: 2px solid rgb(190, 190, 190);
    -webkit-box-shadow: 3px 2px 14px 2px rgb(190, 190, 190), -3px -2px 14px 2px rgb(190, 190, 190);
    -moz-box-shadow: 3px 2px 14px 2px rgb(190, 190, 190), -3px -2px 14px 2px rgb(190, 190, 190);
    box-shadow: 3px 2px 14px 2px rgb(190, 190, 190), -3px -2px 14px 2px rgb(190, 190, 190); */
    background-color: black;
    background-size: contain;
    background-position: center;
    background-image: url(./images/8255549090_d75f6eb4b9_b.jpg);
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.one {
    border: 2px solid rgb(20, 158, 20);
    -webkit-box-shadow: 2px 2px 14px 2px rgb(20, 158, 20), -2px -2px 14px 2px rgb(20, 158, 20);
    -moz-box-shadow: 2px 2px 14px 2px rgb(20, 158, 20), -2px -2px 14px 2px rgb(20, 158, 20);
    box-shadow: 2px 2px 14px 2px rgb(20, 158, 20), -2px -2px 14px 2px rgb(20, 158, 20);
}

.two {
    border: 2px solid rgb(197, 41, 41);
    -webkit-box-shadow: 2px 2px 14px 2px rgb(197, 41, 41), -2px -2px 14px 2px rgb(197, 41, 41);
    -moz-box-shadow: 2px 2px 14px 2px rgb(197, 41, 41), -2px -2px 14px 2px rgb(197, 41, 41);
    box-shadow: 2px 2px 14px 2px rgb(197, 41, 41), -2px -2px 14px 2px rgb(197, 41, 41);
}

.three {
    border: 2px solid dimgray;
    -webkit-box-shadow: 2px 2px 14px 2px dimgray, -2px -2px 14px 2px dimgray;
    -moz-box-shadow: 2px 2px 14px 2px dimgray, -2px -2px 14px 2px dimgray;
    box-shadow: 2px 2px 14px 2px dimgray, -2px -2px 14px 2px dimgray;
}

.four {
    border: 2px solid rgb(72, 117, 180);
    -webkit-box-shadow: 2px 2px 14px 2px rgb(72, 117, 180), -2px -2px 14px 2px rgb(72, 117, 180);
    -moz-box-shadow: 2px 2px 14px 2px rgb(72, 117, 180), -2px -2px 14px 2px rgb(72, 117, 180);
    box-shadow: 2px 2px 14px 2px rgb(72, 117, 180), -2px -2px 14px 2px rgb(72, 117, 180);
}

.five {
    border: 2px solid rgb(46, 187, 235);
    -webkit-box-shadow: 2px 2px 14px 2px rgb(46, 187, 235), -2px -2px 14px 2px rgb(46, 187, 235);
    -moz-box-shadow: 2px 2px 14px 2px rgb(46, 187, 235), -2px -2px 14px 2px rgb(46, 187, 235);
    box-shadow: 2px 2px 14px 2px rgb(46, 187, 235), -2px -2px 14px 2px rgb(46, 187, 235);
}

.six {
    border: 2px solid rgb(107, 18, 107);
    -webkit-box-shadow: 2px 2px 14px 2px rgb(107, 18, 107), -2px -2px 14px 2px rgb(107, 18, 107);
    -moz-box-shadow: 2px 2px 14px 2px rgb(107, 18, 107), -2px -2px 14px 2px rgb(107, 18, 107);
    box-shadow: 2px 2px 14px 2px rgb(107, 18, 107), -2px -2px 14px 2px rgb(107, 18, 107);
}

.seven {
    border: 2px solid darkorange;
    -webkit-box-shadow: 2px 2px 14px 2px darkorange, -2px -2px 14px 2px darkorange;
    -moz-box-shadow: 2px 2px 14px 2px darkorange, -2px -2px 14px 2px darkorange;
    box-shadow: 2px 2px 14px 2px darkorange, -2px -2px 14px 2px darkorange;
}

@keyframes webDevName {
    from {
        /* transform: webDevName(0deg); */
        opacity: 0;
    }

    to {
        /* transform: webDevName(360deg); */
        opacity: 1;
    }
}

@-webkit-keyframes webDevName {
    from {
        /* -webkit-transform: webDevName(0deg); */
        opacity: 0;
    }

    to {
        /* -webkit-transform: webDevName(360deg); */
        opacity: 1;
    }
}

@keyframes webDev {
    from {
        /* transform: webDev(0deg); */
        opacity: 0.5;
    }

    to {
        /* transform: webDev(360deg); */
        opacity: 1;
    }
}

@-webkit-keyframes webDev {
    from {
        /* -webkit-transform: webDev(0deg); */
        opacity: 0.3;
    }

    to {
        /* -webkit-transform: webDev(360deg); */
        opacity: 1;
    }
}

.ilian {
    display: flex;
    flex-direction: row;
    justify-content: center;
    color: black;
    text-shadow: 3px 3px 5px white;
    /* padding-bottom: 5px; */
    /* padding-top: 7px; */
    text-transform: capitalize;
    font-size: 35px;
    height: 10%;
    background-color: black;
    animation: webDevName 1.4s 1;
    animation-timing-function: linear;
}

.developer {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: black;
    text-shadow: 3px 3px 5px white;
    opacity: 0;
    text-transform: capitalize;
    font-size: 28px;
    background-color: black;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 23px;
    border-radius: 5px;
    animation: webDev 3.5s 2s 1;
    animation-timing-function: linear;
}

h3 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    text-transform: capitalize;
    font-size: 35px;
    text-shadow: 1px 2px 4px rgb(97, 97, 97);
}

.navigation {
    position: fixed;
    top: 25%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
}

.navigation div {
    width: 40px;
    height: 27px;
    border-radius: 5px;
    margin: 5px;
    font-family: 'Exo 2', sans-serif;
    text-align: center;
    -webkit-box-shadow: 0px 2px 3px 0 rgba(128, 128, 128, 0.85), inset 0 4px 5px rgba(255,255,255,.8), inset 0 -3px 5px rgba(0,0,0,.7);
    -moz-box-shadow: 0px 2px 3px 0 rgba(128, 128, 128, 0.85), inset 0 4px 5px rgba(255,255,255,.8), inset 0 -3px 5px rgba(0,0,0,.7);
    box-shadow: 0px 2px 3px 0 rgba(128, 128, 128, 0.85), inset 0 4px 5px rgba(255,255,255,.8), inset 0 -3px 5px rgba(0,0,0,.7);
}

.navigation div:active {
    transform: translateY(1.5px);
    /* filter: brightness(107%); */
    -webkit-box-shadow: 0px 1px 2px 0px rgba(92, 91, 91, 0.85), inset 0 2px 2px rgba(255,255,255,.8), inset 0 -2px 2px rgba(0,0,0,.7);
    -moz-box-shadow: 0px 1px 2px 0px rgba(92, 91, 91, 0.85), inset 0 2px 2px rgba(255,255,255,.8), inset 0 -2px 2px rgba(0,0,0,.7);
    box-shadow: 0px 1px 2px 0px rgba(92, 91, 91, 0.85), inset 0 2px 2px rgba(255,255,255,.8), inset 0 -2px 2px rgba(0,0,0,.7);
}

.selected {
    border: 2.5px solid white;
    /* filter: brightness(110%); */
}

.colorTech {
    background-color: rgb(20, 158, 20);
    color: rgb(20, 158, 20);
}

.technologies {
    color: rgb(20, 158, 20);
    /* text-shadow: 2px 2px 3px rgb(20, 158, 20); */
}

.colorProjects {
    background-color: rgb(197, 41, 41);
    color: rgb(197, 41, 41);
}

.projects {
    color: rgb(197, 41, 41);
    /* text-shadow: 2px 2px 3px rgb(197, 41, 41); */
}

.colorGitHub {
    background-color: dimgray;
    color: dimgray;
}

.gitHub {
    color: dimgray;
    /* text-shadow: 2px 2px 3px dimgray; */
}

.colorLinkedIn {
    background-color: rgb(72, 117, 180);
    color: rgb(72, 117, 180);
}

.linkedIn {
    color: rgb(72, 117, 180);
    /* text-shadow: 2px 2px 3px rgb(72, 117, 180); */
}

.colorTwitter {
    background-color: rgb(46, 187, 235);
    color: rgb(46, 187, 235);
}

.twitter {
    color: rgb(46, 187, 235);
    /* text-shadow: 2px 2px 3px rgb(46, 187, 235); */
}

.colorResume {
    background-color: rgb(107, 18, 107);
    color: rgb(107, 18, 107);
}

.resume {
    color: rgb(107, 18, 107);
    /* text-shadow: 2px 2px 3px rgb(107, 18, 107); */
}

.colorContact {
    background-color: darkorange;
    color: darkorange;
}

.contact {
    color: darkorange;
    /* text-shadow: 2px 2px 3px darkorange; */
}

h6 {
    font-family: 'Exo 2', sans-serif;
}

.viewContent {
    position: fixed;
    top: 65%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.more {
    display: grid;
    grid-template-columns: 100%;
    /* grid-template-rows: 50% 50%; */
    list-style: none;
    width: 100%;
}

li {
    margin: auto;
    /* padding-top: 15px; */
}

.row {
    width: 210px;
    height: 70px;
    display: flex;
    flex-flow: wrap;
    /* flex-wrap: wrap; */
    padding: 10px;
    margin-top: 60px;
    border: 1px solid rgb(20, 158, 20);
    border-radius: 7px;
    -webkit-box-shadow: 0 8px 10px 1px rgba(20, 158, 20, 0.2), 0 3px 14px 2px rgba(20, 158, 20, 0.2), 0 6px 5px -3px rgba(20, 158, 20, 0.55);
    -moz-box-shadow: 0 8px 10px 1px rgba(20, 158, 20, 0.2), 0 3px 14px 2px rgba(20, 158, 20, 0.2), 0 6px 5px -3px rgba(20, 158, 20, 0.55);
    box-shadow: 0 8px 10px 1px rgba(20, 158, 20, 0.2), 0 3px 14px 2px rgba(20, 158, 20, 0.2), 0 6px 5px -3px rgba(20, 158, 20, 0.55);
    -webkit-transition: box-shadow .7s, width 1s, height 1s, border-radius .7s, border .9s;
    -o-transition: box-shadow .7s, width 1s, height 1s, border-radius .7s, border .9s;
    -moz-transition: box-shadow .7s, width 1s, height 1s, border-radius .7s, border .9s;
    transition: box-shadow .7s, width 1s, height 1s, border-radius .7s, border .9s;
    transition-timing-function: ease-out;
}

.pic {
    height: 30px;
    width: 30px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transition: width .8s, height .8s;
    -o-transition: width .8s, height .8s;
    -moz-transition: width .8s, height .8s;
    transition: width .8s, height .8s;
    transition-timing-function: ease-out;
}

.html {
    background-image: url(./images/html.png);
}

.css {
    background-size: cover;
    background-image: url(./images/css.png);
}

.js {
    background-size: cover;
    background-image: url(./images/js.png);
}

.node {
    background-image: url(./images/node.png);
}

.react {
    background-image: url(./images/react.png);
}

.mongo {
    background-image: url(./images/mongo.png);
}

h5 {
    color: black;
    line-height: 40px;
    font-size: 1.2em;
}

a {
    text-decoration: none;
    font-size: 1.35em;
    font-weight: bold;
    line-height: 35px;
    color: black;
    text-shadow: 2px 2px 4px darkgray;
    position: relative;
}

.fa {
    color: black;
    padding: 3px 5px 2px 5px;
    font-size: 2em;
}

.fa-twitter {
    padding: 3px 3px 2px 4px;
}

@media (max-width: 360px) {

    h3,
    .ilian {
        font-size: 30px;
    }

    .developer {
        font-size: 20px;
    }

    /* .pic {
        height: 50px;
        width: 50px;
    } */

    /* .row { */
        /* width: 170px; */
        /* height: 150px; */
    /* } */

    .navigation div {
        width: 35px;
        height: 25px;
        margin: 4px;
    }
}

@media (max-height: 414px) {
    .viewContent {
        top: 73%;
    }

    a {
        line-height: 30px;
    }

    .row {
        margin-top: 15px;
    }
}

@media (min-width: 414px) {
    .navigation div {
        width: 40px;
        height: 30px;
        margin: 8px;
    }
}

@media (min-width: 813px) {

    /* .hello, */
    .one,
    .two,
    .three,
    .four,
    .five,
    .six,
    .seven {
        height: 97vh;
        width: 98vw;
        border-radius: 20px;
    }

    .viewContent {
        top: 60%;
    }

    h3,
    .ilian {
        font-size: 2.77em;
    }

    .ilian {
        -webkit-transition: color .7s;
        -o-transition: color .7s;
        -moz-transition: color .7s;
        transition: color .7s;
    }
    .developer {
        font-size: 2.1em;
    }

    h3:hover,
    .ilian:hover {
        cursor: pointer;
    }

    h3:hover {
        font-size: 2.75em;
        text-shadow: 1px 1px 3px;
    }

    .ilian:hover {
        /* opacity: 0.7; */
        color: rgb(235, 235, 235);
    }

    .navigation div {
        width: 52px;
        height: 37px;
        margin: 10px;
        font-size: 1.6em;
        padding: 1px;
        /* border: 1.5px solid white;
        border-right: 2px solid white;
        border-left: 2px solid white; */
        /* border: 1px solid black; */
        /* -webkit-box-shadow: 0px 2px 3px 1px rgba(128, 128, 128, 0.85), inset 0 4px 4px rgba(255,255,255,.8), inset 0 -4px 4px rgba(0,0,0,.7);
        -moz-box-shadow: 0px 2px 3px 1px rgba(128, 128, 128, 0.85), inset 0 4px 4px rgba(255,255,255,.8), inset 0 -4px 4px rgba(0,0,0,.7);
        box-shadow: 0px 2px 3px 1px rgba(128, 128, 128, 0.85), inset 0 4px 4px rgba(255,255,255,.8), inset 0 -4px 4px rgba(0,0,0,.7); */
        -webkit-transition: color .3s;
        -o-transition: color .3s;
        -moz-transition: color .3s;
        transition: color .3s;
    }

    .navigation div:hover {
        color: rgb(240, 240, 240);
        /* filter: brightness(110%); */
        cursor: pointer;
    }

    .navigation div:active {
        color: whitesmoke;
    }

    .selected {
        border: none;
        color: whitesmoke;
    }

    .more {
        display: flex;
        flex-direction: row;
    }

    .row {
        width: 270px;
        height: 95px;
        /* display: grid; */
        /* grid-template-columns: auto auto auto auto auto auto; */
        margin-top: 90px;
        padding: 20px;
    }

    .pic {
        height: 35px;
        width: 35px;
        /* overflow: hidden; */
    }

    .row:hover {
        display: grid;
        grid-template-columns: auto auto auto;
        cursor: pointer;
        width: 315px;
        height: 240px;
        border-radius: 30px;
        border: 3px solid rgb(20, 158, 20);
        -webkit-box-shadow: 0 5px 10px 0 rgb(18, 133, 18), 0 11px 16px 0 rgb(20, 158, 20);
        -moz-box-shadow: 0 5px 10px 0 rgb(18, 133, 18), 0 11px 16px 0 rgb(20, 158, 20);
        box-shadow: 0 5px 10px 0 rgb(18, 133, 18), 0 11px 16px 0 rgb(20, 158, 20);
    }
    .row:hover .pic {
        height: 65px;
        width: 65px;
    }

    .fa {
        font-size: 2.2em;
        border-top: 2px solid white;
        /* border-radius: 7px; */
        -webkit-transition: border-top .3s, color .1s;
        -o-transition: border-top .3s, color .1s;
        -moz-transition: border-top .3s, color .1s;
        transition: border-top .3s, color .1s;
        transition-timing-function: linear;
    }

    .fa:hover {
        color: rgb(128, 128, 128);
        border-top: 2px solid rgb(128, 128, 128);
        text-shadow: 1px 1px 1px rgb(128, 128, 128);
    }

    .envelope:hover {
        border-top: 2px solid darkorange;
        color: darkorange;
        text-shadow: 1px 1px 1px darkorange;
    }

    h5 {
        font-size: 1.5em;
        line-height: 50px;
    }

    a {
        font-size: 1.7em;
        border-top: 2px solid white;
        /* border-radius: 7px; */
        padding: 3px;
        -webkit-transition: border-top .8s, color .6s;
        -o-transition: border-top .8s, color .6s;
        -moz-transition: border-top .8s, color .6s;
        transition: border-top .8s, color .6s;
        transition-timing-function: linear;
    }

    a:hover {
        cursor: pointer;
        color: rgb(197, 41, 41);
        border-top: 2px solid rgb(197, 41, 41);
        text-shadow: 1px 1px 1px rgb(197, 41, 41);
    }

    a[data-descr]:hover::after {
        content: attr(data-descr);
        position: absolute;
        text-shadow: none;
        left: 0;
        top: 64px;
        width: 240px;
        border: 1px solid rgb(197, 41, 41);
        border-radius: 7px;
        -webkit-box-shadow: 0 8px 10px 1px rgba(197, 41, 41, 0.2), 0 3px 14px 2px rgba(197, 41, 41, 0.2), 0 6px 5px -3px rgba(197, 41, 41, 0.55);
        -moz-box-shadow: 0 8px 10px 1px rgba(197, 41, 41, 0.2), 0 3px 14px 2px rgba(197, 41, 41, 0.2), 0 6px 5px -3px rgba(197, 41, 41, 0.55);
        box-shadow: 0 8px 10px 1px rgba(197, 41, 41, 0.2), 0 3px 14px 2px rgba(197, 41, 41, 0.2), 0 6px 5px -3px rgba(197, 41, 41, 0.55);
        padding: 9px;
        color: black;
        font-size: 15px;
        z-index: 1;
    }

    .hoverGit:hover {
        color: dimgray;
        border-top: 2px solid dimgray;
        text-shadow: 1px 1px 1px dimgray;
    }

    .hoverLinked:hover {
        color: rgb(72, 117, 180);
        border-top: 2px solid rgb(72, 117, 180);
        text-shadow: 1px 1px 1px rgb(72, 117, 180);
    }

    .hoverTwitter:hover {
        color: rgb(46, 187, 235);
        border-top: 2px solid rgb(46, 187, 235);
        text-shadow: 1px 1px 1px rgb(46, 187, 235);
    }

    .hoverResume:hover {
        color: rgb(107, 18, 107);
        border-top: 2px solid rgb(107, 18, 107);
        text-shadow: 1px 1px 1px rgb(107, 18, 107);
    }

    /* .node {
        background-size: cover;
        width: 105px;
    } */
}

@media (min-width: 1025px) {
    .hello {
        background-repeat: no-repeat;
        background-position: left;
    }

    .ilian {
        width: 30%;
        justify-content: center;
        border-top-right-radius: 7px;
        border-bottom-right-radius: 7px;
        padding-left: 20px;
        padding-top: 10px;
    }

    .developer {
        top: 50%;
        left: 65%;
        /* padding: 0; */
        padding-top: 5px;
        padding-bottom: 0px;
        border-radius: 7px;
        padding-left: 130px;
        padding-right: 15px;
        /* border: 3px solid rgb(255, 255, 255); */
    }
}

@media (min-width: 2000px) {

    h3,
    .ilian {
        font-size: 4em;
    }

    .ilian {
        padding-left: 40px;
    }

    .developer {
        font-size: 3.4em;
        padding-left: 170px;
        padding-right: 30px;
    }

    h3:hover,
    .ilian:hover {
        font-size: 4.2em;
    }
}