/* @keyframes move {
    25% {
      transform: translatey(-5rem);
      opacity: 1;
    }
    50% {
      transform: translatey(-10rem);
    }
    75% {
      transform: translatey(-15rem);
    }
  } */
:root {
    --mode-color: #fff;
    --image-invert: 1;
}
@keyframes float-in {
    to {
      opacity: 1;
      transform: translateY(0);
    }
}
@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes blink {
    0% {
        background-color: #26A641;
    }
    50% {
        background-color: #26a64231;
        border: 0.5px solid #43d55ba8;
    }
    100% {
        background-color: #26A641;
    }
}

/* @keyframes blink-caret {
    from, to {
        border-color: transparent;
    }
    50% {
        border-color: black;
    }
} */
/* 
@keyframes changeBackground {
    0% {background: radial-gradient(circle at 25% 68.8%, rgb(50, 50, 50) 0%, rgb(0, 0, 0) 99.4%);}
    10% {background: radial-gradient(circle at 30% 68.8%, rgb(50, 50, 50) 0%, rgb(0, 0, 0) 99.4%);}
    20% {background: radial-gradient(circle at 35% 68.8%, rgb(50, 50, 50) 0%, rgb(0, 0, 0) 99.4%);}
    30% {background: radial-gradient(circle at 40% 68.8%, rgb(50, 50, 50) 0%, rgb(0, 0, 0) 99.4%);}
    40% {background: radial-gradient(circle at 45% 68.8%, rgb(50, 50, 50) 0%, rgb(0, 0, 0) 99.4%);}
    50% {background: radial-gradient(circle at 50% 68.8%, rgb(50, 50, 50) 0%, rgb(0, 0, 0) 99.4%);}
    60% {background: radial-gradient(circle at 55% 68.8%, rgb(50, 50, 50) 0%, rgb(0, 0, 0) 99.4%);}
    70% {background: radial-gradient(circle at 60% 68.8%, rgb(50, 50, 50) 0%, rgb(0, 0, 0) 99.4%);}
    80% {background: radial-gradient(circle at 65% 68.8%, rgb(50, 50, 50) 0%, rgb(0, 0, 0) 99.4%);}
    90% {background: radial-gradient(circle at 70% 68.8%, rgb(50, 50, 50) 0%, rgb(0, 0, 0) 99.4%);}
    100% {background: radial-gradient(circle at 75% 68.8%, rgb(50, 50, 50) 0%, rgb(0, 0, 0) 99.4%);}
} */

body {
    font-family: 'Inconsolata', monospace;
    /* background: white; */
    background: #1B1F23;
    margin: 0;
    padding: 0;
    color: #000;
    /* min-height: fit-content; */
    /* overflow-x: hidden; */
    height: 100%;
    min-height: 100vh;
    max-width: 100vw;
}
p{
    margin: 0;
}
a, a:visited, a:focus, a:active{
    color: #000;
}
.header{
    display: flex;
    max-width: 100vw;
    justify-content: space-between;
    /* background-color: #FAFAFC; */
    background-color: #000;
    /* border-radius: 20px; */
    /* margin: 0 auto; */
    padding: 10px 4rem;
    padding-bottom: 20px;
}
.navbar {
    /* max-width: 100%; */
    /* background: rgba(255, 255, 255, 0.9); */
    margin: 0px;
    padding: 20px;
    padding-bottom: 10px;
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
}

.floating-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40px;
    transition: transform 0.1s ease-in-out;
}

.fixed{
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 20px;
    left: 50%;
    /* margin: 0 auto; */
    padding: 10px 10px;
    transform: translateX(-50%);
    /* gap: 20px; */
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    border: 0.5px solid rgba(255, 255, 255, 0.5);
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    z-index: 1000;
}

.scroll-top {
    /* background: rgba(255, 255, 255, 0.3); */
    background-color: #007FFF;
    /* backdrop-filter: blur(10px); */
    padding: 10px 10px;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    border: none;
    cursor: pointer;
    margin-left: 10px;
    /* border: 0.5px solid rgba(255, 255, 255, 0.5); */
}
.scroll-top:hover {
    /* background-color: rgba(0, 0, 0, 0.1); */
    background-color: rgb(7, 106, 206);
    /* background-color: rgba(0, 128, 255, 0.8); */
}
.up-icon {
    width: 100%;
    /* opacity: 0.8; */
    filter: invert(1);
    /* padding: 2px; */
}

.nav-links a,.floating-nav a {
    margin: 0 10px;
    text-decoration: none;
    padding-bottom: 5px;
    /* color: #000; */
    font-size: 11pt;
    color: var(--mode-color);
}

.nav-icon{
    width: 20px;
    opacity: 1;
    filter: invert(var(--image-invert));
}

/* .nav-links a:hover,
.nav-links .nav-link:focus, */
.floating-nav a:hover {
    border-bottom: 1px solid var(--mode-color);
}
.floating-nav .selected {
    border-bottom: 1px solid var(--mode-color);
}

.logo{
    width: 80px;
    height: 80px;
    object-fit: cover;
}
.brand{
    display: flex;
    align-items: center;
}
.brand-logo{
    width: 30%;
    padding: 0px;
}
.brand-text {
    display: flex;
    flex-direction: column;
    font-family: "Beth Ellen", cursive;
    /* font-family: "Prata", serif; */
    /* font-family: "Outfit", sans-serif; */
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 19pt;
}
a.brand-link{
    text-decoration: none;
    color: #fff;
}

span.lightest{
    font-weight: 100;
    /* -webkit-text-stroke-width: 0.1px; */
}
span.lighter{
    font-weight: 300;
    /* -webkit-text-stroke-width: 0.5px; */
}
span.normal{
    font-weight: 300;
    /* -webkit-text-stroke-width: 1px; */
    /* filter: blur(0.3pt); */
}
span.bold{
    font-weight: 500;
    /* -webkit-text-stroke-width: 1.5px; */
    /* filter: blur(0.5pt); */
}
span.bolder{
    font-weight: 500;
    /* -webkit-text-stroke-width: 1.8px; */
    /* filter: blur(0.8pt); */
}

.brand-line2{
    font-family: 'Inconsolata', monospace;
    font-weight: 600;
    font-size: 10.7pt;
}

/* .string {
    display: flex;
    flex-direction: column;
    text-align: center;
    animation: move 4s infinite;
} */
  
/* .desc {
    position: relative;
    top: 8rem;
    animation: white-out 5s infinite;
} */

.ribbon{
    display: none;
    width: 100%;
    padding: 0.5px;
    margin-top: 5px;
    /* background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); */
    background-color: #ccc;
}
/* .first{
    background: linear-gradient(to left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 1) 25%,rgba(0, 0, 0, 0) 100%);
}
.second{
    background: linear-gradient(to left, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 1) 50%,rgba(0, 0, 0, 0) 100%);
} */

.filters {
    background-color: #2e353b;
    display: flex;
    /* margin-top: 10px; */
    padding: 15px 4rem;
    /* border-radius: 20px; */
    justify-content: flex-end;
    gap: 10px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
    /* background-color: #eeeeee; */
    display: none;
}
.filter{
    width: auto;
}
span.label{
    font-size: 10pt;
    margin-left: 10px;
    color: #ffffff;
}
.switch {
    position: relative;
    display: inline-block;
    width: 40px; /* Reduced width */
    height: 20px; /* Reduced height */
}
  
.switch-input {
    opacity: 0;
    width: 0;
    height: 0;
}
  
.switch-label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 20px; /* Adjusted for reduced size */
    cursor: pointer;
    transition: background-color 0.2s;
}
  
.switch-label::before {
    content: "";
    position: absolute;
    height: 16px; /* Reduced size */
    width: 16px; /* Reduced size */
    left: 2px; /* Adjusted for reduced size */
    bottom: 2px; /* Adjusted for reduced size */
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
  
.switch-input:checked + .switch-label {
    background-color: #43cc5a;
}
  
.switch-input:checked + .switch-label::before {
    transform: translateX(20px); /* Adjusted for reduced size */
}
h1.intro{
    /* font-family: "Poppins", sans-serif; */
    max-width: 1000px;
    color: #fff;
    /* font-family: "Inter", sans-serif; */
    /* font-family: "Outfit", sans-serif; */
    font-family: "Prata", serif;
    font-weight: 800;
    font-size: 48pt;
    border-top: 4px solid;
    border-image: linear-gradient(to right, #ffffff 5%, transparent 5%) 100% 1;
    margin: 0;
    margin-top: 20px;
    opacity: 0;
    transform: translateY(30px);
    animation: float-in 0.8s forwards;
    
}
h1.colored-bg{
    font-weight: 800;
    /* color: #fff; */
    /* color: #000; */
    margin-top: 0px;
    border-top: 4px solid;
    /* border-image: linear-gradient(to right, #000 5%, transparent 5%) 100% 1; */
}
div.colored-bg{
    display: flex;
    justify-content:flex-start;
    align-items: center;
    padding: 30px 4rem;
    margin-top: 10px;
    gap: 10px;
    /* background: #fc5c7d; */
    /* background-color: #FAFAFC; */
    /* background-color: rgba(0, 0, 0, 0.795); */
    /* background: radial-gradient(circle at 24.1% 68.8%, rgb(30, 30, 30) 0%, rgb(0, 0, 0) 99.4%); */
    /* animation: changeBackground 30s ease infinite; */
}
span.color1{
    /* font-family: "Prata"; */
    /* line-height: 1.5; */
    border-radius: 5px;
    /* background-color: rgb(231, 75, 75); */
    /* color: rgb(231, 75, 75); */
    /* padding: 2px 5px; */
}

span.color2{
    /* font-family: "Prata"; */
    /* line-height: 1.5; */
    border-radius: 20rem;
    /* background-color: rgb(231, 228, 75); */
    /* color: #2658c5; */
    /* padding: 2px 10px; */
}

img.colored-bg{
    margin-bottom: 10px;
    height: 40px;
    filter: invert(0.5);
    align-self: flex-end;
    opacity: 0;
    transform: translateY(30px);
    animation: float-in 1.8s forwards;
    /* align: right; */
}

.loading-spinner {
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top: 4px solid #c7c7c7;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: auto;
    display: block;
  }


.container {
    width: 90%;
    margin: 0 auto;
    padding: 10px;
    /* background: white; */
    /* margin-top: 30px; */
}
.section {
    display: none;
    margin: 20px 0;
}
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: auto;
    grid-auto-flow: dense;
    gap: 20px;
}
.portfolio-item {
    max-height: 320px;
    max-width: 660px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.219);
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
    animation: float-in 1s forwards;
}
.portfolio-item img {
    width: 100%;
    height: 100%;
    transition: all 0.3s;
    object-fit: cover;
    transition: transform 0.3s;
    /* background-color: #000; */
}

.portfolio-item:hover img {
    transform: scale(1.02);
}

.wide-image {
    grid-row: span 2 / auto;
}
.tall-image {
    grid-column: span 2 / auto;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    opacity: 0;
    transition: all 0.3s;
    text-align: center;
}
.portfolio-tag{
    /* display: none; */
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 12px;
    font-size: 10pt;
    max-width:fit-content;
    /* background-color: #cc531c; */
    /* background-color: rgba(230, 230, 230, 0.288); */
    background-color: rgb(204, 83, 28);
    color: rgb(255, 255, 255);
    /* backdrop-filter: blur(5px); */
    /* border: 1px solid #ff9463; */
    /* border: 1px solid rgb(253, 137, 83); */
    border-radius: 10px;
    transition: all 100ms ease-in-out;
}
.portfolio-tag:hover{
    cursor: pointer;
    /* border: 1px solid #cc531c; */
    /* background-color: rgb(58, 58, 58); */
    text-decoration: underline;
}
.ai{
    background-color: #ff00aa;
}
.tech{
    background-color: #007FFF;
}
.travel{
    background-color: #943ec5;
}
.build{
    background-color: #a71f35;
}
.portfolio-item:hover .overlay {
    opacity: 1;
    backdrop-filter: blur(5px);
}
h1.portfolio-item-heading {
    padding: 20px;
    font-size: 12pt;
    margin: 0px;
    font-weight: 500;
}
p.portfolio-item-description {
    padding: 0px 20px;
    font-size: 10pt;
}
.footer{
    position: fixed;
    max-width: 100vw;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* position: absolute; */
    /* width: 100%; */
    /* max-width: 100%; */
    background-color: #000;
    color: #fff;
    padding: 5px 10px;
    font-size: 10pt;
    font-weight: 100;
    /* margin-right: 20px; */
    /* text-align: right; */
}
.footer-image{
    width: 20px;
}
/* .footer-note {
    margin: 0px 20px;
} */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    justify-content: center;
    align-items: flex-start;
    overflow: auto;
    animation: fade-in 350ms;
}
.modal-content {
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 40px;
    top: 40px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
    /* top: auto;
    left: auto;
    position: fixed; */
    position: relative;
    max-width: 70%;
    max-height: fit-content;
    border-radius: 20px;
    /* align-items: center; */
    /* justify-content: center; */
    /* justify-self: center;
    align-self: center; */
}
h2.modal-header {
    font-family: "Inter", sans-serif;
    font-size: 20pt;
    margin: 10px 0px 30px 0px;
}
h3.modal-sub-header{
    display: none;
    font-family: "Inter", sans-serif;
    font-size: 15pt;
    margin: 20px 0px 10px 0px;
}
.modal-content-body{
    display: flex;
    /* border: 1px solid black; */
    background-color: #F5F5F7;
    border-radius: 10px;
    padding: 20px;
}
.modal-code{
    display: none;
    position: relative;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    /* top: 20px; */
    max-width: 100%;
    height: 400px;
    border: none;
    overflow: hidden;
    background-color: #F5F5F7;
    border-radius: 10px;
    padding: 20px;
}
.modal-content img{
    max-width: 50%;
    /* max-height: 25%; */
    max-height: 500px;
    object-fit: cover;
    /* padding: 20px; */
    background-color: #F5F5F7;
    border-radius: 10px;
}
.modal-video-container {
    position: relative;
    /* max-width: 50%; */
    /* max-height: 25%; */
    object-fit: cover;
    border-radius: 10px;
    overflow: hidden;
}

.modal-video {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 12px;
    object-fit: cover;
}

.modal-video-controls {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 200ms ease-in-out;
}

.modal-video-play-pause {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background-image: url('images/playbutton.png');
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-video-play-pause.playing {
    background-image: url('images/pausebutton.png');
}

.modal-video-volume-container {
    display: flex;
    /* flex-direction: column-reverse; */
    align-items: center;
    position: relative;
    /* margin-left: 10px; */
}

.modal-video-volume-button {
    width: 25px;
    height: 25px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background-image: url('images/speaker.png');
    opacity: 1;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
}
.mute {
    background-image: url('images/speaker-mute.png');
}
/* 
.modal-video-volume-slider {
    position: absolute;
    bottom: 60px;
    left: 40%;
    transform: translateX(-50%) rotate(-90deg);
    height: 5px;
    width: 4rem;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    appearance: none;
    -webkit-appearance: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.modal-video-volume-slider::-webkit-slider-thumb {
    width: 15px;
    height: 15px;
    background: rgba(255, 255, 255, 1);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    border-radius: 50%;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.modal-video-volume-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #007aff;
    border-radius: 50%;
    cursor: pointer;
} */

.modal-video::-webkit-media-controls {
    display: none !important;
}

.modal-video::-moz-media-controls {
    display: none !important;
}
.modal-body-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    word-wrap: break-word;
    font-size: 15pt;
    padding: 0px 20px;
    border-radius: 0px 10px 10px 0px;
    background-color: #F5F5F7;
}
.modal-metadata{
    margin-top: 40px;
    padding-top: 10px;
    border-top: 1px solid rgb(207, 207, 207);
    font-size: 10pt;
    font-weight: 600;
    opacity: 0.6;
    line-height: 1.5;
}

/* .modal-nav {
    display: flex;
    text-align: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 10px;
}
.modal-nav button {
    width: 150px;
    padding: 10px;
    border: none;
    background: #000;
    color: #fff;
    cursor: pointer;
}
.modal-nav button:hover {
    background: #555;
} */
.modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 6px;
    width: 24px;
    height: 24px;
    background: #000;
    background-image: url('images/close.png');
    background-size: 50%;
    background-position: center;
    background-repeat: no-repeat;
    /* border: 1px solid black; */
    /* text-align: center; */
    cursor: pointer;
    /* font-size: 24px; */
    /* font-weight: 700; */
    border-radius: 24px;
    /* align-items: center; */
}

.modal-close:hover{
    opacity: 0.7;
}
.about-text{
    max-width: 70%;
    color: #a6bdd4;
    /* font-family: 'Prata'; */
    /* font-family: "Beth Ellen", cursive; */
}
.about-content {
    display: flex;
    align-items: center;
    /* margin-top: 60px; */
}
.about-image {
    max-height: 400px;
    margin: 20px;
    align-self: flex-start;
    /* border-radius: 200px 0px 200px 200px; */
    /* filter: saturate(0); */
    border-radius: 20px;
    opacity: 0;
    transform: translateY(30px);
    animation: float-in 2s forwards;
}
.typewriter {
    /* display: inline-block; */
    /* align-self: flex-start; */
    /* overflow: hidden; */
    word-wrap: break-word;
    /* letter-spacing: .15em; */
    font-size: 15pt;
    /* margin: 0; */
    padding: 15px;
    padding-right: 40px;
    /* width: 100%; Ensures it takes the full width of the container */
    /* position: relative; Make it relative to position the caret */
    opacity: 0;
    transform: translateY(30px);
    animation: float-in 2s forwards;
}

/* .typewriter::after {
    content: '';
    position: absolute;
    right: 0;
    border-right: .15em solid black;
    animation: blink-caret 0.75s step-end infinite;
} */
.sub-section-header{
    color: #fff;
    margin-top: 20px;
    /* text-decoration: underline; */
    /* font-family: "Caveat", cursive; */
    font-size: 12pt;
    font-weight: 900;
    /* -webkit-text-stroke-width: 1px; */
    padding: 0px;
}

.cv{
    text-align: right;
    /* cursor: pointer; */
}
a.cv{
    text-decoration: none;
    color: #fff;
}
a.cv:hover{
    text-decoration: underline;
}
.sub-section {
    /* margin-top: 10px; */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}
.sub-section-card{
    margin-top: 5px;
    font-size: 9pt;
    display: flex;
    /* word-wrap: none; */
    /* grid-template-columns: repeat(3, minmax(10px, 1fr)); */
    /* justify-content: start; */
    /* flex-direction: ; */
    gap: 5px;
}
.small-sub-section {
    min-width: auto;
    max-width: 150px;
    color: #a6bdd4;
    /* height: 100%; */
    background-color: #353e46;
    display: flex;
    gap: 5px;
    /* flex-direction: column; */
    justify-content: center;
    align-items: center;
    border: 1pt solid rgb(228, 228, 228, 0.35);
    /* box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px, rgba(0, 0, 0, 0.1) 0px 1px 2px; */
    border-radius: 20px;
    padding: 5px 10px;
}
.modal-tag{
    font-size: 8pt;
    max-width:fit-content;
    color: #007FFF;
    border: 1px solid #007FFF;
    background: #fff;
}
.sub-section-image{
    align-self: center;
    width: 60px;
}
.contact {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    padding: 10px 4rem;
    /* border-top: 1px solid; */
    /* border-image: linear-gradient(to right, #000 25%, transparent 25%, transparent 50%) 100% 1; */
    height: 150px;
    background-color: #292f35;
}
.contact-header{
    margin: 0px;
    padding: 0px;
    color: #fff;
}
a.contact-link{
    color: #fff;
}
.contact-buttons{
    /* padding: 10px; */
    display: flex;
    margin-top: 20px;
    gap: 10px;
}
.copy-email,.send-email {
    font-family: 'Inconsolata', monospace;
    width: 100px;
    font-weight: 600;
    background: #FFD098;
    color: rgb(0, 0, 0);
    cursor: pointer;
    padding: 10px;
    border: none;
    border-radius: 15px;
}
.copy-email{
    background-color: #292f35;
    border: 1px solid #ffffff;
    color: #ffffff;
    font-weight: 600;
}
.send-email:hover {
    background: #c9a579;
}
.copy-email:hover{
    background: #5a6774;
}

@media (max-width: 857px) {
    .header {
        flex-direction: column;
        align-items: center;
        padding: 0;
        padding-top: 10px;
    }
    .brand-line1 {
        font-size: 17.5pt;
    }
    .brand-line2{
        font-size: 10pt;
    }
    .navbar {
        padding-top: 20px;
        text-align: center;
        font-size: 11pt;
    }
    .floating-nav {
        transition: none;
    }
    .fixed{
        top: 20px;
        padding: 5px;
    }
    .filters{
        display: none;
        width: 100%;
        justify-content: center;
        /* justify-content: space-evenly; */
        /* align-items: center; */
        /* transform: scale(0.8); */
        padding: 10px 0rem;
    }
    div.colored-bg{
        /* display: flex; */
        /* flex-direction: column; */
        /* justify-content: center; */
        gap: 8px;
        padding: 10px 1rem;
    }
    h1.intro{
        font-size: 25pt;
        /* padding-top: 10px; */
        /* margin-top: 10px; */
        border-top: 2px solid
    }
    h1.colored-bg{
        padding-top: 0px;
        border-top: 2px solid
    }
    span.color1, span.color2{
        line-height: 1.6;
    }
    img.colored-bg{
        height: 20px;
    }
    .loading-spinner {
        width: 20px;
        height: 20px;
    }
    .container{
        padding-top: 0px;
    }
    .portfolio-grid{
        gap: 10px;
    }
    .portfolio-item{
        border-radius: 10px;
    }
    
    .about-content {
        flex-direction: column-reverse;
        align-items: center;
        /* margin-top: 20px; */
    }
    .about-text{
        max-width: 100%;
    }
    .about-image{
        max-height: 200px;
        align-self: center;
        /* margin: 20px; */
    }
    .typewriter{
        font-size: 11pt;
        padding: 10px;
        /* padding-right: 40px; */
    }
    .contact{
        padding: 10px 2rem;
    }
    .modal-content {
        padding: 20px;
        top: 20px;
        max-width: 80%;
        border-radius: 20px;
    }
    .modal-content-body{
        flex-direction: column;
        padding: 15px;
    }
    .modal-content img {
        max-width: 100%;
        /* border-radius: 10px 10px 0px 0px; */
    }
    .modal-body-wrapper{
        font-size: 10pt;
        padding: 20px 20px 10px 10px;
        border-radius: 0px 10px 10px 10px;
    }
    .modal-metadata{
        margin-top: 20px;
        font-size: 8pt;
    }
    .modal-close{
        padding: 4px;
        width: 20px;
        height: 20px;
        font-size: 20px;
    }
}

.gridbox {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
    border-top: 1px solid #292F35;
}
.grid {
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: repeat(auto-fill, minmax(8px, 1fr)); /* Adjust size as needed */
    grid-gap: 5px;
    /* margin: 20px auto; */
    margin: 0;
    border: 1px solid #292F35;
    border-radius: 20px;
    padding: 15px;
    /* padding-right: 100px; */
    max-width: 100%;
    /* max-width: 100%; Set a maximum width for larger screens */
    min-width: 300px; /* Set a minimum width for smaller screens */
}
.box {
    width: 8px;
    height: 8px;
    background-color: #1e2327;
    border-radius: 4px;
    border: 0.5px solid #292e33;
    position: relative;
}
.box.active {
    background-color: #26a6424b;
    /* border-radius: 2px; */
    border: 0.5px solid #43d55b9a;
}
h3.sub-section-header{
    align-self: flex-start;
    padding: 0;
    margin: 0;
    margin-top: 30px;
    margin-bottom: 10px;
}

.blink {
    animation: blink 1s infinite;
}