* {
	 box-sizing: border-box;
	 user-select: none;
}
 a {
	 color: var(--color-surface-white);
	 text-decoration: none;
	 transition: .5s all ease-in-out;
     text-decoration: underline;
     text-decoration-color: transparent;
     text-underline-offset: 5px;
}
 a:hover {
     text-decoration-color: white;
     transition: .5s all ease-in-out;
}
p {
    text-align: center;
}
 body {
	 margin: 0;
	 padding: 0;
	 height: 100vh;
	 font-size: 18px;
	 color: var(--light);
	 text-transform: uppercase;
}
 h2 {
     font-family: "Cormorant Garamond", serif;
	 font-size: clamp(3rem, 4vw, 10rem);
	 font-weight: 600;
	 line-height: 1.2;
	 text-align: center;
	 width: 95vw;
	 max-width: 1200px;
	 text-transform: none;
}
 header {
	     position: fixed;
    display: flex;
    align-items: start;
    width: 100%;
    z-index: 9;
    padding: 2% 5% 0 5%;
 }
 header img {
     width: 100%;
    max-width: 100px;
 }
 footer {
	 position: fixed;
	 display: flex;
	 align-items: start;
	 justify-content: space-between;
	 padding: 0 5%;
	 width: 100%;
	 z-index: 3;
	 height: 5em;
	 font-size: clamp(0.66rem, 2vw, 1rem);
	 letter-spacing: 0.5em;
	 bottom: 0;
}
 section {
	 height: 100%;
	 width: 100%;
	 top: 0;
	 position: fixed;
	 visibility: hidden;
}
 section .outer, section .inner {
	 width: 100%;
	 height: 100%;
	 overflow-y: hidden;
}
 section .bg {
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 position: absolute;
	 height: 100%;
	 width: 100%;
	 top: 0;
	 background-size: cover;
	 background-position: center;
	 flex-direction: column
}
 section .bg h2 {
	 z-index: 999;
}
 section .bg .clip-text {
	 overflow: hidden;
}
 .first .bg {
	 background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.1) 100%), url("../img/section-1.jpg");
}
 .second .bg {
	 background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.1) 100%), url("../img/section-2.jpg");
}
 .third .bg {
	 background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.1) 100%), url("../img/section-3.jpg");
}
 .fourth .bg {
	 background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.1) 100%), url("../img/section-4.jpg");
}
 h2 * {
	 will-change: transform;
}
    .mobile {
        display: none;
    }

@media only screen and (max-width: 456px) {
    header {
            justify-content: center;
    }
    footer {
                    flex-direction: column;
        text-align: center;
        gap: 0px;
        padding: 3% 5%;
        height: 7.5em;
    }
    footer > div {
        width: 100%;
    }
    .not-mobile {
        display: none;
    }
    .mobile {
        display: flex;
        flex-direction: column;
    }
    a {
        font-size: 12px;
    }
}