.list-nav {
    display: flex;
    align-items: center;
    height: 25px;
    width: 25px;
    margin-left: 30px;
    /* margin-right: 30px; */
    text-decoration: none;
}

.nav {
    display: flex;
    position: fixed;
    width: 100vw;
    background-color: #001935;
    top: 0;
    z-index: 1000;
}


.a-nav{
    height: 25px;
    width: 25px;
    text-decoration: none;
}

.about-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 70px;
    height: 50px;
   
} 

span {
   font-family: "Roboto";
   color: black;
}

.icon-links::before {
    padding-bottom: 10px;
}

.fa-linkedin {
    color: rgb(255, 73, 48);
}

.fa-github {
    color: rgb(225, 138, 0);

}


.fa-angellist {
    color: rgb(0, 207, 53);

}

.fa-file {
    color: rgb(0, 184, 255);

}


.fa-envelope {
    color: rgb(124, 92, 255);

}

.fa-phone {
    color: rgb(255, 98, 206);
}

.inside-box {
    text-align: center;
    width: 70px;
}


.a-links {
    text-decoration: none;
    /* text-align: center;
    width: 100%; */
}

.icon-links {
    text-decoration: none;
    width: 100%;
    text-align: center;   
}

.icon-links:hover {
    transform: translateY(-5px);
}

.skills-header {
    color: white;
    margin-top: 49px;
    margin-left: 84px;
    font-family: "Roboto";
    font-weight: 400;
}

.skills {
    height: 140px;
}


.nav {
    border-bottom: 2px solid rgb(38, 57, 80);
    display: flex;
    flex-direction: row; 
    justify-content: space-between;
    height: 54px;
}

.logo {
    padding-left: 35px;
    display: flex;
    align-items: center;
    /* background: linear-gradient(90deg, red 0%, orange 49%, yellow 80%, green 100%);
    background-clip: text;
    -webkit-background-clip: text; */
}


h1 {
    font-family: serif;
    color: white;
    float: left;
    margin: 0;
    font-weight: bold;
    font-size: 40px;
    width: 22.25px;
    background: linear-gradient(285deg, rgba(196,54,2,1) 9%, rgba(170,174,0,1) 34%, rgba(101,149,0,1) 51%, rgba(49,94,189,1) 69%, rgba(174,87,180,1) 88%, rgba(223,79,106,1) 98%);
    background-clip: text;
    -webkit-background-clip: text;
}



h1:hover {
    color: transparent;
    /* transition: 500ms ease;  */
    animation: slide 0.6s linear infinite;
}

@keyframes slide { 
    to {
        background-position: 22.5px;
    } 
}

.icon-nav {
    display: flex;
    /* margin-left: 30px;
    margin-right: 30px; */
    /* justify-content: space-evenly; */
    align-items: center;
    width: 14px;
    height: 25px;
    color: #f5f5f5;
    opacity: 0.5;

}

.icon-nav:active{
    color: white;
    opacity: 1;
}



.inside-nav {
    margin-top: 5px;
    float: right;
    display: flex;
    align-items: center;
    /* justify-content: space-evenly; */
    margin-right: 35px;
    /* width: 100vw; */
}

img {
    height: 64px;
    width: 64px;
}

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

.page {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 100px;
    height: 380vh
}

.right-side {
    width: 624px;
}

.left-side {
    width: 320px;
    margin-left: 3%;
}

.about-box {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 4px;
    margin-left: 20px;
    width: 540px;
    height: 104px;
}



.carousel-button{
    background: none;
    border: none;
    height: 40px;
}



.carousel {
    position: relative;
    width: 82%;
    margin: 0 auto;
    height: 80px;
    clip-path: inset( -100vw -100vw -100vw 0 );
    /* background-color: yellow; */
}

.carousel-container {
    height: 100%;
    position: relative;
    /* right: 0; */
    margin-left: 18px;
    width: 550px;
    overflow-x: hidden;
    overflow-y: hidden;
    /* direction: rtl; */

}

.first, .second, .third, .fourth{
    display: flex;
    /* justify-content: space-between; */
    height: 72px;
    width: 500px;
    margin: 0;
    /* overflow-x: hidden; */
    /* margin-left: 10px; */
}

.carousel-track {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    height: 100%;
    width: 500px;
    transition: transform 250ms ease-in;
    /* margin-left: 10px; */
}

.carousel-slide {
    position: absolute;
    top: 0; 
    bottom: 0;
    width: 500px;
    /* height: 80px; */
    /* display: flex;
    justify-content: space-evenly; */
}

.carousel-button {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    cursor: pointer;
    height: 65px;
    opacity: 0;
}

.carousel:hover > .carousel-button {
    opacity: 1;
}

/* .carousel-button:hover {
    opacity: 1;
} */

.is-hidden {
    display: none;
}

.arrow-left {
    left: -10px;
}

.arrow-right {
    right: -40px;
    /* left: -20px; */
}

.boxes {
    width: 155px;
    height: 72px;
    /* border: 1px solid white; */
    margin-left: 8px;
    object-fit: cover;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
}

.boxesz {
    width: 155px;
    height: 72px;
    /* border: 1px solid white; */
    margin-left: 8px;
    object-fit: cover;
    position: relative;
    display: flex;
    /* justify-content: flex-start; */
    text-align: center; 
    border-radius: 4px;
}

.extra-cs {
    text-align: center;
    justify-content: flex-end;
}

.extra {
    justify-content: center;
    align-items: flex-end;
}




.javascript {
    /* background-image: url("https://i.postimg.cc/6QSnkD0Y/icons8-javascript.gif"); */
    /* object-fit: contain; */
    /* background-image: url("../../icons/icons8-javascript.gif"); */
    background: rgba(0, 190, 29, 0.3);
}

.python {
    background:rgb(255, 98, 206 ,0.3)
}

.flask {
    background:rgba(250, 243, 43, 0.489)
}

.postgresql {
    background:rgba(250, 43, 95, 0.489)
}

.sqlalchemy {
    background:rgba(215, 195, 200, 0.489)
}

.express {
    background:rgba(23, 231, 193, 0.489)
}

.html {
    background:rgba(1, 177, 1, 0.5)
}

.docker {
    background:rgb(118, 68, 164, 0.7)
}

.css {
    background:rgba(205, 162, 89, 0.7)
}

.react {
    background:rgba(205, 89, 172, 0.7)
}

.heroku {
    background:rgba(132, 162, 226, 0.6)
}

.redux {
    background:rgba(226, 152, 132, 0.8)
}



.cs-img {
    margin-top: 5%;
    animation: slideback 2s backwards infinite;
    opacity: 0.6;
}

@keyframes slideback {
    from {
      transform: translateX(0%);
    }
  
    to {
      transform: translateX(-130%);
    }
  }

.fl-img {
    animation: slidein 2s forwards infinite;
    margin-top: 5%;
}




@keyframes slidein {
    from {
      transform: translateX(0%);
    }
  
    to {
      transform: translateX(130%);
    }
  }

.po {
    animation: shrink 2.5s linear infinite;
}

@keyframes shrink {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(0.4);
    }
  }

.ex {
    animation: wiggle 2s linear infinite;
}
  
  /* Keyframes */
  @keyframes wiggle {
    0%, 7% {
      transform: rotateZ(0);
    }
    15% {
      transform: rotateZ(-15deg);
    }
    20% {
      transform: rotateZ(10deg);
    }
    25% {
      transform: rotateZ(-10deg);
    }
    30% {
      transform: rotateZ(6deg);
    }
    35% {
      transform: rotateZ(-4deg);
    }
    40%, 100% {
      transform: rotateZ(0);
    }
  }

  .do {
      animation: float 3s ease-in-out infinite;
      opacity: 0.5;
      margin: 5%;
  }


  @keyframes float {
    0% {
      transform: translatey(0px);
    }
    50% {
      transform: translatey(-10px);
    }
    100% {
      transform: translatey(0px);
    }
  }

.ht-img {
      height: 40px;
      width: 40px;
      opacity: 0.5;
      animation: look-around 3.5s infinite;
  }

  
  @keyframes look-around {
    0% { transform: translate(0) }
    5% { transform: translate(50%, -25%) }
    10% { transform: translate(50%, -25%) }
    15% { transform: translate(-50%, -25%) }
    20% { transform: translate(-50%, -25%) }
    25% { transform: translate(0, 0) }
    100% { transform: translate(0, 0) }
  }

.re {
    animation: grow 2.5s linear infinite;
}

@keyframes grow {
    from {
        transform: scale(0.4);
    }
    to {
        transform: scale(1);
    }
  }


.java {
    height: 60px;
    /* background: rgba(76, 175, 80, 0.3); */
    /* width: 155px; */
    opacity: 0.5;
}


.py {
    /* border-radius: 80px; */
    height: 72px;
    width: 72px;
    opacity: 0.5;
}

.he {
    height: 35px;
    opacity: 0.5;
    margin-bottom: 30px;
    animation: to-bottom 3s linear infinite;
}

@keyframes to-bottom {
    to {
        transform: translateY(90%);
    }

    from {
        transform: translateY(0);
    }


}


.label {
    position: absolute;
    opacity: 1;
    color: white;
    font-family: "Roboto";
    font-weight: bold;
    text-align: center;
}

.fl {
    margin-left: 33%;
}

.ht {
    margin-bottom: 30px;
}

.cs {
    margin-right: 40%
}

.react-img {
    border-radius: 55px;
}

.up {
    margin-top: 5px;
}


.sql {
   height: 78px;
   width: 78x;
   margin-top: 35px;
   animation: to-top 2s linear infinite;
   opacity: 0.8;
}

@keyframes to-top {
    to {
        transform: translateY(-50%);
    }

    from {
        transform: translateY(0%);
    }


}


/* #about {
    background-image: url("../../icons/icons8-javascript.gif");
    
} */



/* .posts {
   margin-top: 100px;
} */

.webs {
    width: 320px;
    /* border: 1px solid white; */
    /* text-align: center; */
    /* display: flex;
    align-items: center;
    flex-direction: column; */

}


.webs-header {
    display: flex;
    align-items: flex-start;
}


.webs-links {
    margin-top: 4%;
    /* width: 240px; */
    /* border: 1px solid hotpink; */
    /* margin-left: 5%; */
}


.webs-icon {
    height: 37px;
    width: 37px;
    border-radius: 3px;
    margin-left: 3%;
}

.pe-div {
    height: 37px;
    width: 37px;
    background-color: beige;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    margin-left: 3%;

}

.ho-img {
    background-color: #E86652;
}

.tr {
    background-color:  #3994b7;
}

.pe {
    height: 30px;
    width: 30px;
}

.space {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 59px;
    /* margin-left: 5%; */
}

 .webs-title {
    margin-top: 0;
    margin-left: 12px; 
    margin-bottom: 16px;
    color: white;
    font-weight: 700;
    font-size: 14px;
    font-family: "Roboto";

} 

.space:hover{
    background-color: #253d57;
}

/* .outside-dropdown {
    position: relative;
} */

.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 0.7rem);
    background-color: #f5f5f5;
    width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    height: 320px;
    width: 280px;
    border-radius: 2.5px;
    margin-left: -34px;
    opacity: 0;
    visibility: hidden; 
    max-height:0px;
    overflow:hidden;
    transition:0.4s;
    /* display: flex;
    justify-content: center; */
    /* animation: growDown 2s ease-in-out forwards;
    transform-origin: top center; */
    /* animation-delay: 2s; */

}



    /* @keyframes growDown {
        0% {
          transform: scaleY(0)
        }
        100% {
          transform: scaleY(1)
        }
      } */





.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    max-height: 320px;
    /* animation: growDown 2s ease-in-out forwards;
    transform-origin: top center;
    animation-delay: 2s; */
    transition-delay: 0.6s;
    /* animation-delay: 2s; */

}

.menu-pic {
    height: 148px;
    width: 280px;
    /* margin-left: 2%;
    margin-top: 2%; */
    /* object-fit: contains; */
}



.webs-des {
    color: black;
    font-family: "Roboto";
    width: 260px;
    margin-left: 3.5%;
    font-size: 14px;
    margin-top: 12%;
    height: 80px;
    /* border: 1px solid black; */
    overflow: hidden;
    /* border: 1px solid black; */
}

.webs-des:hover {
    overflow: auto;
}

.radar-header{
    margin-top: 27%;
    height: 32px;
    border-bottom: 2px solid rgb(38, 57, 80);
    width:320px;
    margin-bottom:10px;
}
.me-container {
    display: flex;
    justify-content: center;

}

.post {
    width: 300px;
    background: #f5f5f5;
    height: 530px;
    border-radius: 3px;

}

.me-post {
    height: 392px;
    width: 300px;
}

.me-des{
    font-family: "Roboto";
    font-size: 14px;
    font-weight: 500;
    height: 80px;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-top: 3em;
    height: 5em;
    margin-left: 8em; */
}

.me-header {
    margin-top: 3%;
    display: flex;
    /* margin-left: 3%; */
    height: 40px;
    width: 300px;
    border-bottom: 1px solid #d3d3d3;

}

.post-container {
    width: 624px;
    height: 1000px;
    display: flex;
    /* border: 1px solid white; */
    border-radius: 3px;
}

.post-contact {
    width: 624px;
    height: 430px;
    display: flex;
    /* border: 1px solid white; */
    border-radius: 3px;

}

.post-about {
    width: 540px;
    margin-left: 1.2em;
    border-radius: 3px;
    background: white;
}

.username {
    margin-left: 15px;
    margin-bottom: 0; 
    margin-top: 15px; 
    font-family: "Roboto"; 
    font-size: 14px; 
    font-weight: 500;
    width: 20em;
    margin-bottom: 15px;
}

.user-border {
    border-bottom: 1px solid #d3d3d3;
}

.about-me-pic {
    width: 540px;
    height: 400px;
    object-fit: contain;
}

.about-text {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.port-post {
    display:flex;
    flex-direction: column;
    overflow:hidden;
    /* background: #9bb4cf; */
    /* height: 600px; */
    /* margin-left: 2.5em; */
    /* width: 459px; */
    /* border: 1px solid pink; */

}

.port-webs {
    display:flex;
    flex-direction: row;
    /* margin-left: 1em; */
    margin-top: 3em;
    /* margin-left: 6em; */
    /* justify-content: center; */
    /* margin-left: 1em; */
    /* width: 459px; */
    /* width: 600px; */
} 

.post-portfolio {
    width: 624px;
    /* height: 800px; */
    display: flex;
    /* border: 1px solid white; */
    border-radius: 3px;
}

.post-contact {
    width: 624px;
}

/* .port-text {

} */

.web-post-pic {
    height: 132px;
    width: 219px;
    margin-top: 1em;
    /* margin-right: 5em; */
}

.post-webs-des {
    height: 111px;
    overflow: hidden;
}

.post-webs-des:hover {
    overflow: auto;

}

.port-text {
    width: 15em;
    /* width: 500px; */
    /* margin-left: 1em; */
}

.text-right {
    margin-left: 1em;

}

.text-left {
    margin-right: 1em;
    margin-left: 2.9em;
}

.post-webs-title {
    margin-top: 0.7em;
    margin-bottom: 0;
    font-family: "Roboto";
    color:white;
}

.post-webs-des {
    margin-top: 0.5em;
    font-family: "Roboto";
    color:white;
}

.hub {
    background-color: #e7adc2;
    /* margin-left: 1em; */
}

.stuff {
    background-color: #e7b6ad;
}

.bu {
    background-color: #74acc2;
}

.son {
    margin-bottom: 2.7em;
    background-color: #e5bc93;
}

/* .right-slide {
    margin-left: 2.9em;
} */

.reveal {
    position: relative;
    opacity: 0;
  }
  
.reveal.active {
    opacity: 1;
}

.active.fade-right {
    animation: fade-right 1s ease-in;
  }

  .active.fade-left {
    animation: fade-left 1s ease-in;
  }

  @keyframes fade-left {
    0% {
      transform: translateX(-100px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  


  @keyframes fade-right {
    0% {
      transform: translateX(100px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }


.info-box {
    display: flex;
}

.email-top {
    margin-top: 2em;
}

.email-text {
    margin-left: 2em;
}

.office-phone {
    animation: wiggle 2s linear infinite;
}
  
  /* Keyframes */
  @keyframes wiggle {
    0%, 7% {
      transform: rotateZ(0);
    }
    15% {
      transform: rotateZ(-15deg);
    }
    20% {
      transform: rotateZ(10deg);
    }
    25% {
      transform: rotateZ(-10deg);
    }
    30% {
      transform: rotateZ(6deg);
    }
    35% {
      transform: rotateZ(-4deg);
    }
    40%, 100% {
      transform: rotateZ(0);
    }
  }

.info-icon {
    height: 80px;
    width: 80px;
}

.mailbox {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0% {
      transform: translatey(0px);
    }
    50% {
      transform: translatey(-10px);
    }
    100% {
      transform: translatey(0px);
    }
  }

body {
    background-color: #001935;
    margin: 0;
}



p, h4, h2 {
    font-family: "Roboto";
}

h3 {
    /* font-family: "favorit", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif; */
    font-family:  "Roboto";
    color: white;
}

.info-header {
    margin-bottom: 0.3em;
}

.info-p {
    margin-top: 0;
}

.contact-info-box {
    background-color: #9e78f1;
}

.contact-text {
    height: 200px;
}

.about-p {
    margin-top: 0; 
    font-size: 14px;
    width: 450px;
    color: #808080;
}

.me {
    position: sticky;
    object-fit: contain;
    top: 64px;;
}

a, a:hover, a:focus, a:active {
    color: inherit;
    text-decoration: none;
}

html {
    scroll-behavior: smooth;
  }



.random {
    /* height:400px; */
    margin-top: 300px;
}

.web-link {
    display: flex;
}

/* p {
    font-family: Arial, Helvetica, sans-serif;
} */