body {
    width: 100%;
    height: 100%;
    margin: 0;
    position: absolute;
    overflow-x: hidden;
    overflow-y: hidden;
    background: #11e8bb; /* Old browsers */
    background: -moz-linear-gradient(top, #00ff21%, #0074c9 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #00ff21 0%,#0074c9 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #00ff21 0%,#0074c9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#11e8bb', endColorstr='#0074c9',GradientType=0 ); /* IE6-9 */
}

.navbar {
    width:auto;
    letter-spacing:-1px;
    margin-left:25px;
    min-height: 50px;
    margin-bottom: 20px;
    position: fixed;
    padding-left: 10px;
    padding-bottom: 5px;
    color: white;
    z-index: 2;
    font-family: 'Raleway', sans-serif;
}

    .navbar a {
        color: black;
        font-family: 'Raleway', sans-serif;
        text-decoration: none;
        font-size: 19px;
    }





.linkContainer {
    width: auto;
    height: auto;
    margin-left: 20px;
}
.techieStuff {
    position: absolute;
    right: 20%;
}
    .techieStuff:hover {
        animation: glitch1 0.5s infinite;
    }
    .techieStuff a {
        font-size: 30px;
    }

    .links{
        text-decoration:none;
        color:white;
    }
.showLinks {
    text-decoration: none;
    color: white;
}

@keyframes glitch1 {
  0% {
    transform: none;
    opacity: 1;
  }
  7% {
    transform: skew(-0.5deg, -0.9deg);
    opacity: 0.75;
  }
    10% {
        transform: translate(-2px, -3px);
        opacity: 0.5;
    }
    27% {
        transform: none;
        opacity: 0.1;
    }
  30% {
    transform: skew(0.8deg, -0.4deg);
    opacity: 0;
  }
  35% {
    transform: none;
    opacity: 1;
  }
    52% {
        transform: translate(-5px, -4px);
        opacity: 0.5;
        color: black;
        transform: skew(0.8deg, -0.4deg);
    }
  55% {
    transform: skew(-1deg, 0.2deg);
    opacity: 0.75;
  }
    50% {
        transform: translate(-15px, -1px);
        opacity: 0.2;
        color: black;
    }
    51% {
        transform: translate(20px, 3px);
        opacity: 1;
        color: black;
    }
    72% {
        transform: skew(1deg, 1deg);
        opacity: 0.75;
        color:darkslategrey;
    }
  75% {
    transform: skew(0.4deg, 1deg);
    opacity: 0.75;
  }
    80% {
        transform: translate(15px, -1px);
        opacity: 0.3;
    }
  100% {
    transform: none;
    opacity: 1;
  }
}


.noise {
    opacity: 0.1;
    z-index: 1;
    position: fixed;
}

@keyframes show{
    0%{
        height:0;
    }
    90%{
        height:50%;
    }
    100% {
        height: 45%;
    }
 }

.work {
    visibility: hidden;
    height: 100%;
    width: 0%;
    position:absolute;
}
.showWork {
    animation: show 1s ease-in;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    bottom: 0px;
    position: fixed;
    overflow-x: scroll;
    visibility: visible;
    font-family: 'Raleway', sans-serif;
    padding-left: 15px;
    word-spacing: 2px;
    font-size: 18px;
    padding-bottom: 5px;
    color: white;
    background-color: #404040;
    width: 100%;
    z-index: 2;
    height:45%;
}
.workPreview{
    display:inline-block;
    height:280px;
    z-index:2;
    width:550px;
    border: 5px dashed white;
    margin-right:10px;
}
.showConnect {
    animation: showConnect 1s ease-in;
    bottom: 0;
    position: fixed;
    z-index: 2;
    visibility: visible;
    font-family: 'Raleway', sans-serif;
    padding-left: 15px;
    padding-bottom: 30px;
    color: white;
    background-color: #404040;
    width: 100%;
    height: 17%;
}

@keyframes showConnect{
    0%{
        height:0;
    }
    90%{
        height:20%;
    }
    100% {
        height:17%;
    }
}

.connectIcon{
    width:50px;
    margin-right:15px;
}

.profilePhoto {
    z-index: 2;
    border-radius: 100px;
    width:170px;
    border: dashed 2px white;
}

.showAbout {
    animation: showAbout 1.2s ease-in;
    bottom: 0;
    position: fixed;
    z-index: 2;
    visibility: visible;
    font-family: 'Raleway', sans-serif;
    padding-left: 15px;
    padding-bottom: 5px;
    color: white;
    background-color: #404040;
    width: 100%;
    height: 60%;
}

@keyframes showAbout{
    0%{
        height:0;
    }
    90% {
        height: 65%;
    }
    100%{
        height:60%;
    }
}

.showHobbies {
    animation: showHobbies 1s ease-in;
    bottom: 0;
    position: fixed;
    z-index: 2;
    visibility: visible;
    font-family: 'Raleway', sans-serif;
    padding-left: 15px;
    padding-bottom: 5px;
    color: white;
    background-color: #404040;
    width: 100%;
    height:45%;
}

@keyframes showHobbies{
    0%{
        height:0%;
    }
    90% {
        height: 50%;
    }

    100% {
        height: 45%;
    }
}

    .showHobbies p {
        font-family: 'Raleway', sans-serif;
        
    }
    .showHobbies a{
        text-decoration:none;
        color:cornflowerblue;

    }

.showTechieStuff {
    top: 0;
    animation: showTechie 1.5s normal;
    right: 0;
    position: fixed;
    z-index: 2;
    visibility: visible;
    font-family: 'Raleway', sans-serif;
    padding-left: 15px;
    padding-bottom: 5px;
    color: white;
    background-image: linear-gradient(#525151, #252525);
    height: 100%;
    width: 30%;
}

@keyframes showTechie{
    0%{
        height:0;
    }
    70%{
        height:90%;
    }
    80%{
        height:80%;
    }
    100%{
        height:100%;
    }
}

    .showTechieStuff h2 {
        color: white;
        text-shadow:2px 2px 2px black;
        font-size: 25px;
        padding-left: 40%;
    }
    .showTechieStuff a {
        font-size:20px;
        color: white;
        text-decoration: none;
        transition: all .2s ease-out;
    }
    .showTechieStuff a:hover{
        border-bottom: 4px solid #0066FF;
    }

    .rightContainer {
        position: absolute;
        margin-left: 100px;
        display: inline-block;
    }

.leftContainer {
    display: inline-block;
    margin-right: 10px;
}
.rightContainerContact {
    position: unset;
    margin-left: 200px;
    display: inline-block;

}


@media screen and (max-width:900px) {
    .rightContainerContact {
        margin-left: 0;
    }
    .aboutList {
    font-size: 15px;
    }

    .rightContainer {
       font-size:15px;
        margin-top:0;
        margin-left:0px;
        width:100%;
        height:500px;
    }

    .leftContainer {
        margin-right: 2px;
        width:100%;
    }

    body {
        overflow-x: hidden;
        height: 100%;
        position: fixed;
    }

    .noise {
        height: 100%;
    }

    .showTechieStuff {
        width: 100%;
        bottom: -100;
        top: auto;
        right: auto;
        height: 40%;
    }


    @keyframes showTechie {
        0% {
            height: 0;
        }  

        80% {
            height: 45%;
        }

        100% {
            height: 40%;
        }
    }

    .navbar {
        width: auto;
        font-size: 30px;
    }

        .navbar a {
            font-size: 25px;
        }

    .showAbout {
        font-size:10px;
        height: 50%;
       
        overflow-y: auto;
    }

    .showWork {
        height: 50%;
    }

    .profilePhoto{
        width:150px;
    }



    .workPreview {
        display: inline-block;
        height: 250px;
        z-index: 2;
        width: 450px;
        border: 2px dashed white;
        margin-right: 15px;
    }


    .showWork {
        animation: show 1s ease-in;
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
        bottom: 0px;
        position: fixed;
        overflow-x: scroll;
        visibility: visible;
        font-family: 'Raleway', sans-serif;
        padding-left: 15px;
        word-spacing: 2px;
        font-size: 18px;
        color: white;
        background-color: #404040;
        width: 100%;
        z-index: 2;
        height: 45%;
    }
    .chart {
    height:15%;
    }

    .showConnect {
        animation: showConnect 1s ease-in;
        bottom: 0;
        position: fixed;
        z-index: 2;
        visibility: visible;
        font-family: 'Raleway', sans-serif;
        padding-left: 15px;
        color: white;
        background-color: #404040;
        width: 100%;
        height: 25%;
    }
    @keyframes showConnect {
        0% {
            height: 0%;
        }

        90% {
            height: 27%;
        }

        100% {
            height: 25%;
        }
    }


    .showHobbies {
        animation: showHobbies 1s ease-in;
        bottom: 0;
        position: fixed;
        z-index: 2;
        visibility: visible;
        font-family: 'Raleway', sans-serif;
        padding-left: 15px;
        padding-bottom: 15px;
        color: white;
        background-color: #404040;
        width: 100%;
        height: 45%;
    }
    
}