*, :after, :before {
    box-sizing: border-box;
    border:0px solid #3fffff
}

body {
    color: #d1d1d1;
    background: #071c21;
    font-family: 'Montserrat';
    line-height: 1.6;
    margin:0;
}

a {
    color: inherit; /* blue colors for links too */
    text-decoration: inherit; /* no underline */
  }

p {
        font-size: 1rem;
        margin-bottom: 1rem;
}

ul {
    list-style:none;
    margin:0;
    padding:0;
}

.container {
    padding-top:3rem;
    padding-bottom:3rem;
    padding-left:1rem;
    padding-right:1rem;
    max-width:1280px;
    margin-left:auto;
    margin-right:auto;
}

@media(min-width: 1024px) {
    .container {
        padding-top:0;
        padding-bottom:0;
        padding-left: 6rem;
        padding-right: 6rem;
    }
}

@media(min-width: 1024px) {
.content-gap {
    display:flex;
    justify-content: space-between;
    gap: 1rem;

} 
}
@media(min-width: 1024px) { 
    .personal-info-card {
        width: 50%;
        height:100vh;
        padding-top: 6rem;
        padding-bottom: 6rem;
        display:flex;
        flex-direction:column;
        justify-content: space-between;
        top:0;
        position:sticky;
    }
}

@media(min-width: 1024px) { 
    .scrollable-info-card {
        width: 50%;
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}
.scrollable-info-card {
    padding-top: 6rem;
}

.name-text {
    opacity: 1;
    transform:none;
    font-size: 2.275em;
    margin: 2rem 0rem 1.5rem;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 9.9px;
}

.name-text::before {
    left: 2px;
    text-shadow: rgb(0, 255, 255) -1px 0px;
    animation: 4s linear 0s 1 alternate-reverse none running noise-anim-2;
    content: attr(data-text);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.name-text::after {
    left: -2px;
    text-shadow: rgb(255, 105, 180) 3px 0px;
    animation: 2s linear 0s 2 alternate-reverse none running noise-anim;
    content: attr(data-text);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.name {
    color: inherit;
    padding: 0px;
    background: none 0px 80% / 100% 0.3em no-repeat;
    position: relative;
}

.social-media {
    display:flex;
    align-items:center;

}

.social-media-item {
    margin-right: 1.25rem;
    
}

.svg-color {
    fill:#d1d1d1;
}

.nav-bar {
    margin-top: 4rem;
    display:flex;
    flex-direction:column;
}

.nav-text {
    font-weight: 800;
    
}

.nav-item {
    color:#585858;
    display:flex;
    padding-top: .75rem;
    padding-bottom: .75rem;
}

.flex {
    display:flex;
}

.active {
    color:#d1d1d1
}
@media(min-width: 1024px) {
    .sections {
        scroll-margin-top: 6rem;
        margin-bottom: 9rem;
    }
}

.experience-item{
    display:flex;
    margin-bottom: 3rem;
    gap:1rem;
}

.experience-time-frame {
    width:25%;
    font-size: .75rem;
}

.experience-content {
    width:75%;
}

.title {
    font-weight: 800;
}

.content {
    margin-top:0px;
}

.languages{
    display:flex;
    gap:1rem;
}

.language{
    color:rgb(7, 28, 33);
    font-weight: 700;
    padding-top: .25rem;
    padding-bottom: .25rem;
    padding-left: .75rem;
    padding-right: .75rem;
    font-size: .8rem;
    background:rgb(110, 171, 218);
    border-radius:9999px;
}

.projects-image{
  max-width:25%;
  margin-top:auto;
  margin-bottom: auto;
}

.project-img{
  max-width: 100%;
  max-height: 100%;
}

@keyframes noise-anim {
    0% {
        opacity: 1;
      clip-path: inset(29% 0 25% 0);
    }
    5% {
      clip-path: inset(9% 0 38% 0);
    }
    10% {
      clip-path: inset(96% 0 1% 0);
    }
    15% {
      clip-path: inset(75% 0 23% 0);
    }
    20% {
      clip-path: inset(46% 0 50% 0);
    }
    25% {
      clip-path: inset(3% 0 46% 0);
    }
    30% {
      clip-path: inset(82% 0 2% 0);
    }
    35% {
      clip-path: inset(88% 0 1% 0);
    }
    40% {
      clip-path: inset(91% 0 8% 0);
    }
    45% {
      clip-path: inset(96% 0 2% 0);
    }
    50% {
      clip-path: inset(59% 0 38% 0);
    }
    55% {
      clip-path: inset(41% 0 53% 0);
    }
    60% {
      clip-path: inset(21% 0 47% 0);
    }
    65% {
      clip-path: inset(89% 0 4% 0);
    }
    70% {
      clip-path: inset(1% 0 95% 0);
    }
    75% {
      clip-path: inset(86% 0 4% 0);
    }
    80% {
      clip-path: inset(95% 0 5% 0);
    }
    85% {
      clip-path: inset(54% 0 36% 0);
    }
    90% {
      clip-path: inset(70% 0 27% 0);
    }
    95% {
      clip-path: inset(6% 0 16% 0);
    }
    100% {
        opacity: 1;
      clip-path: inset(95% 0 2% 0);
    }
  }
  @keyframes noise-anim-2 {
    0% {
        opacity: 1;
      clip-path: inset(76% 0 21% 0);
    }
    5% {
      clip-path: inset(54% 0 7% 0);
    }
    10% {
      clip-path: inset(55% 0 29% 0);
    }
    15% {
      clip-path: inset(89% 0 3% 0);
    }
    20% {
      clip-path: inset(33% 0 40% 0);
    }
    25% {
      clip-path: inset(17% 0 56% 0);
    }
    30% {
      clip-path: inset(37% 0 51% 0);
    }
    35% {
      clip-path: inset(38% 0 19% 0);
    }
    40% {
      clip-path: inset(93% 0 4% 0);
    }
    45% {
      clip-path: inset(44% 0 14% 0);
    }
    50% {
      clip-path: inset(53% 0 26% 0);
    }
    55% {
      clip-path: inset(67% 0 11% 0);
    }
    60% {
      clip-path: inset(85% 0 13% 0);
    }
    65% {
      clip-path: inset(27% 0 37% 0);
    }
    70% {
      clip-path: inset(87% 0 4% 0);
    }
    75% {
      clip-path: inset(10% 0 8% 0);
    }
    80% {
      clip-path: inset(51% 0 27% 0);
    }
    85% {
      clip-path: inset(10% 0 60% 0);
    }
    90% {
      clip-path: inset(83% 0 3% 0);
    }
    95% {
      clip-path: inset(23% 0 55% 0);
    }
    100% {
        opacity: 1;
      clip-path: inset(1% 0 81% 0);
    }
  }