@font-face {
	font-family: "Nutmeg";
	font-weight: 400;
	src: local("Nutmeg"), url("./assets/fonts/Nutmeg-Regular.ttf") format("truetype");
}
@font-face {
	font-family: "Nutmeg-Light";
	font-weight: 300;
	src: local("Nutmeg-Light"), url("./assets/fonts/Nutmeg-Light.ttf") format("truetype");
}
@font-face {
	font-family: "Nutmeg-Medium";
	font-weight: 500;
	src: local("Nutmeg-Medium"), url("./assets/fonts/Nutmeg-Medium.ttf") format("truetype");
}
@font-face {
	font-family: "Nutmeg-SemiBold";
	font-weight: 600;
	src: local("Nutmeg-Bold"), url("./assets/fonts/Nutmeg-SemiBold.ttf") format("truetype");
}
@font-face {
	font-family: "Nutmeg-Bold";
	font-weight: 700;
	src: local("Nutmeg-Bold"), url("./assets/fonts/Nutmeg-Bold.ttf") format("truetype");
}

@font-face {
	font-family: "Nutmeg-Black";
	font-weight: 700;
	src: local("Nutmeg-Black"), url("./assets/fonts/Nutmeg-Black.ttf") format("truetype");
}

body{
	font-family: 'Nutmeg', Inter, Avenir, Helvetica, Arial, sans-serif !important;
}

.f-100{ font-weight: 100 !important; }
.f-300{ font-weight: 300 !important; }
.f-400{ font-weight: 400 !important; }
.f-500{ font-weight: 500 !important; }
.f-600{ font-weight: 600 !important; }
.f-regular{ font-family: 'Nutmeg'; }
.f-bold-black{ font-family: 'Nutmeg-Black'; }
.f-bold{ font-family: 'Nutmeg-Bold'; }
.f-semibold{ font-family: 'Nutmeg-SemiBold'; }
.f-light{ font-family: 'Nutmeg-Light'; }
.f-medium{ font-family: 'Nutmeg-Medium'; }

body{
	margin: 0;
	box-sizing: border-box;
	background-image: url('./assets/img/stars.svg');
	background-position: center;
	background-attachment: fixed;
	background-size: cover;
	min-height: 100vh;
	min-width: 100%;
	background-color: #050221;
	overflow: hidden;
	display: flex;
}
p{
	margin: 0;
	color: white;
}

section{
	height: calc(100vh - 8px);
	width: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.header{
	background-color: #0F0A28;
	height: 110px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 37px;
}

.header img{
	height: 80px;
	width: 80px;
	object-fit: contain;
}

.parent-content{
	display: flex;
	justify-content: space-between;
	height: 100%;
	overflow: auto;
	scroll-behavior: smooth;
	scroll-timeline-name: --squareTimeline;
	margin-left: 20px;
}

::-webkit-scrollbar{
	width: 10px;
}
::-webkit-scrollbar-thumb{
	background-color: #6538E6;
	border-radius: 10px;
}


.parent-content .content-main{
	max-width: 1107px;
}

.parent-content .content-main .title{
	font-size: clamp(25px, 2.2vw, 40px);
	text-align: center;
	padding-top: 30px;
}

.parent-content .content-main .sub-title{
	font-size: clamp(16px, 2vw, 22px);
	margin-left: 25px;
	margin-bottom: 8px;
	margin-top: 70px;
}

.parent-content .content-main .content-description{
	max-width: 1107px;
	border: 2px solid #FFFFFF0D;
	border-radius: 35px;
	background-color: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(2px);
	padding: 25px;
	opacity: 0.7;
}

.parent-content .content-main .content-description p{
	font-size: clamp(16px, 2vw, 18px);
}

.parent-content .content-right .content-right-center{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 77px;
}
.parent-content .content-right .content-right-center a {
	background-image: url('./assets/img/button-red.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .1s linear;
	border-radius: 50%;
}

.parent-content .content-right .content-right-center a:hover{
	box-shadow: 0 0 5px #6419C7;
	transform: scale(1.1);
}

.parent-content .content-right{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	position: sticky;
	top: 0;
	padding: 0 0 10px 0;
	width: 132px;
}

.parent-content .content-right a.arrow-father{
	width: 132px;
	height: 132px;
	display: flex;
	cursor: pointer;
	justify-content: center;
	align-items: center;
	border-radius: 180px;
	background: transparent radial-gradient(closest-side at 50% 50%, #FFFFFF 0%, #FFFFFF29 26%, #FFFFFF00 100%) 0% 0% no-repeat padding-box;
	animation: fadeAway both linear;
	animation-range: contain 100px;
	animation-timeline: --squareTimeline;
	transition: all 3ms linear;
}

@keyframes fadeAway {
	from{
		visibility: hidden;
	}to{
		visibility: visible;
	}
}