@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Condensed&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet');



body{
	width: 90%;
	height: 100vh;
	margin: 80px;
	overflow-x: auto;
	overflow-y: hidden;
	background-color: #f8f2ec;
	display: flex;
}

h1{
	font-family: "Bricolage Grotesque", sans-serif;
	font-weight: 400;
	z-index: -1;
}

p{
	position: absolute;
	font-family: "Bricolage Grotesque", sans-serif;
	display: flex;
	flex-direction: wrap;
	width: 30vw;
	height: 10vh;
	transform: translateX(130vw) translateY(6vw);
	background: white;
}

p:nth-of-type(2){
	position: absolute;
	font-family: "Bricolage Grotesque", sans-serif;
	display: flex;
	flex-direction: wrap;
	width: 10vw;
	height: 10vh;
	transform: translateX(80vw) translateY(35vw);
	background: white;
}

p:nth-of-type(3){
	position: absolute;
	font-family: "Bricolage Grotesque", sans-serif;
	display: flex;
	flex-direction: wrap;
	width: 4vw;
	height: 10vh;
	transform: translateX(52vw) translateY(5vw);
	background: white;
}


.crazyshapes{
	width: 100%;
	transform: translateX(0vw);
}

.button{
	background-color: white;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #AEA9A4;
	transform: translateX(1vw) translateY(0vw) ;
	z-index: 1;
	position: fixed;
}

.right{
	transform: translateX(88vw) translateY(0vw) ;
}

.button:hover{
	background-color: #282A2B;
}

body:has(.button:hover) a{
	color: white;
}

/* circle */
/* circle */
/* circle */
.circle_container{
	position: relative;
	width: 25vw;
	height: 25vw;
}
.circle_shape{
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	transition: opacity 2s ease-in-out;
}
.circle_top{
	background: linear-gradient(to top, #FFEEA3, #F3DDBE, #9BCBF2, #90BFF1);
	opacity: 1;
}
.circle_bottom{
	background: linear-gradient(to top, #87CCFF, #4E8CE9, #3A72CA, #3770C7);
	opacity: 0;
}

.happy{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transform: translateX(-30vw) translateY(0vw);
}

.happy h1{
	transform: translateY(-5vw);
}

/* oval */
/* oval */
/* oval */
.oval_container{
	position: relative;
	width: 27vw;
	height: 14vw;
}
.oval_shape{
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	transition: opacity 3s ease-in-out;
}
.oval_top{
	background: linear-gradient(to top, #8F8E99, #D5C6BF, #DAD2CF, #82A4BF);
	opacity: 1;
}
.oval_bottom{
	background: linear-gradient(to top, #D9C99C, #D3D4B1, #B5CEC9, #638AB6);
	opacity: 0;
}

.calm{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1vw;
	transform: translateX(-0vw) translateY(-10vw);
	width: auto;
}

.calm h1{
	transform: translateY(-5vw);
}

/* triangle */
/* triangle */
/* triangle */
.triangle_container{
	position: relative;
	width: 18vw;
	height: 14vw;
}
.triangle_shape{
	position: absolute;
	width: 0;
	height: 0;
	background: none;
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	width: 100%;
	height: 100%;
	transition: opacity 3s ease;
}
.triangle_top{
	background: linear-gradient(to top, #D3D8CF, #A4B7CB, #778EB1, #778EB1);
	opacity: 1;
}
.triangle_bottom{
	background: linear-gradient(to top, #B2C4BC, #FFF6C9, #ABBFC7, #3F4B54);
	opacity: 0;
}

.hopeful{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1vw;
	transform: translateX(-15vw) translateY(-15vw);
	width: auto;
}

.hopeful h1{
	transform: translateY(-5vw) ;
}


/* rhombus */
/* rhombus */
/* rhombus */
.rhombus_container{
	position: relative;
	width: 10vw;
	height: 10vw;
}
.rhombus_shape{
	position: absolute;
	width: 100%;
	height: 100%;
	transform: rotate(45deg); 
	transition: opacity 3s ease;
}
.rhombus_top{
	background: linear-gradient(-45deg, #FCE26D, #212B41, #070C18, #00000C);
	opacity: 1;
}
.rhombus_bottom{
	background: linear-gradient(-45deg, #DEA181, #E8D3B1, #AAB4BC, #AAB4BC);
	opacity: 0;
}

.grateful{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transform: translateX(-5vw) translateY(-57vw);
	width: auto;
}

.grateful h1{
	transform: translateY(-4vw);
}

/* waterdrop */
/* waterdrop */
/* waterdrop */
.waterdrop_container{
	position: absolute;
	width: 9vw;
	height: 9vw;
}
.waterdrop_shape{
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius:0% 100% 100% 100%;
	transform: rotate(45deg); 
	transition: opacity 3s ease-in-out;
}
.waterdrop_top{
	background: linear-gradient(-45deg, #E9E8C6, #ABB4B3, #96C2E5, #9BA0A5);
	opacity: 1;
}
.waterdrop_bottom{
	background: linear-gradient(-45deg, #E29D67, #CDC0AD, #8298AB, #355684);
	opacity: 0;
}

.sad{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transform: translateX(-35vw) translateY(-35vw);
	width: auto;
}


/* half-circle */
/* half-circle */
/* half-circle */
.half-circle_container{
	position: absolute;
	width: 24vw;
	height: 12vw;
}
.half-circle_shape{
	position: absolute;
	width: 100%; 
	height: 100%; 
	border-top-left-radius: 12vw; 
	border-top-right-radius: 12vw; 
	overflow: hidden;
	transition: opacity 3s ease-in-out;
}
.half-circle_top{
	background: linear-gradient(to top, #70768C, #E69F96, #D4DFE4, #7D91A9);
	opacity: 1;
}
.half-circle_bottom{
	background: linear-gradient(to top, #839494, #C9CFC4, #8FA4AD, #A4A9A7);
	opacity: 0;
}

.tired{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transform: translateX(20vw) translateY(-35vw);
	width: auto;
}


/* square */
/* square */
/* square */
.square_container{
	position: relative;
	width: 24vw;
	height: 24vw;
}
.square_shape{
	position: absolute;
	width: 100%; 
	height: 100%; 
	transition: opacity 3s ease-in-out;
}
.square_top{
	background: linear-gradient(to top, #D3D3C6, #CBDEE1, #A8D1F1, #5B87C6);
	opacity: 1;
}
.square_bottom{
	background: linear-gradient(to top, #CBD0C0, #C5D7D3, #B7D8E1, #6A9FDD);
	opacity: 0;
}

.neutral{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transform: translateX(30vw) translateY(-72vw);
	width: auto;
}

.neutral h1{
	transform: translateY(-5vw);
}


/* star */
/* star */
/* star */
.star_container{
	position: relative;
	width: 24vw;
	height: 24vw;
	display: flex;
	justify-content: center;
	align-items: center;
}
.star_shape{
	position: absolute;
	width: 20vw;  
	aspect-ratio: 1;
	clip-path: polygon(50% 0,
	calc(50%*(1 + sin(.4turn))) calc(50%*(1 - cos(.4turn))),
	calc(50%*(1 - sin(.2turn))) calc(50%*(1 - cos(.2turn))),
	calc(50%*(1 + sin(.2turn))) calc(50%*(1 - cos(.2turn))),
	calc(50%*(1 - sin(.4turn))) calc(50%*(1 - cos(.4turn))) 
); 
	transform: rotate(45deg); 
	transition: opacity 3s ease-in-out;
}
.star_top{
	background: linear-gradient(-45deg, #F8FFFB, #D0E7FC, #92B7EF, #7B9DDC);
	opacity: 1;
}
.star_bottom{
	background: linear-gradient(-45deg, #939391, #D1A99A, #AFB1AE, #98A4AE);
	opacity: 0;
}

.energetic{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transform: translateX(52vw) translateY(-80vw);
	width: auto;
}

.energetic h1{
	transform: translateY(-12vw);
}



/* curve */
/* curve */
/* curve */
.curve_container{
	width: auto;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
.curve_shape{
	position: absolute;
	--c: 85; /* control the curvature (a percentage value without unit bigger than 50%)*/
	width: 24vw;
	aspect-ratio: 3/2;
	background: #a7237b;
	mask: radial-gradient(calc(var(--c)*1%) 100% at 50% calc(100% + 100%*cos(asin(50/var(--c)))),#0000 calc(100% - 1px),#000);
	clip-path: ellipse(calc(var(--c)*1%) 100% at bottom);
	transition: opacity 3s ease-in-out;
}
.curve_top{
	background: linear-gradient(to top, #A9A093, #979895, #8B9095, #85898E);
	opacity: 1;
}
.curve_bottom{
	background: linear-gradient(to top, #646676, #1E2129, #050810, #000109);
	opacity: 0;
}

.overwhelming{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1vw;
	transform: translateX(60vw) translateY(-115vw);
	width: auto;
}


/* Hexagon */
/* Hexagon */
/* Hexagon */
.hexagon_container{
	width: auto;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
.hexagon_shape{
	position: absolute;
	height: 25vw; /* adjust to control the size  */
	aspect-ratio: 1/cos(30deg);
	clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);
	transition: opacity 3s ease-in-out;
}
.hexagon_top{
	background: linear-gradient(to top, #DBDAD3, #D9DAD2, #ECECE8, #F5F8F5);
	opacity: 1;
}
.hexagon_bottom{
	background: linear-gradient(to top, #A19580, #ACA991, #A8B4AD, #8C959B);
	opacity: 0;
}

.unmotivated{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1vw;
	transform: translateX(85vw) translateY(-95vw);
	width: auto;
}