@font-face {
    font-family: 'Earwig';
    font-weight: normal;
    src: url('font/earwig_factory_rg-webfont.eot');
    src: url('font/earwig_factory_rg-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/earwig_factory_rg-webfont.woff2') format('woff2'),
         url('font/earwig_factory_rg-webfont.woff') format('woff'),
         url('font/earwig_factory_rg-webfont.ttf') format('truetype'),
         url('font/earwig_factory_rg-webfont.svg#earwig_factoryregular') format('svg');
}

body{
    margin: 0;
    background: url(images/gradients/Gradient.png);
    font-family: "Grenze Gotisch";
    font-weight: 400;
    font-style: normal;
    background-repeat: no-repeat;
    background-size: cover;
}

h1, h2, h3, h4{
    margin: 0;
    font-weight: unset;
}

h1 {
    font-size: 6vw;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    color: #fff;
    line-height: 1;
}

h4{
    font-family: "Gupter", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: #fff;
}

/* HEADER ANIMATION */
#header-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Vertically center the content */
    height: 100vh; /* Set height to full viewport height */
}

.inline{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: min-content;
    font-family: "Earwig";
    font-weight: normal;
    font-style: normal;
    letter-spacing: 2px;
    color: #ffffff;
    filter: drop-shadow(2px 4px 6px black);
}

#header-top{
    font-size: 4.2em;
    display: contents;
}

.hi{
    margin-right: 2.1vw;
}

#header-bottom{
    display: block;
    margin: 0;
    letter-spacing: 16px;
}

/* Combined media query for smaller screens */
@media (max-width: 768px) { /* Adjust the max-width as needed */
    #header-bottom {
        letter-spacing: 8px;
        padding-top: 2vw;
    }
}

/* Further reduce font size for very small screens */
@media (max-width: 480px) {
    #header-bottom {
        letter-spacing: 4px;
        padding-top: 2.5vw;
    }
}

#subtext {
    font-size: 4vw;
    text-align: center;
    color: #ffffff;
    margin: 0 !important;
    letter-spacing: 3px;
    line-height: 4.2vw;
    padding-top: 1.5vw;
}

/* Combined media query for smaller screens */
@media (max-width: 768px) { /* Adjust the max-width as needed */
    #subtext {
        font-size: 4.8vw;
        padding-top: 2vw;
    }
}

/* Further reduce font size for very small screens */
@media (max-width: 480px) {
    #subtext {
        font-size: 4.5vw;
        padding-top: 2.75vw;
    }
}
/* HEADER ANIMATION */


/* EXPLORE BUTTON */
#tattoo-wrapper{
    position: relative;
    width: auto;
    display: inline-block;
    vertical-align: top;
    transition: filter 1s ease;
    margin-top: 3.75vw;
}

/* Combined media query for smaller screens */
@media (max-width: 768px) { /* Adjust the max-width as needed */
    #tattoo-wrapper {
        margin-top: 4.5vw;
    }
}

/* Further reduce font size for very small screens */
@media (max-width: 480px) {
    #tattoo-wrapper {
        margin-top: 4vw;
    }
}

#tattoo-image{
    display: block;
    width: 13.3vw;
    -webkit-filter: brightness(100%);
    -moz-filter: brightness(100%);
    -o-filter: brightness(100%);
    -ms-filter: brightness(100%);
    filter: brightness(100%);
    transition: all 1s ease;
}

/* Combined media query for smaller screens */
@media (max-width: 768px) { /* Adjust the max-width as needed */
    #tattoo-image {
        width: 26vw;
    }
}

/* Further reduce font size for very small screens */
@media (max-width: 480px) {
    #tattoo-image {
        width: 24vw;
    }
}

#tattoo-text{
    text-align: center;
    font-size: 2.3vw;
    position: absolute;
    top: -20%;
    width: 100%;
    height: auto;
    color: #ffffff;
    visibility: hidden;
    opacity: 0;
    transition: all 1s ease;
    z-index: 1;
    margin: 0;
}

/* Combined media query for smaller screens */
@media (max-width: 768px) { /* Adjust the max-width as needed */
    #tattoo-text {
        font-size: 4.3vw;
    }
}

/* Further reduce font size for very small screens */
@media (max-width: 480px) {
    #tattoo-text {
        font-size: 4vw;
    }
}

/* Show the text when hovering over the image */
#tattoo-wrapper:hover #tattoo-text {
    visibility: visible;
    opacity: 1;
    cursor: pointer;
    
}

#tattoo-wrapper:hover #tattoo-image{
    filter: brightness(20%);
    cursor: pointer;
}
/* EXPLORE BUTTON */


/* STYLING FOR THE ANIMATION */
.word {
    display: inline;
    margin: 0;
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.word--kidnap {
    font-family: 'Earwig';
    font-weight: 400;
    font-style: normal;
    font-size: 9vw;
    color: #ffffff;
}

/* Combined media query for smaller screens */
@media (max-width: 768px) { /* Adjust the max-width as needed */
    .word--kidnap {
        font-size: 12vw;
    }
}

/* Further reduce font size for very small screens */
@media (max-width: 480px) {
    .word--kidnap {
        font-size: 14vw;
    }
}

.word--kidnap span {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100%;
}

.hidden {
    position: absolute;
    overflow: hidden;
    width: 0;
    height: 0;
    pointer-events: none;
}
/* STYLING FOR THE ANIMATION */

/* ABOUT ME OVERLAY & EMAIL */
#vitor-text {
    z-index: 1;
    font-size: 1.7vw;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 24px;
    color: #ffffff;
    opacity: 0; /* Start with opacity 0 */
    cursor: pointer;
    transition: opacity 1s ease-in-out; /* Add transition for opacity */
}

/* Combined media query for smaller screens */
@media (max-width: 768px) { /* Adjust the max-width as needed */
    #vitor-text {
        font-size: 3vw;
    }
}

/* Further reduce font size for very small screens */
@media (max-width: 480px) {
    #vitor-text {
        font-size: 4vw;
    }
}

.no-style{
    text-decoration: none !important;
}

#about-text{
    z-index: 1000001;
    position: fixed;
    transform: rotateZ(-90deg) translateX(-50%);
    transform-origin: 0 50%;
    top: 50%;
    padding: 8px;
    left: 48px;
    color: #ffffff;
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.5s;
    text-shadow: 3px -3px #000000; /* shadow */
    font-size: 24px;
}

/* Combined media query for smaller screens */
@media (max-width: 768px) { /* Adjust the max-width as needed */
    #about-text {
        left: 32px;
        font-size: 18px; /* Smaller font size for tablet and small screens */
        text-shadow: 2px -2px #000000; /* shadow */
    }
}

/* Further reduce font size for very small screens */
@media (max-width: 480px) {
    #about-text {
        left: 18px;
        font-size: 14px; /* Smaller font size for very small screens */
        text-shadow: 1px -1px #000000; /* shadow */
    }
}

#about-text:hover{
    opacity: 1;
}

#email-text{
    z-index: 1000001;
    position: fixed;
    transform: rotateZ(-90deg) translateX(50%);
    transform-origin: 100% 50%;
    top: 50%;
    padding: 8px;
    right: 48px;
    color: #ffffff;
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.5s;
    text-shadow: 3px 3px #000000; /* shadow */
    font-size: 24px;
}

/* Combined media query for smaller screens */
@media (max-width: 768px) { /* Adjust the max-width as needed */
    #email-text {
        right: 32px;
        font-size: 18px; /* Smaller font size for tablet and small screens */
        text-shadow: 2px 2px #000000; /* shadow */
    }
}

/* Further reduce font size for very small screens */
@media (max-width: 480px) {
    #email-text {
        right: 18px;
        font-size: 14px; /* Smaller font size for very small screens */
        text-shadow: 1px 1px #000000; /* shadow */
    }
}

#email-text:hover{
    opacity: 1;
}

#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    color: #ffffff;
    background: linear-gradient(135deg, #481885, #EC458D, #F5986C);
    filter: url(#noise);
    z-index: 1;
    overflow-x: hidden; /* Prevent horizontal overflow */
}

#overlay.show {
    display: block;
}

#overlay-wrapper {
    font-family: 'Gupter', serif;
    font-weight: 400;
    font-style: normal;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    width: 805px;
}

#overlay-text {
    line-height: 1.6; /* Adjusted for better readability */
    font-size: 26px;
    margin-bottom: 50px;
    letter-spacing: 2.1px;
    word-wrap: break-word; /* Break words to avoid overflow */
}

#overlay-links{
    line-height: 40px;
}

#links {
    border-bottom: 1px solid #fff;
    opacity: 1;
    transition: color .3s;
    letter-spacing: .5px;
    padding-bottom: 2px;
    color: #ffffff;
}

#links:hover {
    color: rgb(0 255 255);
}

#overlay-footer {
    line-height: 16px;
    font-size: 14px;
    letter-spacing: .5px;
    color: #ffffff;
}

#noise {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* Media Query for Smaller Screens */
@media (max-width: 768px) {
    #overlay-wrapper {
        width: 90%; /* Adjust width */
        max-width: 100%; /* Full width on smaller screens */
        padding: 20px; /* Adjust padding */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Center horizontally and vertically */
        box-sizing: border-box; /* Include padding and border in element width and height */
    }

    #overlay-text {
        font-size: 18px; /* Adjust font size */
        line-height: 1.5; /* Adjust line height */
    }

    #overlay-links{
        font-size: 14px;
        line-height: 24px;
    }

    #overlay-footer {
        font-size: 12px; /* Adjust footer font size */
        line-height: 24px;
    }
}

@media (max-width: 480px) {
    #overlay-wrapper {
        width: 90%; /* Even more adjustment for very small screens */
        padding: 20px; /* Adjust padding */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Center horizontally and vertically */
        box-sizing: border-box; /* Include padding and border in element width and height */
    }

    #overlay-text {
        margin-bottom: 32px;
        font-size: 9px; /* Further adjust font size */
    }

    #overlay-links{
        font-size: 9px;
        line-height: 16px;
    }

    #overlay-footer{
        font-size: 8px;
    }

}

/* ABOUT ME OVERLAY & EMAIL */

/* PORTFOLIO CONTENT */
#prototypes_2{
    position: absolute;
    height: auto;
    width: 920px; /* Adjust maximum width for regular screens */
    z-index: 1;
    left: 50%;
    top: 50%; /* Move the element right by 50% of the parent's width */
    transform: translate(-50%, -50%); /* Center the element both horizontally and vertically */
}

#prototypes{
    position: absolute;
    height: 720px;
    width: auto; /* Adjust maximum width for regular screens */
    z-index: 1;
    left: 50%; /* Move the element right by 50% of the parent's width */
    transform: translate(-50%); /* Center the element both horizontally and vertically */
}

/* Media query for smaller screens */
@media (max-width: 768px) {
    #prototypes {
        height: 70vh; /* Use viewport height for scaling */
        width: auto; /* Keep width auto to maintain aspect ratio */
        left: 50%; /* Center horizontally */
        top: 50%; /* Center vertically */
        transform: translate(-50%, -51%); /* Center both horizontally and vertically */
    }

    #prototypes_2 {
        height: 50vh; /* Use viewport height for scaling */
        width: auto; /* Keep width auto to maintain aspect ratio */
        left: 50%; /* Center horizontally */
        top: 50%; /* Center vertically */
        transform: translate(-50%, -50%); /* Center both horizontally and vertically */
    }
}

/* Media query for very small screens */
@media (max-width: 480px) {
    #prototypes {
        height: 24vh;
        width: auto;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -52%);
    }

    #prototypes_2 {
        height: 18vh;
        width: auto;
        left: 50%;
        top: 51%;
        transform: translate(-50%, -50%);
    }
}

.section{
    height: 100vh;
}

.container {
    cursor: pointer;
    padding-top: 5.5vw; /* Add padding to the top to create space between header and content */
    margin: auto;
    max-width: 810px; /* Adjust maximum width for regular screens */

    /* Media query for smaller screens */
    @media only screen and (max-width: 1000px) {
        max-width: 80%; /* Set maximum width to 100% for smaller screens */
    }

    /* Media query for larger screens */
    @media only screen and (min-width: 1548px) {
        max-width: 1080px; /* Adjust maximum width for larger screens */
    }
}

/* Combined media query for smaller screens */
@media (max-width: 768px) { /* Adjust the max-width as needed */
    .container {
        display: flex; /* Use Flexbox */
        flex-direction: column; /* Stack children vertically */
        align-items: center; /* Center children horizontally */
        justify-content: center; /* Center children vertically */
        height: 100vh; /* Full viewport height */
        padding: 0; /* Remove padding to center content */
    }
        /* Ensure carousel keeps its size */
        .hide-carousel,
        .main-carousel {
            width: 100%; /* Make sure the carousel takes full width */
            flex-shrink: 0; /* Prevent the carousel from shrinking */
        }
    
        .carousel-cell {
            width: 100%; /* Maintain the full width for carousel cells */
        }
    
        .cover-image {
            max-width: 100%; /* Ensure images do not shrink */
            height: auto; /* Maintain aspect ratio */
        }
    }

/* Further reduce font size for very small screens */
@media (max-width: 480px) {
    .container {
        max-width: 80%; /* Further adjust width */
    }
}

.image-container {
    display: block;
    position: relative;
    transform-style: preserve-3d;
}

.text-wrapper {
    position: absolute;
    top: 50%;
    left: -11%;
    transform: translateY(-50%) translateZ(100px);
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.text-wrapper-mer {
    width: 650px;
    position: absolute;
    top: 35%;
    left: -20%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.image-text {
    font-size: 5.9vw;
    margin: 0; /* Remove margin */
    color: #fff;
    z-index: 2;
}

.image-subtext {
    font-size: 1.5vw;
    margin: 0; /* Remove margin */
    color: #fff;
    z-index: 2;
    padding-top: 8px;
}

/* Combined media query for smaller screens */
@media (max-width: 768px) { /* Adjust the max-width as needed */
    .text-wrapper {
        left: 10%; /* Further adjust width */
    }

    .text-wrapper-mer {
        width: 300px; /* Further adjust width */
        left: 3%;
    }

    .image-text {
        font-size: 7vw;
    }
    
    .image-subtext {
        font-size: 2vw;
        padding-top: 4px !important;
    }

    }

/* Further reduce font size for very small screens */
@media (max-width: 480px) {
    .text-wrapper {
        left: 10%; /* Further adjust width */
    }

    .text-wrapper-mer {
        width: 162px; /* Further adjust width */
        left: 3%;
    }

    .image-text {
        font-size: 7vw;
    }

    .image-subtext {
        font-size: 2vw;
        padding-top: 2px !important;
    }
    
}

#oval {
    height: 13vw;
    width: 35vw;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-15%, -45%);
    filter: blur(35px);
    z-index: 1;
}

#beam-subtext{
    transform: translate(-9%, 0%);
}

#oval-aisha {
    height: 12vw;
    width: 28vw;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-20%, -45%);
    filter: blur(35px);
    z-index: 1;
}

#aisha-text{
    transform: translateX(4%);
}

#aisha-subtext{
    transform: translate(-9%, 0%);
}

#oval-mer {
    height: 23vw;
    width: 45vw;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-14%, -49%);
    filter: blur(35px);
    z-index: 1;
}

#mer-subtext{
    padding-top: 16px;
    transform: translate(5%, 0%);
}

#oval-bdo {
    height: 12vw;
    width: 24vw;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-20%, -45%);
    filter: blur(35px);
    z-index: 1;
}

#bdo-subtext{
    transform: translate(-10%, 0%);
}

#oval-cesae {
    height: 12vw;
    width: 27vw;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-21%, -45%);
    filter: blur(35px);
    z-index: 1;
}

/* Combined media query for smaller screens */
@media (max-width: 768px) { /* Adjust the max-width as needed */
    #oval {
        height: 16vw;
        width: 37vw;
        filter: blur(14px); /* Further adjust width */
    }
    #oval-aisha {
        height: 16vw;
        width: 34vw;
        left: 6%;
        filter: blur(14px);
    }
    #oval-mer {
        height: 28vw;
        width: 56vw;
        top: 53%;
        left: 4%;
        filter: blur(18px);
    }
    #oval-bdo {
        height: 16vw;
        width: 28vw;
        left: -5%;
        filter: blur(16px);
    }
    #oval-cesae {
        height: 16vw;
        width: 30vw;
        left: 5%;;
        filter: blur(12px);
    }
}

/* Further reduce font size for very small screens */
@media (max-width: 480px) {
    #oval {
        filter: blur(8px); /* Further adjust width */
    }
    #oval-aisha {
        height: 16vw;
        width: 34vw;
        left: 6%;
        filter: blur(10px);
    }
    #oval-mer {
        height: 28vw;
        width: 56vw;
        top: 53%;
        left: 4%;
        filter: blur(14px);
    }
    #oval-bdo {
        height: 16vw;
        width: 30vw;
        left: -10%;
        filter: blur(10px);
    }
    #oval-cesae {
        height: 16vw;
        width: 30vw;
        left: 5%;;
        filter: blur(8px);
    }
}

#cesae-subtext{
    transform: translate(-10%, 0%);
}

:root {
    --rotation-1: -12deg;
    --rotation-2: 16deg;
    --rotation-3: -24deg;
    --rotation-4: 12deg;
    --rotation-5: -8deg;
    --rotation-6: 32deg;
    --rotation-7: -16deg;
    --rotation-8: 24deg;
    --rotation-9: -32deg;
    --rotation-10: -20deg;
    --rotation-11: 28deg;
}

.cover-image {
    width: 100%;
    height: auto;
    display: block;
}

.hide-carousel {
    display: none; /* Hide the carousel container initially */
}

.main-carousel {
    width: auto;
    margin: auto;
}

.carousel-cell {
    width: 100%; /* full width */
    height: auto; /* height of carousel */
    margin-right: 10px;
}

#Lumibeam {
    width: 100%; /* Set the width to 100% of its container */
    height: auto; /* Let the height adjust automatically to maintain aspect ratio */
}


.custom-dots {
    display: flex;
    justify-content: flex-end; /* Align items to the right */
    column-gap: 8px; /* Adjust the spacing between custom dots */
    margin-top: 4px;
    height: 24px;
    overflow: hidden;
}

.custom-dot {
    display: inline-block;
    width: 32px;
    height: 24px;
    background-image: url('images/Eye_Closed.png');
    background-size: contain; /* Adjust background size as needed */
    background-repeat: no-repeat; /* Prevent image repetition */
    cursor: pointer;
}

.fp-watermark{
    display: none;
}

/* Disable tap highlight on mobile devices */
a, button, input, textarea, select, label, .container, h2 {
    -webkit-tap-highlight-color: transparent; /* Removes blue flash */
    outline: none; /* Removes outline for accessibility */
}
/* PORTFOLIO CONTENT */