@import 'components/header.css';
@import 'components/grid.css';
@import 'components/grille.css';

*{
	margin:0;
	padding:0;
}

body{
	color:var(--color-main);
    font-family: 'Lota-Grotesque-Light', 'arial', sans-serif;
	background-color: var(--color-background);

}

html {
	font-size: 12px;
}


::-webkit-scrollbar, ::-webkit-scrollbar-thumb {
    width: 0px;
    height:0px;
    background-color: transparent;
}

*::selection {
  background-color: #ccd6ff;
  color: #fbfbf9;
}

img::selection {
  background-color: transparent;
}

:root{
	/*--color-main:#141153;*/
	--color-background:#fbfbf9;

	--font-size-big:1.25rem;

	--font-size-medium:2rem;
	--line-height-medium:1em;

	--font-size-normal:1rem;
	--line-height-normal:1em;

	--font-size-huge-mobile: ;
	--font-size-big-mobile: ;
	--font-size-medium-mobile: ;
	--font-size-mid-mobile: ;
	--font-size-normal-mobile: ;
}

/*TYPOGRAPHIE ------------------------*/
/*------------------------------------*/

@font-face { 
    font-family: 'Lota-Grotesque-Extra-Light';
    src: url('../fontes/Lota-Grotesque-Extra-Light.otf') format('opentype');
}

@font-face { 
    font-family: 'Lota-Grotesque-Light';
    src: url('../fontes/Lota-Grotesque-Light.otf') format('opentype');
}

@font-face { 
    font-family: 'Lota-Grotesque-Regular';
    src: url('../fontes/Lota-Grotesque-Regular.otf') format('opentype');
}

body{
	font-size:var(--font-size-normal);
	line-height:var(--line-height-normal);
}

a{
	text-decoration:none;
	color:inherit;
}

a:hover{
	text-decoration:underline;
}

h1{
	font-size:var(--font-size-big);
	line-height:var(--line-height-normal);
	font-weight: normal;
}

img {
    filter: blur(4px);
}

img.fade-in-active {
    filter: blur(0);
    transition: filter 1s ease;
}

@media screen and (max-width: 768px) {

	body{
	    font-family: 'Lota-Grotesque-Regular', 'arial', sans-serif;
	}

	html {
		font-size: 12.5px;
	}

	*{
		-webkit-tap-highlight-color: transparent;
	}
	
	*::selection, *:focus{
	  	background-color: transparent;
	}

	img::selection {
	  	background-color: transparent;
	}

}