@import url('./childhood/fixed-block.css');
@import url('./childhood/first-block.css');
@import url('./childhood/second-block.css');
@import url('./childhood/third-block.css');
@import url('./childhood/fourth-block.css');
@import url('./childhood/fifth-block.css');
@import url('./childhood/sixth-block.css');
@import url('./childhood/seventh-block.css');
@import url('./childhood/eighth-block.css');
@import url('./childhood/ninth-block.css');
@import url('./childhood/tenth-block.css');
@import url('./childhood/popup-block.css');

@font-face {
	font-family: Noah;
	font-weight: 500;
	font-style: normal;
	src: url('/fonts/Noah/Noah-Medium.woff') format('woff'),
		url('/fonts/Noah/Noah-Medium.woff2') format('woff2');
}

@font-face {
	font-family: 'Averta CY';
	font-weight: 400;
	font-style: normal;
	src: url('/fonts/AvertaCY/AvertaCY-Regular.woff') format('woff'),
		url('/fonts/AvertaCY/AvertaCY-Regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Averta CY';
	font-weight: 600;
	font-style: normal;
	src: url('/fonts/AvertaCY/AvertaCY-SemiBold.woff') format('woff');
}

@font-face {
	font-family: 'Averta CY';
	font-weight: 800;
	font-style: normal;
	src: url('/fonts/AvertaCY/AvertaCY-Extrabold.woff') format('woff'),
		url('/fonts/AvertaCY/AvertaCY-Extrabold.woff2') format('woff2');
}

@font-face {
	font-family: 'Averta CY';
	font-weight: 900;
	font-style: normal;
	src: url('/fonts/AvertaCY/AvertaCY-Black.woff') format('woff'),
		url('/fonts/AvertaCY/AvertaCY-Black.woff2') format('woff2');
}

#childhood {
	--color-white: #fff;
	--color-black: #000;
	--color-black-rgb: 0 0 0;
	--color-assort-bg: #00bdd580;
	--color-bg: #f0f6f9;
	--color-text: #00749e;
	--color-text-light: #00bdd5;
	--color-text-dark: #254f6d;
	--color-bubble: #f0569f;
	--color-rda-bg: #1cc6dc;
	--color-video-bg: #97d6e7;
	--base-transition: 0.4s ease;
	--padding-sides: 15px;
	--visibility-transition:
		opacity var(--base-transition),
		visibility 0s linear 0.4s;

	font-family: 'Averta CY';
	font-weight: 500;
	background-color: var(--color-bg);
}

@media screen and (min-width: 1024px) {
	#childhood {
		--padding-sides: 30px;
	}
}

@media screen and (min-width: 1280px) {
	#childhood {
		--padding-sides: 6.25vw;
	}
}

.c-font-h2 {
	font-size: 32px;
	font-style: normal;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: 1.92px;
}

@media screen and (min-width: 1024px) {
	.c-font-h2 {
		font-size: 42px;
	}
}

@media screen and (min-width: 1280px) {
	.c-font-h2 {
		font-size: 3.33vw;
	}
}

.c-font-h3 {
	font-size: 24px;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: 1.44px;
}

@media screen and (min-width: 1280px) {
	.c-font-h3 {
		font-size: 2.5vw;
	}
}

.c-font-h4 {
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
	text-transform: uppercase;

}

@media screen and (min-width: 768px) {
	.c-font-h4 {
		font-size: 20px;
	}
}

@media screen and (min-width: 1280px) {
	.c-font-h4 {
		font-size: 1.25vw;
	}
}

.c-font-text {
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
}

@media screen and (min-width: 768px) {
	.c-font-text {
		font-size: 20px;
	}
}

@media screen and (min-width: 1280px) {
	.c-font-text {
		font-size: 1.67vw;
	}
}

.c-font-text-main {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
}

@media screen and (min-width: 768px) {
	.c-font-text-main {
		font-size: 18px;
	}
}

@media screen and (min-width: 1024px) {
	.c-font-text-main {
		font-size: 20px;
	}
}

@media screen and (min-width: 1280px) {
	.c-font-text-main{
		font-size: 1.25vw;
	}
}

img:not(.clickable) {
	pointer-events: none;
	user-select: none;
}