@media all {
    body {
        font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
        color: antiquewhite;
        background-color: #140132;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%2300EDD1' stroke-width='54.2' %3E%3Ccircle fill='%23140132' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23280645' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23350853' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%23400a60' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%23490b6b' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%23510d75' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23580e7e' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%235f0f87' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%2365108f' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%236b1196' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%2371129d' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%237613a4' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%237b13ab' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%238014b1' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%238515b8' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%238916be' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%238e16c3' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%239217C9' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
        background-attachment: fixed;
        background-size: cover;
        height: 100vh;
        width: auto;
        overflow-x: hidden;
    }

    #about {
        background-color: #26003b;
        margin-top: 10vh;
        width: 100%;
    }

    #animation .text-xl {
        font-size: 2.4rem;
        color: currentColor;
        letter-spacing: 0.06em;
    }

    .image-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    .image-container img {
        height: 600px;
        object-fit: contain;
        opacity: .9;
    }

    .details {
        margin: 0 20px;
    }

    .email-icon {
        background: none;
        border: none;
        cursor: pointer;
        outline: none;
    }

    i.fa-brands.fa-x-twitter,
    i.fa-brands.fa-bluesky,
    i.fa-solid.fa-envelope,
    button.email {
        margin: 10px;
        color: #00ffc8;
        transition: color 0.3s ease;
    }

    i.fa-brands.fa-x-twitter:hover,
    i.fa-brands.fa-bluesky:hover,
    i.fa-solid.fa-envelope:hover,
    button.email:hover {
        color: #0077ff;
    }

    #about h1,
    #about h2,
    #about h3,
    #about h4,
    #about h5,
    #about h6 {
        margin: 0;
        padding: 0;
        font-weight: bold;
    }

    #about h1 {
        font-size: 35px;
    }

    #about h2 {
        font-size: 25px;
    }

    #about h3 {
        font-size: 22px;
    }

    #about p {
        font-size: 13px;
    }

    #about button {
        background-color: rgba(255, 0, 0, 0.0);
        border-radius: 0%;
        border-width: 0;
        margin: auto;
        padding: 0;
    }

    .navigation-bar {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #1d001f;
        height: 60px;
        width: 100vw;
    }

    .navigation-bar button {
        cursor: pointer;
        background-color: #1d001f;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        margin: 0 10px;
    }

    .navigation-bar button:hover {
        color: deeppink;
        transition: color 0.3s ease;
    }

    #gallery18Button {
        color: deeppink;
    }

    #portfolio {
        display: none;
        padding: 10px;
        width: 100%;
        height: auto;
    }


    .gallery {
        padding-top: 10px;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        background-color: #26003b;
    }

    .gallery-item {
        position: relative;
        margin: 10px;
        overflow: hidden;
    }

    .gallery-item img {
        display: block;
        width: auto;
        height: 25vh;
        filter: drop-shadow(0px 5px 3px black);
    }

    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        opacity: 0.8;
        transition: opacity 0.3s;
    }

    .overlay .text {
        font-size: 20px;
        filter: drop-shadow(0px 4px black);
    }

    .overlay.hidden {
        display: none !important;
    }

    .gallery-item img.blurred {
        filter: blur(10px) grayscale(90%) !important;
        transition: filter 0.3s ease-in-out;
    }

    .switch {
        position: relative;
        display: inline-block;
        width: 90px;
        height: 40px;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #6E2AED;
        transition: 0.4s;
        box-shadow: inset 2px 2px 5px black;
    }

    .slider.round {
        border-radius: 30px;
        overflow: hidden;
    }

    .slider.round:before {
        position: absolute;
        content: "\1F603";
        font-size: 22px;
        left: 5px;
        bottom: 5px;
        color: #ffffff;
        transition: 0.4s;
    }

    input:checked+.slider {
        background-color: #3B0036;
        background-size: cover;
    }

    input:checked+.slider:before {
        content: "\1F608";
        transform: translateX(50px);
    }

    #myModal {
        display: none;
        position: fixed;
        z-index: 9999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.95);
        overflow: auto;
        justify-content: center;
        align-items: center;
    }

    #myModal .imagename {
        font-size: 18px;
        margin-bottom: 10px;
        text-align: center;
        max-height: 5vh;
    }

    #myModal .modal-content {
        text-align: center;
        position: relative;
        width: 95vw;
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        overflow: hidden;
        background-color: rgba(29, 0, 31, 0.5);
    }

    #myModal .modal-image {
        max-width: 100%;
        max-height: 80vh;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    @keyframes slideOutRight {
        0% {
            transform: translateX(0);
            opacity: 1;
        }

        100% {
            transform: translateX(100%);
            opacity: 0;
        }
    }

    @keyframes slideInLeft {
        0% {
            transform: translateX(-100%);
            opacity: 0;
        }

        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes slideOutLeft {
        0% {
            transform: translateX(0);
            opacity: 1;
        }

        100% {
            transform: translateX(-100%);
            opacity: 0;
        }
    }

    @keyframes slideInRight {
        0% {
            transform: translateX(100%);
            opacity: 0;
        }

        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }

    #myModal .caption {
        font-size: 16px;
        margin-top: 10px;
        text-align: center;
        max-height: 20vh;
    }

    #myModal .social-buttons {
        text-align: center;
    }

    #myModal .social-buttons h5 {
        font-size: 14px;
        margin-bottom: 5px;
    }

    #myModal .prev,
    #myModal .next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: white;
        font-size: 35px;
        cursor: pointer;
        z-index: 9999;
    }

    #myModal .prev {
        left: 0;
    }

    #myModal .next {
        right: 0;
    }

    #myModal .Faceshare,
    #myModal .Twitshare,
    #myModal .Pinshare {
        background-color: transparent;
        border: none;
    }

    .email-icon {
        background: none;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
    }

    .email-copy-hidden {
        display: none;
    }

    #myModal .close-button {
        position: absolute;
        top: 15px;
        right: 35px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        transition: 0.3s;
        opacity: 0.7;
        cursor: pointer;
        z-index: 1001;
    }

    #myModal .close-button:hover,
    #myModal .close-button:focus {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
        opacity: 1;
    }
}

@media (max-width: 1020px) {
    body {
        display: block;
        min-height: unset;
    }

    body.admin-page,
    body.login-page {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        min-height: 100vh;
    }

    .image-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 0px;
        box-sizing: border-box;
        text-align: left;
        font-size: small;
    }

    .image-container img:last-child {
        display: none;
    }

    .image-container img {
        width: 55vw;
        height: auto;
        object-fit: fill;
    }

    .details {
        width: 40vw;
        padding: 10px;
        box-sizing: border-box;
    }

    #myModal .imagename {
        font-size: 18px;
        margin-bottom: 10px;
        text-align: center;
    }


    #myModal .modal-content {
        text-align: center;
        position: relative;
    }

    #myModal img {
        max-width: 100%;
        height: auto;
        max-height: 80vh;
    }

    #myModal .caption {
        font-size: 16px;
        margin-top: 10px;
        text-align: center;
    }

    #myModal .row {
        text-align: center;
    }

    #myModal .row button {
        margin: 0 5px;
    }

    #myModal .prev,
    #myModal .next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: white;
        font-size: 24px;
        cursor: pointer;
        z-index: 9999;
    }

    #myModal .prev {
        left: 0;
    }

    #myModal .next {
        right: 0;
    }

    #portfolio {
        padding: 0px;
    }

    .gallery {
        padding: 5px;
    }
}