/*General*/

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  -o-tab-size: 4;
     tab-size: 4;
/*  font-family: Poppins, sans-serif;*/
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
 /* background-image:  radial-gradient(#000 0.5px, transparent 0.5px), radial-gradient(#000 0.5px, #fff 0.5px);
background-size: 20px 20px;
background-position: 0 0,10px 10px;*/
/*background-color: #fff;
  background-size: 20px 50px;
  background-image:  repeating-linear-gradient(to right,   #f2f2f2,   #f2f2f2 1px,  #fff 1px,  #fff);
*/
background-color: #fff;
background-image:  linear-gradient(#f2f2f2 1px, transparent 1px), linear-gradient(to right, #f2f2f2 1px, #fff 1px);
background-size: 20px 20px;
  color:#000;
  margin: 0;
  /* 1 */
  line-height: 1.5;
  /* 2 */
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-size: 16px;
}

body.freeze{
  overflow-y: hidden;
}

body.nooverflow{
  overflow: hidden;
}

body.nooverflow main{
  filter: blur(8px);
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

p{
  line-height: 2;
}

a {
  color: inherit;
  text-decoration: inherit;
  text-decoration: none;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
 /* font-family: Anonymous Pro, monospace;*/
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}

sub {
bottom: -0.25em;
}

sup {
top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
text-indent: 0;
/* 1 */
border-color: inherit;
/* 2 */
border-collapse: collapse;
/* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 1 */
font-weight: inherit;
/* 1 */
line-height: inherit;
/* 1 */
color: inherit;
/* 1 */
margin: 0;
/* 2 */
padding: 0;
/* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
/* 1 */
background-color: transparent;
/* 2 */
background-image: none;
/* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
-webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}

fieldset {
margin: 0;
padding: 0;
}

legend {
padding: 0;
}

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

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1;
/* 1 */
color:#404040;
/* 2 */
}

input::placeholder,
textarea::placeholder {
opacity: 1;
/* 1 */
color: #9ca3af;
/* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
 This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
/* 1 */
vertical-align: middle;
/* 2 */
}

/*General*/

.section-title{
  mix-blend-mode: difference;
  padding: 0 1vw;
  padding-bottom: 3vw;
}

.red{
  color:#ff4444;
}

#cursor{
  border-radius: 50px;
  background: #00ffff;
  height: 50px;
  width: 50px;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 50;
}

.columns{
  display: flex;
  justify-content: space-between;
  width:100%;
}

.link-btn {
  border: 2px solid #f5f3f0;
  border-radius: 50px;
  font-size: 10px;
  overflow: hidden;
  position: relative;
  display: block;
  padding:2px 10px;
}

.link-btn::before,
.link-btn::after {
 content: '';
  position: absolute;
  width: 100%;
  left: 0;
}
/*.link::before {
  background-color: #54b3d6;
  height: 2px;
  bottom: 0;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
}*/
.link-btn::after {
  content: attr(data-replace);
  height: 100%;
  top: 0;
  padding:2px 10px;
  transform-origin: 200% 50%;
  transform: translate3d(0, 100%, 0);
  transition: transform .5s /*cubic-bezier(1, 0, 0.30, 1)*/ease-in-out;
}

/*.link:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}*/
.link-btn:hover::after {
  transform: translate3d(0, 0, 0);
}

.link-btn span {
  display: block;
  transition: transform .5s /*cubic-bezier(1, 0, 0.30, 1)*/ease-in-out;
}

.link-btn:hover span {
  transform: translate3d(0, -200%, 0);
}

.link{
  font-size: 10px;
}

.accent-t{
  color:#00ffff;
}

.accent-b{
  background:#00ffff;
}

.left{
  text-align: right;
}

.half{
  width:50%;
}

.seventy{
  width:70%;
}

.row-s{
  display: flex;
  justify-content: flex-start;
}

.row-e{
  display: flex;
  justify-content: flex-end;
}

.medium{
  font-size: clamp(1.5625rem, 1.5625rem + 1.3021vw, 3.125rem);
  line-height:1.2em;
}

.big{
  /*font-size: clamp(1.875rem, 1.875rem + 7.8125vw, 11.25rem);*/
  font-size: clamp(0.875rem, 0.875rem + 7.0833vw, 9.375rem);
  line-height: 1.3;
}

.cursive{
  font-family: "Noto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
 /* font-variation-settings:
    "wdth" 100;*/
}

.shadow {
  font-family: "Shadows Into Light", cursive;
  font-weight: 400;
  font-style: normal;
}


.slide-up {
  transform: scale(0);
  transform-origin: center center;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
     -ms-transition: all 1s ease-out;
      -o-transition: all 1s ease-out;
             transition: all 1s ease-out;
        
                  /*transition-delay: 0.1s;*/
}

.slide-up.visible {
   transform: scale(1);
  transform-origin: center center;
}


.slide-in {
  position: relative;
  overflow: hidden;
  opacity: 0;
  -webkit-transform: translateY(80px);
       -moz-transform: translateY(80px);
          -ms-transform: translateY(80px);
           -o-transform: translateY(80px);
                  transform: translateY(80px);
  -webkit-transition: all 0.6s ease-out;
       -moz-transition: all 0.6s ease-out;
          -ms-transition: all 0.6s ease-out;
           -o-transition: all 0.6s ease-out;
                  transition: all 0.6s ease-out;
                  /*transition-delay: 0.1s;*/
}

.slide-in.visible {
  opacity: 1;
  -webkit-transform: none;
       -moz-transform: none;
          -ms-transform: none;
           -o-transform: none;
                  transform: none;
}

.col-25{
  width:25%;
}

.col-30{
  width:30%;
} 

.col-50{
  width:50%;
} 

.col-70{
  width:70%;
}


.dot{
  position:relative;
  /*font-size: clamp(1.125rem, 1.125rem + 0.1042vw, 1.25rem);*/
  margin-left: 20px;
}

.dot::before{
  position: absolute;
  top: 8px;
  left: -15px;
  content: "";
  height: 11px;
  width: 11px;
  background: #ff4444;
  border-radius: 50%;
}

#line{
  display: flex;
  justify-content: center;
  mix-blend-mode: difference;
}

.line{
  height:1px;
  width:100%;
  background: #333;
  margin: 0 3vw;
}


.glitch{
  position:relative;
}

.glitch::after{
  position: absolute;
  top:5%;
  left:0;
  content: attr(data-replace);
  opacity: 0.8;
  }

.glitch::before{
  position: absolute;
  top:5%;
  left:0;
  content: attr(data-replace);
  opacity: 0.8;
    color: #0ff;
    z-index: -1;
  }

.glitch::after{
    color: #f0f;
    z-index: -2;
  }
.glitch:hover::before {
            animation: glitch .5s cubic-bezier(.25, .46, .45, .94) both infinite
        }
.glitch:hover::after {
            animation: glitch .3s cubic-bezier(.25, .46, .45, .94) reverse both infinite
}
    

@keyframes glitch {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
    20% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px);
        transform: skewX(5deg);
    }
    40% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px);
    }
    60% {
        -webkit-transform: translate(5px, 5px);
        transform: translate(5px, 5px)
    }
    80% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px)
    }
    to {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

#marquee{
  height: auto;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.marquee {
  /*font-family: "Passion One", sans-serif;
  font-weight: 400;*/
  /*background: linear-gradient(60deg, red, yellow, red, yellow, red);*/
  height:auto;
  white-space: nowrap;
  overflow: hidden;
  display: flex;
 /* background-clip: text;
  color: rgb(0 0 0 / 20%);*/
}

.marquee span {
 /* font-size: clamp(1.125rem, 1.125rem + 0.1042vw, 1.25rem);*/
  font-size: clamp(1.5625rem, 1.5625rem + 1.3021vw, 3.125rem);
 /*font-size: clamp(0.875rem, 0.875rem + 7.0833vw, 9.375rem);*/
    line-height: 1.4;
    display: inline-flex;
  animation: marquee 40s linear infinite;
}

@keyframes marquee {
  100% {
  transform: translate3d(-100%, 0, 0);
}
}

/**/

/*Header*/

.header-left{
  position: fixed;
  top:5vh;
  left:3vw;
  z-index: 2;
}

.header-right{
  position: fixed;
  top:5vh;
  right:3vw;
  z-index: 10;
  display: inline-flex;
}

.switch{
  position: relative;
  border: 1px solid #333;
  border-radius: 50px;
  height: 18px;
  width: 40px;
  display: none;
  justify-content: center;
  margin-left: 10px;
}

.logo{
  color:#fff;
  mix-blend-mode: difference;
}

.switcher{
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  height: 14px;
  width: 14px;
  border-radius: 100%;
  background: #333;
  transform: translateX(0);
  transition: all 0.3s ease-in;
}

.switcher.active{
  transform: translateX(22px);
}

.light{
  display: flex;
  justify-content: center;
  align-items: center;
  width:50%;
  text-align: center;
}

.dark{
  display: flex;
  justify-content: center;
  align-items: center;
  width:50%;
}

/*EXPERIENCE*/
#experience{
  background: #f5f3f0;
}

/*SERVICES*/

#services{
  padding-top:10vw;
  padding: 4vw; 

}

.services{
  color:#555;
  display: flex;
  justify-content: space-between;
}

/*WORKS*/

#works{
  border-top: 1px solid #555;
  border-bottom: 1px solid #555;
  background: #000;
  padding:3vw;
}

#works h2{
position: sticky;
top:50px;
}

.work-grid{
  display: flex;
  /*flex-flow: row wrap;*/
  column-gap: 20px;
  row-gap: 20px;
}

.work-item{
flex:30vw;
}

.item-cont{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
}

.item-cont svg{
  width: 1.041vw;
  height: 1.041vw;
}


/*.work-item:nth-child(1) {
width:100%;
}

.work-item:nth-child(2) {
  width:40%;
  }

  .work-item:nth-child(3) {
    width:60%;
    } 
    
    .work-item:nth-child(4) {
      width:100%;
      }     
  
*/
/*
.work-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, 1fr);
}

.work-item{

}

.work-item:nth-child(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.work-item:nth-child(2) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.work-item:nth-child(3) {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}

.work-item:nth-child(4) {
  grid-column: 2 / 3;
  grid-row: 4 / 5;
}
*/

#link{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 3vw;
}

.banner{
  font-size: 1rem;
  background: #ff4444;
  color:#f5f3f0;
  padding:10px;
  border-radius: 10px;
position: absolute;
top:10px;
left:20px;
transform: rotate(-10deg);
}

.outline-l{
  color: fff;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px #fff;
}

.blue-b{
  background: #66ccff;
}

/*GOODS*/

#good{
  display: none;
background: #1a1818;
padding: 0 3vw;
}

/* horizontal scroll */

#horizontal-scoll {
  display: flex;
  padding: 50px 0;
}

.horizontal-scoll-wrapper {
  overflow: hidden;
  /*height: 525px;*/
  height:400px;
}

.horizontal {
  display: flex;
  height: 100%;
}

.horizontal > div {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0 20px;
}

.horizontal > div:first-child {
  padding: 0 20px 0 3vw;
}

.horizontal > div:last-child {
  padding: 0 3vw 0 20px;
}

.horizontal .item {
 /* width:37.5rem;*/
 width:45%;
  aspect-ratio: 4/3;  
}

.horizontal .card {
  border: 1px solid #555;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  border-radius:10px;
  width:100%;
  padding:3vw;
  min-height:250px;
}

.horizontal-title{
  text-transform: uppercase;
  color:#555;
  font-weight: 700;
  padding: 5px 0;
  mix-blend-mode: difference;
}

.title-block{
  display: flex;
  justify-content: space-between;
  padding: 0 4vw;
  padding-top: 4vw;
}

.see-project{
  color:#555;
  font-style: italic;
}


#projects{
  padding-top:4vw;
}

#projects h2{
  position: sticky;
  top:50%;
  transform: translateY(-50%);
  color:#555;
  font-size: 100px;
  text-align: center;
  mix-blend-mode: difference;
}

.project-box{}

.project{
background: #f5f3f0;
max-width: 400px;
}

.project-title{
  padding: 0 4vw;
}

.thumb-project{
  position: relative;
  overflow: hidden;
}

.thumb{
width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  object-position: center;
}

.overlay{
  position: absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background: #141414;
  opacity: 0.2;
  transition: all 0.3s ease;
}

.view{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  backdrop-filter: blur(0);
  background-color: rgb(184,251,1);
  border-radius: 20px;
  color:#555;
  padding: 20px 40px;
  opacity:0;
  transition: all 0.3s ease;
  z-index: 4;
}

.card:hover .view{
  backdrop-filter: blur(2px);
  opacity:1;
}

.card:hover .overlay{
  opacity:0.4;
}


/*CONTACT*/

#contact{
  color: #555;
  width:100%;
  padding-bottom:10vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.square-link{
  position: relative;
  padding: 10px 20px;
}

.corner{
  width: 10px;
  height: 10px;
  transition: transform .2s ease-in-out;
}

.corner.top-lft{
  border-left: 1px solid #555;
  border-top: 1px solid #555;
  inset: 0% auto auto 0%;
  transform: translate(-.5rem,-.5rem);
  position: absolute;
}

.corner.top-rgt{
  border-right: 1px solid #555;
  border-top: 1px solid #555;
  inset: 0% 0% auto auto;
  transform: translate(.5rem,-.5rem);
  position: absolute;
}

.corner.bottom-lft{
  border-left: 1px solid #555;
  border-bottom: 1px solid #555;
  inset: auto auto 0% 0%;
  transform: translate(-.5rem,.5rem);
  position: absolute;
}

.corner.bottom-rgt{
  border-right: 1px solid #555;
  border-bottom: 1px solid #555;
  inset: auto 0% 0% auto;
  transform: translate(.5rem,.5rem);
  position: absolute;
}


.square-link:hover .corner.top-lft{
  transform: translate(-.2rem,-.2rem);
}

.square-link:hover .corner.top-rgt{
  transform: translate(.2rem,-.2rem);
}

.square-link:hover .corner.bottom-lft{
  transform: translate(-.2rem,.2rem);
}

.square-link:hover .corner.bottom-rgt{
  transform: translate(.2rem,.2rem);
}

/*Next*/

#next{
  border-top:1px solid #333;
  padding:10vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*Footer*/

footer{
 /* animation: gradient-animation 18s ease infinite;  */
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin:10 vw 3vw;
  margin-bottom: 0;
  overflow: hidden;
  height:100vh;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


.bkg-title{
  position: absolute;
  top:0;
  left:0;
  color: #555;
}


#hero-line{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  
}

ul.rotator li > span {
	display:inline-block;	
}

.cols2 {
	display: flex;
	/* outline:1px solid green; */
}

#list{
  display: flex;
  align-items: center;
  height:100vh;
  padding:0 3vw;
}

#first{
 /* background: url(https://www.elenagatto.com/wp-content/uploads/2024/11/deascuola-cover-work.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;*/
  padding:100px 4vw;
  color:#555;
  font-weight: 300;
}

#first p{
  margin-bottom:3vw;
}

.mai{
 
}

.me{
  display: flex;
  flex-direction: column;
  align-items: end;
  color:#555;
  padding: 4vw 0;
}

.project-img{
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height:300px;
  width:400px;
}

.img1{
  background: url(https://www.elenagatto.com/wp-content/uploads/2024/11/deascuola-cover-work.jpg);
}

/*.me p::first-letter {margin-left:3em;}*/

#banner{
 /* border-top-left-radius: 25px;
  border-top-right-radius: 25px;*/
  padding: 2vw 0;
  color: #333;
  font-size: 100px;
  margin: 6vw 0;
  margin-bottom: 0;
}

#services2{
  color:#555;
  padding:6vw 4vw;
  padding-top: 4vw;
}

.start{
  display: flex;
  justify-content: flex-start;
}

.end{
  display: flex;
  justify-content: flex-end;
}

.center{
  display: flex;
  justify-content: center;
}

.logo-footer{
  color:#111;
  font-size: 180px;
  text-align: center;
  line-height: 1;
}

.title-sticky{
  position: sticky;
  top:20vw;
}

.green{
  color:#61fc64
}

.blue{
  color:#0ff;
}

.pink{
  color:#ffb4dc;
}

.white{
  color:#fff;
}

#hero-top{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: center;
 /* background: url(https://www.elenagatto.com/wp-content/uploads/2024/11/basilicosecco-cover-work.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  backdrop-filter: blur(12px);
  background-color: #ffffff1a;*/
  height: 100vh;
  padding:0 4vw;
  color:#555; 
}


.title-top{
  display: flex;
  justify-content: flex-start;
  width: 100%;
}

.title-bottom{
  display: flex;
  /*justify-content: flex-end;*/
  width: 100%;
  line-height: 0.8;
  color:#61fc64;
  font-weight: 600;
}

#hero-top .marquee{
  z-index: 6;
}

#hero-me{
  display: flex;
 /* background-color: rgb(0, 0, 0);
  background-image: radial-gradient(at 3% 77%, rgb(254, 67, 161) 0px, transparent 50%), radial-gradient(at 87% 9%, rgb(216, 133, 234) 0px, transparent 50%), radial-gradient(at 85% 30%, rgb(116, 183, 241) 0px, transparent 50%), radial-gradient(at 35% 24%, rgb(90, 128, 252) 0px, transparent 50%), radial-gradient(at 37% 56%, rgb(246, 156, 219) 0px, transparent 50%);*/
  position: fixed;
  top:0;
  z-index: -1;
 /* background: url(https://www.elenagatto.com/wp-content/uploads/2024/11/deascuola-cover-work.jpg);*/
}

#hero-me::after{
  content: "";
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  height:100%;
  width:100%;
  /*background: rgba(255,255,255,0.08);*/
  backdrop-filter: blur(5px);
}

#arrow{
  display: none;
  justify-content: flex-end;
  height:300px;
}

.arrow{
  position:relative;
  height:100px;
  width:200px;
  transform: rotate(90deg);
}

.arrow-down-one{
  position: absolute;
  transform:translateX(0) ;
   z-index: 0;
}

.arrow-down-one svg, .arrow-down-two svg, .arrow-down-three svg{
height:100px;
width:50px;
}

.arrow-down-two{
  position: absolute;
 transform:translateX(10px) ;
  z-index: 1;
}

.arrow-down-three{
  position: absolute;
  transform:translateX(20px) ;
   z-index: 2;
}

.y-badge{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#myself{
  display: none;
  justify-content: flex-end;
  padding: 0 3vw;
}

.myself{
  border: 1px solid #fff;
  border-radius: 25px;
  transform: rotate(15deg);
}

#myself img{
border:30px solid #fff;
transform: rotate(4deg);
}

.round{

}

.badges{
  display: flex;
  align-items: flex-end;
  column-gap: 15px;
}

.badge{
  border-radius: 5px;
  border-top-right-radius: 25px;
  padding:3vw;
  height:100px;
  aspect-ratio: 1/1;
}

.c{
  text-align: center;
}

.main-text{
  display: flex;
  align-items: flex-end;
  width:100%;
}

.claim{
  margin-right: 25px;
}

.glass-effect{
  backdrop-filter: blur(2px);
  background-color: #ffffff1a;
}

.link{
  display: inline-flex;
}

.link svg{
  width: 1.041vw;
  height: 1.041vw;
}

#two{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height:100vh;
  padding:0 3vw;
}

#three{
  padding:0 3vw;
  margin-bottom: 10vw;
}

.line-top{
  display: flex;
  justify-content: flex-start;
  width: 100%;
}

.line-bottom{
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.img-bck{
position: relative; 
border:1px dashed #ffb4dc;
border-radius: 25px;
height: 360px;
width: 300px;
}

#my-photo{
  position: absolute;
  bottom:-40px;
  right:10px;
  border-radius: 25px;
}

.feat-img-cont{
  display:flex;
  justify-content:flex-end;
}

.feat-img-box{
  position:relative;
}
.space{
  padding:0 3vw;
}

.small{
  font-size: 16px;
}

.logo-dot{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.logotext{
  height:30px;
  width:30px;
  border-radius: 50%;
  background: #fff;
  color:#000;
}

#five{
  display: none;
  padding:10vw 3vw;
}

.p-box{
display: flex;
/*flex-wrap: wrap;*/
column-gap: 2%;
row-gap: 2%;
}

.p-item{
  position: relative;
  background: url(https://www.elenagatto.com/wp-content/uploads/2024/11/deascuola-cover-work.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;
  height:400px;
  width:20%;
}


.p-item {
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover!important;
  flex-grow: 1;
  transition: all 300ms ease-in-out;
  margin-bottom: 2%;
} 
.p-item:hover {
    flex-grow: 4.3;
  }

  .p-item:hover .overlay{
    opacity:0;
  }

 .title-item{
position: absolute;
bottom:10px;
left:10px;
 } 

.space-w{
 display: inline-block; 
width: 8vw;
height: 1px;
}


#third{
padding: 3vw;
}



 /*BTN*/

 .btn-animate-t {
  position: relative;
  display: inline-block;
  overflow: hidden;
  color:#000;
  text-align: center;
  
}

.btn-animate-t.border {
  border:1px solid #fff;
  border-radius: 50px;
  padding: 2px 10px;
}

.btn-animate-t-1 {
  display: block;
  transition: all .37s ease-in-out, opacity .37s linear;
}

.btn-animate-t-2 {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translate(0,100%);
  transition: all .37s ease-in-out, opacity .37s linear;
}

.btn-animate-t.border .btn-animate-t-2 {
  padding: 2px 0;
}

.btn-animate-t:hover{
  cursor: pointer;
}

.btn-animate-t:hover .btn-animate-t-1 {
  opacity: 0;
  transform: translate(0,-100%);
}

.btn-animate-t:hover .btn-animate-t-2 {
  opacity: 1;
  transform: translate(0,0);
}

.video-bkg {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}


.video-bkg > .bg-video {
  width: 30%;
}

.video-box {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}


.video-box > .bg-video {
  width: 100%;
}


/* background-color and color should be the same as the below otherwise it won't work */

.video-box > .text {

  position: absolute;
  inset: 0;
  display: grid;
  background-color: #000;
  color: #fff;
  /* Mix Blend Mode does the all magic */
  mix-blend-mode: multiply;
  user-select: none;
}

.xs{
  font-size:12px;
}

.outline{
  color: #fff;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px #fff;
}

#globe{
  position: fixed;
  top:15%;
  right:20%;
  /*transform: translate(-50%, -50%);*/
  width:200px;
  height:200px;
  border-radius: 100%;
  box-shadow: 0px 0px 20px 0px rgba(255,255,255,0.5);
  overflow: hidden;
  background: linear-gradient(300deg,deepskyblue,darkviolet,blue);
  background-size: 180% 180%;
}

#globe img{
  object-fit:cover;
  object-position: center;
}

footer .marquee{
  margin-bottom: 50px;
}


/*Last*/

#uno{
  display: flex;
  flex-direction: column;
  justify-content: center;
  height:100vh;
  padding: 0 3vw;
}

.thin{
  font-weight:300;
}

.payoff{
  display: flex;
  justify-content: flex-end;
}

#about{
  display: flex;
  justify-content: flex-end;
  padding: 0 3vw;
}

#about div{
mix-blend-mode: difference;
}


#hero-home{
  display: flex;
  justify-content: space-between;
}

body {
  margin: 0;
  overscroll-behavior: none;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  transition: all 0.2s ease-out;
}

#wrapper {
  overflow: hidden;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#contentt {
  overflow: visible;
  width: 100%;
}

/*Hero*/

#hero{
height:100vh;
width:100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.text {
 /*position: fixed;
  top: 50%;
  text-align: center;
  width: 100%;
  transform: translateY(-50%) scale(1);*/
  color: #000;
   text-align: center;
   width: 100%;
  /* -webkit-text-stroke-width: 1.5px;
   -webkit-text-stroke-color: white;*/
   transition: all 0.2s ease-out;
}

#hero.works .text{
   transform: translateY(0) scale(1);
}

#hero.single .text{
   transform: translateY(0) scale(1);
}

#hero.works{
position: fixed;
top: 0;
left:0;
z-index: -2;
transition: all 0.2s ease-out;
/*background-color: #000;
background-image:  radial-gradient(#555 0.5px, transparent 0.5px), radial-gradient(#555 0.5px, #000 0.5px);
background-size: 20px 20px;
background-position: 0 0,10px 10px;*/
background-color: #fff;
background-image:  linear-gradient(#f2f2f2 1px, transparent 1px), linear-gradient(to right, #f2f2f2 1px, #fff 1px);
background-size: 20px 20px;
/*  background-size: 20px 50px;
  background-image:  repeating-linear-gradient(to right,   #222,   #222 1px,  #000 1px,  #000);*/
}

#hero.single h1{
  text-transform: uppercase;
}

 #hero.blured{
  filter:blur(5px);
}

#hero.works.blured .text{
transform: translateY(0) scale(0.95);
}

#hero.single.blured .text{
  transform: translateY(0) scale(0.95);
}



  #body.page-template-page-about-php{
/*  background-color: #fff;
  background-size: 20px 50px;
  background-image:  repeating-linear-gradient(to right,   #f2f2f2,   #f2f2f2 1px,  #dcd9d6 1px,  #dcd9d6);*/
 /* background-color: #fff;
background-image:  radial-gradient(#000 0.5px, transparent 0.5px), radial-gradient(#000 0.5px, #fff 0.5px);
background-size: 20px 20px;
background-position: 0 0,10px 10px;
color:#000;*/
 }

 #body.page-template-page-about-php{
  padding: 3vw;
 }

 #body.page-template-works .text{
  color:#000;
 }

.marquee.home{
  position: fixed;
  top: 25%;
  left:0;
  text-align: center;
  width: 100%;
  transform: translate(0,-25%);
  font-family: "Cormorant Infant", serif;
  font-weight: 400;
  font-style: normal;
  /*font-size: 6vw;*/
  line-height: 1.2;
  color: #fff;
  mix-blend-mode: difference;
}

.claim-home{
  position: fixed;
  top: 70%;
  left:50%;
  text-align: center;
  width: 100%;
  transform: translate(-50%,-70%);
  color:#fff;
  mix-blend-mode: difference;
}

.outline-text {
  color: transparent;
  -webkit-text-stroke-width: 1.5px;
  -webkit-text-stroke-color: white;
  z-index: 2;
}

.filter-text {
  mix-blend-mode: screen;
  color: #804691;
  z-index: 2;
}

.images {
  padding-top: 110vh;
  padding-bottom:5%;
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 110vh;
  height: 100%;
  display: grid;
  /*grid-template-columns: repeat(20, 2%);*/
  grid-template-columns: repeat(20, 5%);
  /*grid-template-columns: auto auto auto;*/
  grid-template-rows: repeat(20, 3%);
  justify-content: center;
  justify-items: center;
  align-items: center;
  z-index: 1;
  object-fit: cover;
}

.content__slide-item {
  width: 100%;
  height: 100%;
  position: relative;
}

.images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}

.images img:hover {
  filter: grayscale(0);
}

.img:nth-child(1) {
  grid-area: 1/1/6/8;
}

.img:nth-child(2) {
  grid-area: 3/12/8/21;
}

.img:nth-child(3) {
  grid-area: 14/1/18/10;
}

.img:nth-child(4) {
  grid-area: 24/15/30/20;
}

/*img:nth-child(5) {
  grid-area: 16/12/20/19;
}

img:nth-child(6) {
  grid-area: 20/2/25/9;
}

img:nth-child(7) {
  grid-area: 22/11/24/20;
}

img:nth-child(8) {
  grid-area: 26/5/30/15;
}*/

#contact-link{
  position:fixed;
  bottom: 1vw;
  right:3vw;
  font-size: 12px;
  color:#fff;
  mix-blend-mode: difference;
}

#about-link{
  position:fixed;
  top: 1vw;
  right:3vw;
  z-index: 10;
}

 .sliding-btn{
   display: inline-flex;
   text-transform: uppercase;
}

.yellow-btn{
   padding: 5px 15px;
   font-size: 12px;
  background: #C6F91F;
  border: 2px solid #000;
}

.black-btn{
   padding: 5px 15px;
   font-size: 12px;
  background: #000;
  border: 2px solid #C6F91F;
}

.black-btn .btn-animate-t-1,.black-btn .btn-animate-t-2{
  color:#C6F91F;
}

#back-link{
  position:fixed;
  bottom: 1vw;
  left:3vw;
  font-size: 12px;
  color:#fff;
  mix-blend-mode: difference;
}

#website-link{
  text-align: center;
}

#next-link{
  position:fixed;
  bottom: 1vw;
  right:3vw;
}


/*.single-hero{
  position: fixed;
  top:0;
  left:0;
  z-index: -1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height:100vh;
}
*/

.thecontent{
/*background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%);*/
  padding: 50px 0;
}

.back-btn{
 
  transform: translateX(-50%) rotate(45deg);
  border:1px solid  #000;
  background: #C6F91F;
  color: #000;
  border-radius: 50%;;
  height:50px;
  width:50px;
  z-index: 10;
  display: none;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease-in-out;
}

.back-btn .btn-line{
  display: block;
  height:2px;
  width:30px;
  background:  #6e685e;
}

.btn-line.one{
  transform: rotate(90deg);
  transform-origin: center center;
  position: absolute;
  top: 50%;
  left: 20%;
}

.btn-line.two{
  transform: rotate(0);
}

.back-btn:hover{
  transform: translateX(-50%) rotate(315deg);
}

.single-hero{
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  height:100vh;
}

/*.single-featured{
  position: absolute;
  left:0;
  top:0;
  height:100%;
  width:100%;
}
.single-hero::before{
  content: "";
  position: absolute;
  top:0;
  left:0;
  background: #000;
  opacity:0.8;
  height:100%;
  width:100%;
  z-index: 3;
}
*/

.single-claim{
 margin-bottom:50px;
}

.single-info{
padding:0 3vw;
}

.single-weblink{
  color:#ffed00;
  text-transform: uppercase;
  padding-bottom: 6vw;
}

.single-nav{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width:100%;
  margin-top: 100px;
  border-top:2px solid #222;
  background: #000;
  padding: 50px 0;
}

/*
#body.single-project.background{
  background: #fff;
  color:#000;
}
*/
.next-btn{
  max-width: 30vw;
  text-align: center;
}

.arrow-link{
  display: inline-flex;
  align-items: center;
  margin-top: 15px;
}

.next-link{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  z-index: 2;
}

.next-title{
  color:#fff;
}

/*About*/

/*.page-template-page-about{
  background: #ffed00;
  color:#000;
}
*/


.page-title{
  margin-top:3vw;
  padding: 0 3vw;
}

.about-img{
border-radius: 50%;
  height:100px;
  width:100px;
  filter: grayscale(100%);
  transition: all 0.2s ease-out;
}
.about-img:hover{
  filter: grayscale(0);
}

/*Menu*/
#menu-box.active .cont{
  padding:3vw;
  transform: translateY(0);
  opacity: 1;
  transition: opacity 0.5s, transform 0.3s;
    transition-delay: 0s, 0s;
  transition-delay: 1s;

  @starting-style {
    transform: translateY(20px);
    opacity: 0;
  }
}


#menu-box{
  position: fixed;
  top:0;
  right:0;
  bottom:0;
    background: #C6F91F;
    display: flex;
    align-items: center;
  /*background: #463C5D;/*#C6F91F #BAB1CD
background-color:  #dcd9d6;*/
/*background-color: #f2f2f2;
  background-size: 20px 50px;
  background-image:  repeating-linear-gradient(to right,   #dcd9d6,   #dcd9d6 1px,  #f2f2f2 1px,  #f2f2f2);
*/
/*background-image: radial-gradient(   #fff 1px, #dcd9d6 1px);
background-size: 20px 20px;*/
  color:#000;
  z-index:15;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
  padding: 0 3vw;
  width:300px;
}

#menu-box.active{
transform: translateX(0);
}

#menu-btn-close{
  position: absolute;
  top:3vh;
  left:3vw;
}

.menu-box ul li{
  margin-bottom: 10px;
}

.menu-right{
  display: flex;
  flex-direction: column;
  align-items: center;
}

#menu-bottom{
  position:fixed;
  bottom:1vw;
  left:0;
  right:0;
  display: flex;
  justify-content: space-between;
  padding: 0 3vw;
}

.info{
  height:100vh;
margin: 0 auto;
margin-bottom: 100px;
}

#mail{
display: flex;
  justify-content: center;
}


#exp{
  position: absolute;
  bottom:20px;
  left:-20px;
  z-index: 10;
  background: #C6F91F;
  border:2px solid #000;
  color:#000;
  font-weight: 700;
  padding: 1vw;
  width:80px;
  text-align: center;
}

/*Loader*/
.loader{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  height:100vh;
  width:100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader.black{
  background: #000;
    z-index: 100;
}

.loader.color, .loader.down{
   background: #C6F91F;
    z-index: 101;
}

.loader.down{
 /* transform: translateY(100%);
   transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);*/
   display: none;
}

.loader.down.up{
  /*transform: translateY(0);*/
  display:block;
}

.coffee{
  position: absolute;
  top:100px;
  left:50%;
  transform: translateX(-50%);
  z-index: 10;
}

/*.ouch{
position: absolute;
  top:100px;
  left:80px;
  transform: rotate(10deg);
  z-index: 10;
}
*/
.no{
position: absolute;
  top:50px;
  left:20px;
  transform: rotate(-10deg);
  z-index: 10;
}

.speech{
  position: absolute;
  top:200px;
  left:30px;
  transform: rotate(10deg);
  z-index: 10;
}

.cat{
position: absolute;
  bottom:50px;
  right:80px;
  transform: rotate(-10deg);
  z-index: 10;
}

.cool{
position: absolute;
  top:50%;
  left:40px;
  transform: translateY(-50%) rotate(-40deg);
  z-index: 10;
}

.paws1{
  position: absolute;
  bottom: 30px;
  right: 350px;
  transform: rotate(30deg);
  z-index: 10;
}

.paws2{
  position: absolute;
  bottom: 50px;
  right: 300px;
  transform: rotate(50deg);
  z-index: 10;
}

.paws3{
  position: absolute;
  bottom:120px;
  left:200px;
  transform: rotate(30deg);
  z-index: 10;
}

.paws4{
  position: absolute;
  bottom:50px;
  right:100px;
  transform: rotate(10deg);
  z-index: 10;
}

.scroll{
  position: absolute;
  bottom:3vw;
  left:3vw;
}

.single-thumb img{
  margin: 0 auto;
}

.passion-one-regular {
  font-family: "Passion One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.passion-one-bold {
  font-family: "Passion One", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.passion-one-black {
  font-family: "Passion One", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.dev-hero{
  position: relative;
}

.dev-hero svg{
  position: absolute;
  bottom:-15px;
  left:0;      
  width:100%;
}

#hero.works h1{
  color: #000;
 /*-webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px #fff/*#ddfe55;*/
  line-height:0.85;
}

.full{
  color:#ddfe55;
  -webkit-text-fill-color: #ddfe55;
  -webkit-text-stroke: 3px #000;
 /*background: #000;*/
}

.item-list{
  display: flex;
  flex-direction: column;
}

.item-title{
 color:#000;
  -webkit-text-fill-color: #000;
  -webkit-text-stroke: 3px #000;
}

.item-list .hand{
 display: none;
 height:50px;
}

.item-list.active .item-title{
  color:#C6F91F;
  -webkit-text-fill-color: #C6F91F;
  -webkit-text-stroke: 3px #000;
}

.item-list.active .hand{
display: block;
}

#about-hero{
  margin-top: 10vh;
}

@media only screen and (max-width: 547px) {

  .columns{flex-wrap: wrap;}
  .col-50{width:100%;}
  .wp-block-column{
    padding:0 25px;
  }

.feat-img-cont{
  justify-content:center;
  margin-top: 100px;
}

.item-list {
  height:200px;
}

.info{
  margin-top:100px;
  height:auto;
}

}

@media only screen and (max-width: 799px) {

  #hero.works {
  position: static;
  margin-top: 20vh;
  }

  #hero{
height:auto;
align-items: start;
margin-top: 10vh;
}

  #wrapper{
    position: static;
  }

  .images {
  padding-top: 10vh;
  padding-bottom: 10vh;
  min-height: 50vh;
}

}
.zigzag{
  position:relative;
}

.zigzag svg{
  position:absolute;
  bottom:-25px;
  left:0;
  width:100%;
  stroke:#fff;
}

.underline{
  position:relative
}

.underline::after{
  content:"";
  position:absolute;
  bottom:2px;
  left:-5px;
  width:100%;
  height:20px;
  background: #C6F91F;
  z-index: -1;
  padding:0 5px;
}