body, html {
    margin: 0;
    height: 100%;
    color:white;
    background-color: #1d1d20;
  }
  
  .parent-container {
    width: 80%;
    height: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
  
  }
  
  .nav {
    height: 30%;
  }
  
  .vertical {
    border-left: 2px solid #6E07F3;
    padding: 0 0 0 1rem;
    text-align: justify;
    color:#D8D8D8;
  }
  
  
  .main {
    height: 50%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-content: center;
  
    align-items:flex-start;
  
  }
  
  .footer {
    height: 20%;
  }
  
  .nav img{
    height:80px;
  }
  
  .nav{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  
  .navbar-links, .navbar-links-hidden{
    display: flex;
    flex-direction: row;
    list-style:none;
  }
  
  .navbar-links li, .navbar-links-hidden li{
    margin-left:1em;
  }
  
  .footer{
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
  }
  
  
  .design-links-nav, .design-links-nav-hidden{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
  
  .testi-dan{
    width:90px;
    margin-top:30px;
    border-radius: 100px;
    border: 5px solid white;
  }
  
  .more-projects-button{
    text-align:center;
    margin:10px;
    text-decoration:underline;
  }
  
  /* .main {
  scrollbar-color: #6969dd #e0e0e0;
  scrollbar-width: thin;
  } */
  
  
  ::-webkit-scrollbar {
  width: 8px;
  }
  
  
  ::-webkit-scrollbar-track {
  box-shadow: inset 0 0 2px#6E07F3;
  border-radius: 10px;
  }
  
  
  ::-webkit-scrollbar-thumb {
  background: grey;
  border-radius: 70px;
  background-image: linear-gradient(180deg, blue  , #6E07F3 );
  }
  
  
  .main{
    overflow:auto;
  }
  
  .logo:hover, .logo-nav:hover{
    transform: scale(1.2);
  }
  
  .design-links-nav a:hover, .design-links-nav-hidden a:hover{
    transform: scale(1.1);
    text-decoration:underline #6E07F3 !important;
   text-decoration-color: purple;
    color:white;
    font-weight:bold;
  }
  
  .design-links-nav a, .design-links-nav-hidden a{
    margin-bottom:5px;
  }
  
  .testimonial-div{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  
  .design-links-nav, .design-links-nav-hidden{
  
    border: 1px solid #6E07F3;
    border-width: 1px 0px 0 1px;
    border-radius: 3px;
    padding: 15px;
  
  }
  
  .design-links-nav2{
    height:25%;
    width:25%;
    border: 1px solid #6E07F3;
    border-width: 8px 0px 0 8px;
    border-radius: 3px;
    padding: 15px;
    pointer-events:none;
  }
  
  .design-links-nav3{
    height:25%;
    width:25%;
    border: 1px solid #6E07F3;
    border-width: 0px 8px 8px 0px;
    border-radius: 3px;
    padding: 15px;
    pointer-events:none;
  }
  
  .design-links-nav a, .design-links-nav-hidden a{
    padding-bottom: 0.3em!important;
    display:block;
  }
  
  .nav img{
    width:35px;
    height:35px;
  }
  
  .design-links-nav a, .design-links-nav-hidden a{
    color:white;
    text-decoration:none;
  }
  
  .logo{
    width:100px !important;
    height:100px !important;
    margin-top:-10px;
    margin-left:0.5em;
  }
  
  
  @keyframes fadeInUp {
    0% {
      transform: translateY(100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0%);
      opacity: 1;
    }
  }
  
  .header-text{
    font-size:5em;
    animation: fade-in-head 4s ease-in;
    -webkit-mask-repeat: no-repeat;
    font-family: "Arial Black", Gadget, sans-serif;
    /* text-shadow:rgb(110, 7, 243) 1px 1px 1px; */
  }
  
  .vertical p{
    animation: fade-in 0.5s ease-in;
    -webkit-mask-repeat: no-repeat;
  }
  
  
  @keyframes fade-in-head {
      0% {
        -webkit-mask-size: 0%;
        -webkit-mask-image: linear-gradient(
          to right,
          rgba(0, 0, 0, 1) 70%,
          rgba(0, 0, 0, 0)
        );
      }
      100% {
        -webkit-mask-size: 100%;
        -webkit-mask-image: linear-gradient(
          to right,
          rgba(0, 0, 0, 1) 70%,
          rgba(0, 0, 0, 0)
        );
      }
    }
  
    @keyframes fade-in {
      0% {
          -webkit-mask-size: 0% 100%;
          -webkit-mask-position: 50% 0;
          -webkit-mask-image: linear-gradient(
              to right,
              rgba(0, 0, 0, 1) 50%,
              rgba(0, 0, 0, 0)
          );
      }
      100% {
          -webkit-mask-size: 100% 100%;
          -webkit-mask-position: 0 0;
          -webkit-mask-image: linear-gradient(
              to right,
              rgba(0, 0, 0, 1) 50%,
              rgba(0, 0, 0, 0)
          );
      }
    }
  
  
  
  
  @keyframes left_to_right {
    from {
      margin-left: -50%;
    }
    to {
      margin-left: 0;
    }
  }
  
  
  .buttons-div{
  display:flex;
  }
  
  .buttons-div p{
    font-size:1.1em;
    text-underline-offset: 8px;
  }
  
  
  .buttons-div p:hover{
    font-weight: bold;
  }
  
  
  @media only screen and (max-width: 900px) {
    .main {
      flex-direction:column;
      justify-content:space-between;
      align-items:center;
    }
    .footer{
      display:none;
    }
    .main{
      overflow:visible;
    }
    .test{
      max-width:80%!important;
    }
  
    .nav{
      height:20% !important;
    }
  
    .design-links-nav-hidden{
      display:block!important;
    }
    .navbar-top{
      display:none!important;
    }
  }
  
  @media only screen and (max-width: 600px) {
    .header-text{
      font-size:4em;
    }
    .logo{
        display: none;
    }
  }
  
  @media only screen and (max-width: 860px) {
    .logo{
        margin-left:0!important;
    }
}

  @media only screen and (max-width: 500px) {
    .header-text{
      font-size:3em!important;
    }
    .design-links-nav2{
        width:34%!important;
        /* height:18px!important; */
    }
    .test{
        max-width:90%!important;
      }
      .nav{
        height:8em!important;
      }
  }
  
  .design-links-nav, .design-links-nav-hidden{
    margin-top:2em;
  }
  
  
  
  #main-text{
    font-size:0.9em;
  }
  
  
  
  
  
  .testing{
    position: fixed;
    height: 1px;
    width: 1px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    box-shadow:
    -15vw -44vh 2px 2px #fff,
    20vw -4vh 4px 0px #fff,
    -25vw -58vh 2px 2px #fff,
    -31vw 28vh 2px 4px #fff,
    -22vw -15vh 1px 3px #fff,
    12vw 15vh 2px 5px #fff,
    24vw 6vh 2px 2px #fff,
    -18vw -9vh 4px 2px #fff,
    4vw -3vh 3px 0px #fff,
    -7vw -5vh 2px 1px #fff,
    52vw 36vh 5px 2px #fff,
    -2vw -15vh 0px 2px #fff,
    -2vw -20vh 4px 3px #fff,
    52vw -25vh 5px 1px #fff,
    -11vw -18vh 0px 2px #fff,
    -5vw 21vh 0px 1px #fff,
    5vw 11vh 3px 2px #fff,
    24vw 15vh 2px #fff,
    6vw 41vh 2px 2px #fff,
    -2vw 11vh 6px 2px #fff,
    -5vw 31vh 2px 4px #fff,
    2vw 11vh 0px 1px #fff,
    -11vw 31vh 0px 1px #fff,
    -52vw 21vh 7px 1px #fff,
    22vw -25vh 3px 4px #fff,
    12vw -35vh 4px 4px #fff,
    16vw -45vh 1px 2px #fff,
    -45vw 15vh 0px 3px #fff,
    45vw -33vh 1px 2px #fff,
    -5vw -45vh 0px 1px #fff,
    3vw 43vh 2px 5px #fff,
    -45vw -15vh 4px 2px #fff,
    50vw 25vh 2px 2px #fff,
    -15vw 15vh 3px 2px #fff,
    35vw -10vh 5px 2px #fff,
    36vw -42vh 5px 2px #fff,
    30vw -20vh 5px 2px #fff,
    -22vw 11vh 4px 2px #fff;
    animation: zoom 8s alternate infinite;
  }
  
  
  @keyframes zoom {
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(1.4);
    }
  }
  
  
  .container {
    transition: all 1s;
    max-height: 300px;
  }
  
  .container.pre-animation {
    opacity:0;
    max-height: 0;
  }
  
  
  .navbar-top a{
    text-decoration:none;
    color:white;
  }
  
  .navbar-links img{
    width:35px;
    height:35px;
  }
  
  .navbar-top a:hover{
    transform: scale(1.1);
    text-decoration:underline #6E07F3 !important;
   text-decoration-color: purple;
    color:white;
    font-weight:bold;
  }
  
  
  
  
  

  .other-projects-list-of-skills div{
    width: 80px;
    color: #6E07F3;
    border: 2px solid #6E07F3;
    border-radius: 10px;
    margin: 10px;
    margin-top: 15px;
    font-family: 'Courier New', monospace;
  text-align:center;
}

.other-projects-list-of-skills{
    display: flex;
    overflow: auto;
}

.other-projects-list-of-skills div:hover{
    animation: jump-shaking 0.83s infinite;
  }

@keyframes jump-shaking {
    0% { transform: translateX(0) }
    25% { transform: translateY(-9px) }
    35% { transform: translateY(-9px) rotate(17deg) }
    55% { transform: translateY(-9px) rotate(-17deg) }
    65% { transform: translateY(-9px) rotate(17deg) }
    75% { transform: translateY(-9px) rotate(-17deg) }
    100% { transform: translateY(0) rotate(0) }
  }


  .uc{
    font-weight: bold;
    background-color: indianred;
  }

  .list-of-units{
    margin-top:10px;
  }

  ul {
  list-style-type: none;
}


/* ul li:before {
  content: '';
  display: inline-block;
  height: 10px;
  width: 10px;
  background-size: 10px;
  background-image: url("/static/images/logo2.png");
  background-repeat: no-repeat;
  margin-right: 8px;
} */


.align-center {
    align-items: center!important;
  }

.align-start{
    align-items: flex-start!important;
}

.github-link{
    color:white;
}