style.css

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}


body {
    background-color: white ;
    color: black;
    font-family: 'Sono', sans-serif;
    font-size: 24px;
}

h1 {
    font-family: 'Noto Serif Display', serif;
}

p {
    margin-bottom: 5%;
}

.purecounter {
    font-size: 40px !important;
}

section {
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 100vh;
    position: relative;
    scroll-snap-align: start;
}


.slide {
    background-color: black;
    color: white;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /*   height: 100%; */
    height: calc(100vh - var(--scrollbar-height));
    min-width: 100vw;
    scroll-snap-align: start;
    z-index: 2;
}

#container {
    display: flex;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    height: 100vh;
}

#slider {
    display: flex;
    overflow-y: hidden;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    height: 100vh;
}

.slide-text {
    width: 70%;
    position: absolute;
    bottom: 10%;
}

#first {
    width: 70%;
    position: absolute;
    bottom: 10%;
}


#arrow {
    content: url(./img/futarrow.png);
    width: auto;
    height: 8vh;
    filter: invert(1);
    overflow: hidden;
    transform: translatex(0px);
    animation: float 2s ease-in-out infinite;
    position: absolute;
    left: 105%;
    bottom: 10%;
}

@keyframes float {
	0% {
		transform: translatex(0px);
	}
	50% {
		transform: translatex(-10px);
	}
	100% {
		transform: translatex(0px);
	}
}

@keyframes float2 {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-10px);
	}
	100% {
		transform: translatey(0px);
	}
}


#arrow2 {
    content: url(./img/futarrow2.png);
    width: auto;
    height: 8vh;
    filter: invert(1);
    overflow: hidden;
    transform: translatey(0px);
    animation: float2 2s ease-in-out infinite;
    position: absolute;
    left: 90%;
    top: 85%;
}


/* Section-intro */
 
#section-intro {
    background-color: black !important;
}

#big-scissor {
    width: 500px;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
    filter: invert(1);
    opacity: 1;
}

.tiny-scissor {
    top: -22% !important;
    left: 35.08% !important;
    transform: scale(0.2) translate(-35.08%, -22%) !important;
    transition: all 2s ease;
    filter: invert(0) !important;
}

.tiny-scissor-after {
    top: -15% !important;
    left: 35.08% !important;
    transform: scale(0.2) translate(-35.08%, -15%) !important;
    transition: all 2s ease;
    filter: invert(0) !important;
}

#moma-left {
    width: 200px;
    height: auto;
    top: 75%;
    left: 35%;
    transform: translate(-35%, -75%);
    position: fixed; /* da cambiare in fixed che poi sparirà opacity:0 */
    filter: invert(1);
    opacity: 1;
}

.moma-animated {
    width: 150px !important; 
    top: 5% !important;
    left: 20% !important;
    transform: rotate(60deg) translate(-20%, -5%) !important;
    filter: invert(0) !important;
    transition: all 2s ease;
    opacity: 1;
}

#tate-right {
    width: 210px;
    height: auto;
    top: 75%;
    left: 66%;
    transform: translate(-66%, -75%);
    position: fixed;
    filter: invert(1);
    opacity: 1;
}

.tate-animated {
    width: 150px !important;
    top: -13% !important;
    left: 75% !important;
    transform: rotate(300deg) translate(-75%, -13%) !important;
    filter: invert(0) !important;
    transition: all 2s ease;
    opacity: 1;
} 

#dott-line {
    width: 5px;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
    opacity: 0;
    filter: blur(4px);
}

.dott-line-animated {
    opacity: 1 !important;
    transition: all 1.25s ease;
    filter: blur(0) !important;
}

#moma-intro {
    position: absolute;
    width: 35%;
    top: 230%;
    left: 10%;
    transform: translate(-10%, -230%);
    transform: translateX(-100%, -100%);
    filter: blur(4px);
    opacity: 0;
}

#tate-intro {
    position: absolute;
    text-align: right;
    width: 35%;
    top: 230%;
    left: 90%;
    transform: translate(-90%, -230%);
    filter: blur(4px);
    transform: translateX(-100%, -100%);
    opacity: 0;
}

.text-animated {
    filter: blur(0) !important;
    opacity: 1 !important;
    transform: translateX(0, 0) !important;
    transition: all 2.5s ease-in;
}

.hidden {
    opacity: 0 !important;
    filter: blur(4px) !important;
    transition: all 0.3s ease-out !important;
    transform: scaleY(-100%) !important;
}

.hidden2 {
    opacity: 0 !important;
    filter: blur(4px) !important;
    transition: all 1s ease-out !important;
    transform: scaleY(-100%) !important;
    position: absolute !important;
}

#s-introduction {
    width: fit-content;
    top: 95%;
    left: 97%;
    transform: translate(-97%, -95%);
    position: fixed;
    font-size: 10px;
    opacity: 0;
    filter: blur(4px);
}

.show {
    opacity: 1 !important;
    filter: blur(0) !important;
    transition: all 2.5s ease-in;
}

.show2 {
    transform: scaleY(-100%) !important;
    opacity: 1 !important;
    filter: blur(0) !important;
    transition: all 2.5s ease-in;
    position: fixed !important;
}


.people {
    background-image: url("./img/people.png");
    background-size: 70%;
    background-position-y: 300px;
    background-position-x: 50%;
    background-repeat: no-repeat;
    z-index: -1;
}


/* section 2 */ 

#moma-art {
    position: absolute;
    width: 35%;
    top: 230%;
    left: 10%;
    transform: translate(-10%, -230%);
    transform: translateX(-100%, -100%);
    filter: blur(4px);
    opacity: 0;
}

#tate-art {
    position: absolute;
    text-align: right;
    width: 35%;
    top: 230%;
    left: 90%;
    transform: translate(-90%, -230%);
    filter: blur(4px);
    transform: translateX(-100%, -100%);
    opacity: 0;
}

/* section 3 */