@import url(Fonts.css)

html, body{margin: 0; box-sizing: border-box; overflow-x: hidden;}

/* ---------------- Global Classes ----------------*/
a{text-decoration: none; color:var(--text-gray);}
.flex-row{display: flex; flex-direction: row; flex-wrap: wrap;}

ul{list-style-type: none;}

/* -------x-------- Global Classes -------x--------*/

/* ---------------- navbar ----------------*/

.nav{background: white; padding 0 2rem; height: 0rem; 
	min-height: 10vh; overflow: hidden;}
	
.nav .nav-menu{justify-content: space-between; display: flex;
 flex-direction: row;} 

.nav .nav-brand a{font-size: 1.6rem; padding: 1rem 0;
 display: block; font-family: Abel, cursive;}
 
.nav .toggle-collapse{position: absolute; top: 0;
width: 100%; cursor: pointer; width: 90%; display: none;
}

.nav .toggle-collapse .toggle-icons{display: flex;
justify-content: flex-end; padding: 1.7rem 0;
}

.nav .toggle-collapse .toggle-icons i{font-size: 1.4rem;
color: var(--text-gray);
}

.nav .nav-items{display: flex; margin: 0; }

.nav .nav-items .nav-link{padding: 1.3rem .5rem;
	font-size: 1.1rem; position: relative; font-family: var(--Abel);
}	
	
.nav .nav-items .nav-link:hover{background-color: var(--midnight);
}	
.nav .nav-items .nav-link:hover a{color: var(--white);
}	
	
.nav .social {padding: 1.4rem 0; }

.nav .social i{padding: 0 .2rem; }

.nav .social i:hover{color: #a1c4cf; }

/* -------x-------- fonts test -------x--------*/
h1{font-family:var(--Abel) ; color: red;}
h2{font-family:var(--Livvic) ; color: green;}
h3{font-family:var(--Josefin_Sans) ; color: blue;}
h4{font-family:var(--Anton) ; color: purple;}

/* -------x-------- close fonts test -------x--------*/


/* -------x-------- close navbar -------x--------*/
/* -------x--------  viewport <=750px -------x--------*/
@media only screen and (max-width: 750px){
.nav .nav-menu, .nav .nav-items{flex-direction: column;
}
.nav .toggle-collapse{display: initial;}
/* -------x-------- close viewport <=750px -------x--------*/


/* fonts*/
@font-face {
	font-family: Abel;
	src: url(assets/fonts/Abel/Abel-Regular.ttf);	
}
@font-face {
	font-family: Livvic;
	src: url(../fonts/Livvic-Regular.tff);
}
@font-face {
font-family: Anton;
	src: url(/assets/fonts/Anton/Anton-Regular.ttf);
}
@font-face {
	font-family:Lexend;
	src: url(assets/Fonts/LexendDeca-Regular.ttf);
}
@font-face {
	font-family: Josefin_Sans;
	src: url(fonts/Josefin_Sans/JosefinSans-Italic-VariableFont_wght.ttf);
}
@font-face {
	font-family: Josefin_Sans;
	src: url(../Fonts/Josefin_Sans/JosefinSans-VariableFont_wght.ttf);
}

/* close fonts*/

/* variables*/
:root{
/* font variables */
--Abel:'Abel', sans-serif;
--Livvic:'Livvic', sans-serif;
--Anton:'Anton', sans-serif;
--Lexend:'Lexend', sans-serif;
--Josefin_Sans:'Josefin_Sans', sans-serif;
/* close font variables */

/* color variables */
--text-gray: #3f4954;
--text-light: #3f4954;
--bg-color: #0f0f0f;
--white: #ffffff;
--midnight: #104f55;
/* close font variables  */

/* gradient color, webgradients.com */
--sky: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100);

/* close gradient color */






}
/* close variables*/