/* FONTS	*/

@font-face {
	font-family: 'Blast-Gothic';
	src: url('/Content/travel/fonts/Blast-Gothic/CFBlastGothicMedi10-Regular.woff2') format('woff2'),
		url('/Content/travel/fonts/Blast-Gothic/CFBlastGothicMedi10-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}


@font-face {
	font-family: 'Guthen-Bloots';
	src: url('/Content/travel/fonts/Guthen-Bloots/GuthenBloots.woff2') format('woff2'),
		url('/Content/travel/fonts/Guthen-Bloots/GuthenBloots.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Aeonik';
	src: url('/Content/travel/fonts/Aeonik/AeonikPro-Regular.woff2') format('woff2-variations');
	font-weight: 100 900;	
}



:root {

	/* ------------------------------------------------------------------------------------ */
	/* COLORS */
	--blue: #010137;
	--hover-blue: #1b1bc1;
	--blue-gray: #d6d6f3;
	--contrast-blue: #16164d;
	--red: #fc2849;
	--hover-red: #b31e35;

	/* ------------------------------------------------------------------------------------ */
	/* TYPOGRAPHY */
	/* To range των font-sizes το έχω φτιάξει στο https://fluidtypography.com/ */
	/* To range οθονών είναι 414px - 2560px	*/

	--display: 'Guthen-Bloots';
	--condensed: 'Blast-Gothic';
	
	--font-base: clamp(0.906rem, 0.103vw + 0.88rem, 1.044rem);
	--line-height-base: clamp(1.269rem, 0.221vw + 1.211rem, 1.566rem);

	--h1-size: clamp(1.938rem, 0.984vw + 1.704rem, 2.688rem);
	--h1-line-height: clamp(2.228rem, 1.66vw + 1.834rem, 3.494rem);

	--h2-size: clamp(1.313rem, 0.82vw + 1.118rem, 1.938rem);
	--h2-line-height: clamp(1.641rem, 1.152vw + 1.367rem, 2.519rem);

	--h3-size: clamp(1.188rem, 0.246vw + 1.129rem, 1.375rem);
	--h3-line-height: clamp(1.484rem, 0.307vw + 1.411rem, 1.719rem);

	--h4-size: clamp(1.031rem, 0.123vw + 1.002rem, 1.125rem);
	--h4-line-height: clamp(1.289rem, 0.154vw + 1.253rem, 1.406rem);

	--h5-size: clamp(0.969rem, 0.023vw + 0.963rem, 1rem);
	--h5-line-height: clamp(1.405rem, 0.071vw + 1.386rem, 1.5rem);
	
}


html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background-color: var(--blue);
	font-family: 'Aeonik';
	font-size: var(--font-base);
	line-height: var(--line-height-base);
	font-variation-settings: "wght" 400; /* 100 / 900 */
	color: var(--blue);
	letter-spacing: 0.003em;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(16, 16, 16, 0);
}

@media screen and ( max-width: 430.2px ) {
	body[data-scroll="true"] {
		overflow: hidden;
	}
}

hr {
	margin: 0.5rem 0;
	color: var(--blue);
	border: 0;
	border-top: 1px solid var(--blue-gray);
	opacity: 0.8;
}

figure {
	margin: 0 0 1rem;
}

img, svg {
	vertical-align: middle;
}