/*colors
 black #121113
white #F0F0EB
green #3AE170      alternative #7B9F60
purple #713D92*/

/* custom fonts */
@import url('https://fonts.cdnfonts.com/css/n27');

@font-face{
    font-family: 'cyrene';
    src: url('../fonts/CyreneRegular.woff2') format('woff2'),
         url('../fonts/CyreneRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.invisible{
    display: none;
}
.notInteractable{
    pointer-events: none;
}

/** cursor */
html {
    cursor: none;
    scroll-behavior: smooth;
}

body{
    /* animationn */

    /* -webkit-animation: moveToTop .6s ease both; */
    -webkit-transition: moveToTop .6s ease both;
    transition: moveToTop .6s ease both;

    /* ---- */
    background-color: #F0F0EB;
    color:#121113;
    font-family: 'N27', sans-serif;
    font-size: 16px;
    overflow-x: hidden;
    margin: 0 0;

    /** cursor */
    .cursor__circle{
        z-index: 2;
        pointer-events: none;
        overflow-y : none;
        position: fixed;
        transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        /* transition: 0.5s ease; */
        /* opacity: 30%; */

            circle {
                fill:#121113;
                fill: white;
                /* mix-blend-mode: difference; */
            }
    }
}

.interactable:hover ~ .cursor__circle,
body:has(.interactable:hover) .cursor__circle {
    transform: scale(2.8);
}

@-webkit-keyframes moveToTop {
    from { }
    to { -webkit-transform: translateY(-100%); }
  }
  @keyframes moveToTop {
    from { }
    to { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
  }

.ball{
    top: 0;
    left: 0;
    z-index: 2;
    mix-blend-mode:difference;
    pointer-events: none;
}

a{
    text-decoration: none;
    color:#121113;
    cursor: none;
    transition-delay: -3s;
}

a:hover{
    transition: 0.1s ease-in-out;
    /* transition-delay: -3s; */
    font-style: italic;
    color:#121113;
}

/* --- different text sizes */
/* .bodyTxt{
    font-size: 20px;
} */
#semiTitleTxt{
    font-size: 4vh;
}
.semiTxt{
    font-size: 2vw
}

.titleTxt{
    font-size: 64px;
}
.superTxt{
    font-size: 100px;
    font-size: 5vw;
}

.txtRightAlign{
    text-align: end;
}
.alignDown{
    align-items: end;
    margin: 0px;
}
.alignedUp{
    align-items: start;
}

hr{
    border: 1px solid #121113;
    width: 100%;
}
.menu{
    /* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
    margin-top: 3%;
    /* display: flex; */
    align-items: center;
    justify-content: center;
    margin-left: -2%;
    transition: .4s ease-out;
}
.menuOptions{
    width: 80%;

}
.optdiv:nth-of-type(2){
    margin-left: 10vw;
}

.optdiv:nth-of-type(3){
    margin-left: 5vw;
}

.optdiv:nth-of-type(4){
    margin-left: 15vw;
}

/* ------------------------------- COVER */
.coverImg{
    width: 80vw;
    position: fixed;
    transition: .4s ease-out;
    filter: contrast(80%) saturate(40%) grayscale(10%) brightness(1.1) blur(10px);

    background: linear-gradient(217deg, #7B9F60, rgba(255, 0, 0, 0) 70.71%), linear-gradient(127deg, #7B9F60 , rgba(0, 255, 0, 0) 70.71%), linear-gradient(336deg, #7B9F60, rgba(0, 0, 255, 0) 70.71%);
    border-radius: 50%;
    font-size: 250px;
    min-height: 2em;
    min-width: 2em;
    filter: blur(80px);
}
.filter{
    height: 102vw;
    position: fixed;
    /* transition: .4s ease-out; */

    mix-blend-mode: multiply;
    /* filter:blur(2px) hue-rotate(100deg); */
}

.coverContent{
    position: fixed;
    white-space: nowrap;
}
.blurover{
    transition: .4s ease-out;
}
#Title{
    margin-top: -3%;
    font-size: 15vw;
}
#smallTitle{
    margin-top: -3%;
    font-size: 8vw;
}
.italic{
    font-style: italic;
}
.cyrene{
    font-family: 'cyrene';
    font-style: normal;
    font-weight: normal;
}
.green{
    color: #3AE170;
    color: #7B9F60;
}
#infoContent{
    margin-left: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: -20px;
    margin-top: -10px;
    /* padding-right: 5%; */
}
#hlInfo{
    margin-left: 20px;
    border: 1px solid #121113;
    justify-self: center;
    /* width: 93.5%; */
}
.coverInfo{
    width: 80vw;
    display: flex;
    justify-content: flex-end;

}
.optdiv{
    margin-bottom: 15px;
}

.coverOptions{
    position: fixed;
    margin-top: -12%;
    /* margin-left: -2%; */
    width: 98vw;
    height: 50vh;
    /* text-align: right; */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
}
.coverOpt{
    /* margin: 10px 0 500px 0; */
    align-self: flex-end;
    transition: .4s ease-out;
    padding-left: 40px;
    /* margin-bottom: 100px; */
}

#divWeb{
    background-position: revert;
}
#optfront{
    margin-left: -40%;
}
#optdig{
    margin-left: -70%;
}
#optweb{
    margin-left: -5%;
}
#optint{
    margin-left: -25%;
}

.coverOpt:hover{
    background-image: url('../img/circle_middle.svg');
    background-repeat: no-repeat;
    background-size: 90% 100%;
    background-position: center;
    /* cursor: pointer; */
}

/* .coverOpt:hover{
    background-image: url('../assets/img/circle.svg');
    transform:scale(1.6);

    #Title{
        filter: blur(20px);
    }
} */

/* #optfront, #optweb, #optdig, #optint{
    background-image: url('../assets/img/circle.svg');
} */

/* .optfront{
    background-image: url('../img/circle.svg');
    background-repeat: none;
    background-size: 120%;
} */

.cover{
    height: 100vh;
}

.phonehmove{
    display:none;
}

/** ---............................... for the navbar*/

@keyframes close {
    0% {
        transform: rotate(0deg);
        /* rotation-point:0% 0%; */
        transform-origin:0 100% ;
        opacity: 100%;
    }
    100% {
        transform: rotate(90deg);
        /* rotation-point:0% 0%; */
        transform-origin: 0 100%;
        opacity: 0%;
    }
  }

#navBtn{
    width: 1.8rem;
    position: relative;
    display:none;
    bottom: 0vh;
    left: 10vh;
    transform: rotate(0deg);
    transition: .4s ease-out;
}
#navBackBtn{
    width: 1.8rem;
    position: relative;
    bottom: 0vh;
    left: 10vh;
    transform: rotate(0deg);
    transition: .4s ease-out;
}

.difference{
    mix-blend-mode:difference;

}

#navBtn:hover, #navBackBtn:hover{
    transform: rotate(90deg);
    transition: .4s ease-out;
}

#navbar{
    display:flex;
    flex-direction: row;
    width: 80vh;
    /* height: 15vh; */
    transform: rotate(-90deg);
    position: fixed;
    bottom: 35vh;
    left:-35vh;
    align-items: flex-start;
    transition: .4s ease-out;

    padding: 0px;
}

.navLinks{
    position:relative;
    display:flex;
    flex-direction: row-reverse;
    text-align: center;
    /*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!11 jdkhed */
    transition: .4s ease-out;
    /* animation: none; */
}
.navLinks div{
    position: relative;
    width: 16vh;
    transition: 0.9s ease-out;
    transition: dissolve 0.9s ease-out;
    a{
        width: 14vh;
        /* position: relative; */
        /* padding: 1vh; */
        position: absolute;
        /* cursor: pointer; */
    }
}

a.navLinks :hover{
    font-style: italic;
    /* transition-delay: -3s; */
}
.navLinks a:hover:before{
    font-style: italic;
    content: "> ";
}
/* .menuLink:hover:before{
    font-style: italic;
    content: "> ";
} */


/** --------------------------------- for pages*/

.pageTitle{
    margin-top: -10px;
    margin-bottom: -5px;
    white-space: nowrap;
    /* width: 100%; */
}

.titleDiv{
    margin-top: -10px;
    margin-bottom: 10px;
    height: 4vh;
    /* width: 100vw;
    margin: auto auto; */
}

@keyframes hmove {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(-100%, 0);
    }
  }

.hmove{
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    /* left: 1; */
    /* animation: hmove 20s linear infinite; */
    /* left: var(percentScroll); */
    transition: translate 0.7s ease-out;
    overflow: clip;
}

.hmove2{
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    /* animation-delay: 5s;
    display: none; */
    /* padding-left: -200%;
    left: 100%; */
    /* left: var(percentScroll); */
    overflow: clip;
    /* transition: transform 0.45s cubic-bezier(0, 0, 0.21, 1); */
    /* display: none; */
  }

.pageSection{
    position: relative;
    background-color: #F0F0EB;
    margin-bottom: -10px;
    transform: .3s ease;

    background-image: url("/assets/img/rectTest.png");
    background-size: 100%;

    width: 100vw;
    height: 100vh;

    /* display: flex; */
}

.pagebody{
    padding: 10px 20px 10px 20px;
    /* display: flex;
    align-items: center; */
    /* flex-direction: column; */
    /* justify-content: flex-end; */
}

.scrollPage{
    height: auto;
}

/* --- for my work section */
.thumbnail{
    /* position: absolute; */
    width: 100%;
    filter: contrast(80%) saturate(40%) grayscale(10%) brightness(1.1);
}
.thumbnailFilter{
    position: relative;
    width: 30%;
    transition: .4s ease-out;
    mix-blend-mode: multiply;
    /* filter:blur(10px); */
}

.collectionWorks{
    padding-top: 40px;
    padding-bottom: 60px;

}

.work{
    width: 30%;

    padding-right: 40px;
    padding-bottom: 40px;
}

#showingImg{
    position: fixed;
    pointer-events: none;

    transition: 0.5s ease;
    height: 400px;
    display: none;
}

.workTitle{
    margin: 0px;
    /* text-align: right; */
}

.works{
    display: flex;
    flex-direction: row;
    /* width: 100%; */
    justify-content: space-between;

    /*--- color transition*/
    /* background: linear-gradient(to right, #7B9F60, #7B9F60 50%, #121113 50%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    background-position: 100%;
    transition: background-position 0.4s ease-in-out; */
}

/* .work:hover{
} */

/* .works:hover{
    background-position: 0 100%;
} */

.worksDesc{
    width: 25%;
}

#projectDesc{
    margin: 0px;
    text-align: end;
}

.padded{
    padding: 20px;
}

.rowJustified{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.colJustified{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.smallTxt{
    font-size: 1.5vw;
    margin-top: -10px;
}
.middleTxt{
    font-size: 3vw;
    margin-top: -20px;
}

.bigTxt{
    font-size: 5vw;
    margin-top: -30px;
}
.biggerTxt{
    font-size: 7vw;
    margin-top: -40px;
}
.giantTxt{
    font-size: 7vw;
    margin-top: -50px;
}
/** -------------------------------------- about me */
#lastName, #firstName {
    margin-top: -125px;
    margin-right: -40px;
    position: relative;
    justify-self: flex-end;
}
#lastName{
    margin-top: -120px;
    margin-left: 5px;
}
#firstName{
    margin-right: 90px;
}


.abtmeContent{
    height: 93%;
}

.abtmeHead{
    margin-bottom: -20px;
    margin-top: -10px;
}
.abtmeDisplay{
    /* align-self: center;
    justify-self: center; */
    margin-top: 20px;
    /* margin-left: 20px; */
    /* align-self: end; */
    width: 45vw;
}

.abtmeVector{
    pointer-events: none;
    position: absolute;
    margin-top: -70vh;
    margin-left: 36vw;
    height: 30vh;
}

.abtmeDesc{
    align-self: flex-end;
    /* margin-bottom: 50px; */
    padding: 20px;
    width: 30vw;
    justify-self: flex-end;
}

.outlined{
    background-image: url('../img/circle_thick.svg');
    background-repeat: no-repeat;
    background-size: 90%;
    background-position: center;
    font-weight: bold;
    font-style: italic;

    padding: 5px 5px;
    display: inline-block;
}
/** -------------------------------------- my skills */

/*! PENULTIMA SECCAO */
#mysrvcs{
    /* display: none; */
    /* display: flex; */
}
.outlinedSkill{
    background-image: url('../img/circle.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
}


.skillsVector{
    width: 5vw;
    /* !!!!!!!!!!!!!!!!!!!!!!!! NOT SURE ABOUT THIS ONE */
    animation: rotateImage 5s linear infinite;
    /* animation-play-state: paused; */
}
.greenVector{
    filter: invert(71%) sepia(18%) saturate(721%) hue-rotate(50deg) brightness(92%) contrast(86%);
}
.skillsBody{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    height: 90%;
    width: 100vw;
}
.hoverInfo{
    padding-right: 60px;
}

.skillsContent{
    justify-content: center;
    width: 100vw;
}

.marquee-container {
    overflow: hidden;
    margin-left: -2%;
    will-change: transform;
}

.marquee-track {
    display: flex;
    flex-direction: column;
    /* gap: 20px; */
}

.marquee-line {
    display: flex;
    /* gap: 40px; */
    white-space: nowrap;
    width: max-content;
}

/* Right to Left Animation */
.right-to-left {
    animation: scrollRightToLeft 30s linear infinite;
    animation-play-state: paused;
}

/* Left to Right Animation */
.left-to-right {
    animation: scrollLeftToRight 30s linear infinite;
    animation-play-state: paused;
}

/* @keyframes scrollRightToLeft {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes scrollLeftToRight {
    0% {
        transform: translate3d(-50%, 0, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
} */

@keyframes scrollRightToLeft {
    0% {
        transform: translateX(0); /* Force GPU acceleration */
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes scrollLeftToRight {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

/* Optional: Add hover pause */
.marquee-container:hover .marquee-line {
    /* animation-play-state: paused; */
    animation-play-state: running;
    /* !!!!!!!!!!!!!!!!!!!!!!!! NOT SURE ABOUT THIS ONE - either it always rotates or just rotates on hover */
    /* .skillsVector{
        animation-play-state: running;
    } */
}

/* Style your spans */
.marquee-line span {
    padding: 5px 0;
    display: inline-block; /* Helps with rendering */
}

/* Style your images */
.marquee-line img {
    display: inline-block;
    vertical-align: middle; /* Aligns with text */
    flex-shrink: 0; /* Prevents image from shrinking */
}



/** ----------------------------------------- contact me*/
.socialsList{
    width: 35%;
}

.contactContent{
    display: flex;
    div:nth-child(2){
        margin-top: 25vh;
        margin-right: 20px;
    }
}

.contact-item:hover {
    /* padding-left: 1vw; */
    transition: 0.1s ease;
    transition-delay: -3s;
    span:nth-child(2):before{
        content: "> ";
    }
    a:before{
        content: "";
    }
}

/* ALTERNATIVE FOR NOT HAVING IT SPIN */
#contactme{
    /* background-image: url("../img/vector_bg.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15vw 40vh; */
    /* animation: rotateImage 20s linear infinite; */
}

.rotator-div{
    /* clip-path: inset(0 0 66% 0); */
    position: absolute;
    overflow: hidden; /* This clips/cuts off the content */
    height: 62vh; /* Or whatever height you want - adjust this */
    width: 100vw; /* Or your desired width */
    margin-top: 30vh;
    /* margin-bottom: -60vh; */
    margin-left: -20vw;
    pointer-events: none;

    justify-self: flex-start;
    justify-content: flex-end;
}

.background-rotator{
    animation: rotateImage 20s linear infinite;
    /* z-index: 5; */
    width: 55vw;
    position: absolute;
    

    /* justify-self: center;
    justify-content: center; */
    /* text-align: center; */
    /* left: 50%;
    right: 50%; */
    /* margin: 0 50vw 0; */
}

@keyframes rotateImage {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}





/** --------------------------------------- for the footer */
.BackToTop{
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: center;
    position: relative;
    overflow: hidden;
    height: 16vh;
    width: 10%;
    margin-top: 3vh;
    /* margin-bottom: -13vh; */
}

button{
    background-color: transparent;
    border: none;
    font-family: 'N27', sans-serif;
    font-size: 2vw;
    margin-bottom: -15vh;
    /* margin-bottom: -5vh; */
}

@keyframes subtleJump {
    0% {
        transform: translateY(0);
    }
    50% {
        /* transform: translateY(-9px); */
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}

button:hover {
    animation: subtleJump 0.4s ease;
}

.menu{
    /* left: 691px; */
    position: fixed;
    top: -100px;
    width: 100vw;
    height: 105vh;
    background-color: #F0F0EB;
}


/* ** ----------------------------------INDIVIDUAL WORKS PAGE -------------------------------------- */

.displayImgs{
    width: 70%;
    align-items: end;
    display: grid;
    row-gap: 20px;
    flex-wrap: wrap;
}
.displayImg{
    /* align-self: flex-end;
    justify-content: flex-end;
    justify-self: flex-end; */
    margin-left: 10px;
    width: 49%;
    aspect-ratio: 16 / 8;
    object-fit: cover;
    /* height: ; */
}

.displayVideo{
    width: 65%;
    /* aspect-ratio: 19 / 6; */
}

#linksList{
    /* width: 20%; */
    text-align: start;
}
#projectDesc{
    width: 30%;
}

#nextUp{
    display: flex;
    flex-direction: row;
    justify-content: end;
    margin-top: 60px;

    /* position: absolute;
    bottom: 0; */
    /* margin-bottom: 20px; */

    a{
        font-style: normal;
    }
}

.picsCloseUp{
    position: fixed;
    top: -40px;
    width: 100vw;
    height: 105vh;
    background-color: #12111396;
    align-items: center;
    justify-content: center;
    margin-left: -2%;
}
.PicBig{
    width: 80%;
}
#closeUpImg{
    width: 100%;
    aspect-ratio: 16 / 8;
    object-fit: cover;
}















/** scroll bar ------------------------------*/
.scroll-container {
  overflow-y: auto;
  
  /* 1. Standard Properties (Firefox / Modern Standards) */
  scrollbar-width: thin;          /* Options: auto | thin | none */
  scrollbar-color: #741b1b #f1f1f1; /* Format: [thumb color] [track color] */
}

/* 2. WebKit Pseudo-elements (Chrome, Safari, Edge) */
.scroll-container::-webkit-scrollbar {
  width: 8px;     /* Width of vertical scrollbar */
  height: 8px;    /* Height of horizontal scrollbar */
}

.scroll-container::-webkit-scrollbar-track {
  background: #f1f1f1; /* Color of the tracking area */
  border-radius: 4px;
}

.scroll-container::-webkit-scrollbar-thumb {
  background: #888888; /* Color of the draggable handle */
  border-radius: 4px;
}

.scroll-container::-webkit-scrollbar-thumb:hover {
  background: #555555; /* Color when hovering over the handle */
}










/** --------------------------------------- screens */
@media (max-width: 850px) {
    body{
        font-size: 15px;
    }
    .coverOptions{
        margin-top: 15%;
        /* margin-left: -5%; */
        /* width: 98vw;
        height: 50vh; */
    }
}