@font-face {
                font-family: domain;
                src: url(./domain.ttf);
            }
            
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            
            html,
            body {
                height: 100%;
                width: 100%;
            }
            
            #page1 {
                min-height: 130vh;
                width: 100vw;
                background-color: #C4BCB3;
                position: relative;
                overflow: hidden;
            }
            
            #nav {
                height: 110px;
                width: 100%;
                display: flex;
                padding: 0 30px;
                align-items: center;
                justify-content: space-between;
                border-bottom: 1px solid #222;
            }
            
            #nav img {
                height: 29px;
                width: 30%;
            }
            
            #nav h5 {
                font-size: 20px;
                font-weight: 100;
                width: 30%;
            }
            
            #nav i {
                width: 30%;
                text-align: right;
            }
            
            #elems {
                /* background-color: red; */
                height: 430px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 40px 60px;
            }
            
            #elem1 {
                width: 30%;
                height: 100%;
                /* background-color: blue; */
            }
            
            #elem2 {
                width: 30%;
                height: 100%;
                /* background-color: blue; */
                border-right: 2px solid #acacac;
                padding: 20px 60px;
                text-align: center;
                border-left: 2px solid #a5a5a5;
            }
            
            #elem3 {
                width: 30%;
                height: 100%;
                /* background-color: blue; */
            }
            
            #elem1 #image-div {
                height: 60%;
                width: 100%;
                overflow: hidden;
            }
            
            #image-div img {
                height: 100%;
                width: 100%;
                object-fit: cover;
                transition: all ease 0.5s;
            }
            
            #elem3 #image-div {
                height: 60%;
                width: 100%;
                overflow: hidden;
            }
            
            #image-div:hover img {
                scale: 1.1;
            }
            
            #elem1 h4 {
                font-size: 24px;
                margin-top: 20px;
                margin-bottom: 10px;
                font-family: canopee;
            }
            
            #elem1 h4 span {
                background-color: #B43B12;
                color: #C4BCB3;
                font-weight: 100;
                font-size: 18px;
                padding: 4px;
                margin-left: 10px;
                border-radius: 5px;
            }
            
            #elem1 p {
                font-size: 23px;
                font-family: domain;
                font-weight: 100;
                color: #656565;
            }
            
            #elem3 h4 {
                font-size: 24px;
                margin-top: 20px;
                margin-bottom: 10px;
                font-family: canopee;
            }
            
            #elem3 h4 span {
                background-color: #B43B12;
                color: #C4BCB3;
                font-weight: 100;
                font-size: 18px;
                padding: 4px;
                margin-left: 10px;
                border-radius: 5px;
            }
            
            #elem3 p {
                font-size: 23px;
                font-family: domain;
                font-weight: 100;
                color: #656565;
            }
            
            #elem2 h2 {
                font-family: canopee;
                font-size: 75px;
                font-weight: 100;
            }
            
            #elem2 h3 {
                font-family: domain;
                font-size: 50px;
                /* background-color: red; */
                color: #2f2f2f;
                font-weight: 100;
                margin: 20px 0;
            }
            
            #elem2 h6 {
                font-family: domain;
                font-size: 20px;
                /* background-color: red; */
                color: #2f2f2f;
                font-weight: 100;
            }
            
            #page1 h1 {
                font-size: 580px;
                letter-spacing: -5px;
                font-weight: 100;
                font-family: canopee;
                background-color: #1C1C19;
                color: #C4BCB3;
                line-height: 550px;
                width: 96%;
                margin-left: 2%;
            }
            
            #page2 {
                height: 200vh;
                width: 100%;
                background-color: #C4BCB3;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 90px 40px;
            }
            
            #page2-left {
                height: 100%;
                padding-right: 50px;
                width: 35%;
                /* background-color: red; */
                border-right: 1px solid #4b4b4b;
            }
            
            #page2-left h2 {
                font-size: 110px;
                font-family: domain;
                line-height: 150px;
                font-weight: 100;
            }
            
            #page2-left h2 span {
                font-size: 110px;
                font-weight: 900;
            }
            
            #page2-left img {
                height: 50%;
                width: 100%;
                object-fit: cover;
            }
            
            #page2-left p {
                font-size: 34px;
                font-family: domain;
                color: #2f2f2f;
                margin-top: 20px;
            }
            
            #page2-right {
                height: 100%;
                width: 70%;
                padding: 0 60px;
            }
            
            #page2-right img {
                height: 53%;
                object-fit: cover;
                width: 100%;
            }
            
            #page2-right h1 {
                font-family: canopee;
                font-size: 140px;
                font-weight: 100;
                letter-spacing: -1px;
            }
            
            #page2-right p {
                font-size: 30px;
                font-family: domain;
                color: #2f2f2f;
                margin-top: 10px;
            }
            
            #page2-right p {
                font-size: 30px;
                font-family: domain;
                color: #2f2f2f;
                margin-top: 5px;
            }
            
            #page2-right h2 {
                font-family: canopee;
                font-size: 140px;
                font-weight: 100;
                letter-spacing: -1px;
            }
            
            #page3 {
                padding-bottom: 100px;
                position: relative;
                background-color: #C4BCB3;
            }
            
            #page3 h1 {
                font-size: 550px;
                font-weight: 100;
                letter-spacing: -10px;
                background-color: #1C1C19;
                width: fit-content;
                color: #C4BCB3;
                margin-left: 2%;
                padding: 0 20px;
                line-height: 500px;
                font-family: canopee;
            }
            
            #page3 img {
                height: 460px;
                position: absolute;
                top: 0;
                right: -1%;
            }
            
            #page4 {
                height: 100vh;
                width: 100%;
                display: flex;
                align-content: center;
                justify-content: space-between;
                background-color: #C4BCB3;
            }
            
            #page4-left {
                width: 65%;
                height: 100%;
                padding: 80px 60px;
            }
            
            #page4-left img {
                height: 100%;
                width: 100%;
                object-fit: cover;
            }
            
            #page4-right {
                width: 35%;
                height: 100%;
                padding: 80px 60px;
            }
            
            #page4-right p {
                font-size: 30px;
                font-family: domain;
                font-weight: 100;
                color: #2f2f2f;
                margin-bottom: 150px;
                line-height: 35px;
            }
            
            #page4-right #anda {
                height: 260px;
                background-color: #CAC1B6;
                border: 1px solid #2f2f2fc6;
                border-radius: 50%;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-wrap: nowrap;
                overflow: hidden;
            }
            
            #anda h1 {
                font-size: 100px;
                font-weight: 100;
                font-family: canopee;
                width: 100%;
                height: 100%;
                /* background-color: red; */
                display: flex;
                align-items: center;
                justify-content: center;
                transform: translateX(-26%);
                transition: all ease 0.6s;
            }
            
            #anda img {
                height: 60px;
                transition: all ease 0.6s;
                transform: translateX(-120%);
            }
            
            #anda:hover img {
                transform: translateX(76%);
            }
            
            #anda:hover h1 {
                transform: translateX(100%);
            }
            
            #page5 {
                padding: 25px 0;
                width: 100%;
                background-color: #C4BCB3;
                border-top: 1px solid #2f2f2f;
                border-bottom: 1px solid #2f2f2f;
                white-space: nowrap;
                overflow-x: auto;
                overflow-y: hidden;
            }
            
            #page5::-webkit-scrollbar {
                display: none;
            }
            
            #page5 h1 {
                font-size: 100px;
                font-family: domain;
                font-weight: 100;
                display: inline-block;
                /* background-color: red; */
                animation-timing-function: linear;
                margin-right: 30px;
                animation-name: scroll;
                animation-duration: 3s;
                animation-iteration-count: infinite;
            }
            
            #page5 h1 span {
                font-family: canopee;
                background-color: #1b1b1b;
                color: #C4BCB3;
                padding: 0 12px;
            }
            
            #page6 {
                height: 100px;
                width: 100%;
                background-color: #C4BCB3;
            }
            
            @keyframes scroll {
                0% {
                    transform: translateX(0);
                }
                100% {
                    transform: translateX(calc(-100% - 34px));
                }
            }
            
            #page5:hover h1 {
                animation-play-state: paused;
            }