*{
	padding: 0;
	margin: 0;
	font-weight: 700;
	font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
	transition: all 0.5s ease 0s;
	/* VARIABLES */
	--colorBackground: rgb(247, 246, 243);
	--colorBlue: #1B9BEF;
	--colorYellow: #FFE000;
	--textColorMedium: rgba(0,0,0,0.6);
	--textMacro: 12px;
	--textLittle: 15px;
	--textNormal: 20px;
	--textTitle: 25px;
	--textLogo: 30px;
	--paddingMacro: 5px;
	--paddingLittle: 10px;
	--paddingDefault: 20px;
	--paddingBig: 30px;
	--paddingLarge: 40px;
	--marginSection: 50px;
}

body{
	background-color: var(--colorBackground);
	color: black;
	font-size: var(--textNormal);

	position: relative;
	max-width: 1024px;
	left: 50%; transform: translateX(-50%);
}

a{
	text-decoration: none;
}

.hoverContrast:hover{
	background-color: black; color: white;
	padding: var(--paddingMacro);
}

/* HEADER */
header {
	position: sticky; width: calc(100% - calc(var(--paddingLarge) * 2));
	top: 0; background-color: var(--colorBackground); z-index: 1;
  	display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  	padding: 0 var(--paddingLarge) 0 var(--paddingLarge);
  	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

header .logo{
	font-size: var(--textLogo);
}
nav ul{
	display: flex; align-items: center;
    grid-gap: var(--paddingDefault);   
}
nav ul li { 
	display: inline-block; 
	font-size: var(--textLittle); text-decoration: underline;
}

button{
	border: 0; margin: var(--paddingDefault);
	padding: var(--paddingLittle);
	border-radius: 5px;
}

button.add{
	position: relative;
	background-color: var(--colorBlue);
	border-radius: 2px; border: 0;
	width: 35px; height: 35px;
	color: white; font-size: 30px;
}
button.add::after{
	position: absolute;
	content: "+"; color: white;
	top: 50%; left: 50%;
	transform: translate(-50%, -55%);
}

/* MAIN */
main{
	padding: var(--paddingBig);
}

/* PRESENTATION */

.presentation{
	position: relative;
	padding: var(--paddingLarge);
    display: flex; align-items: center;
    flex-direction: column; align-content: center;
    margin-bottom: var(--marginSection);
}
.presentation .title{ font-size: var(--textTitle); text-align: center; }
.presentation .text{
	font-weight: 430; text-align: center;
	color: var(--textColorMedium);
	font-size: var(--textNormal);
	max-width: 650px;
}
button.subscribe{
	background-color: var(--colorBlue);
	color: white;
}
button.subscribe:hover{
	background-color: black;
	color: var(--colorBlue);
}



/* PLACES */
.categories-grid{
	display: grid; grid-gap: var(--paddingLarge);
	grid-template-columns: 1fr 1fr;
}

.places-categorie{ font-size: var(--textTitle); }

.places{    
	display: grid; grid-gap: 5px;
}

.place{
	border: 2px solid rgba(0, 0, 0, 0.1);
	border-radius: 5px; padding: 5px;
}
.place.blur > *{ filter: blur(10px); }
.place .title{
	font-size: var(--textNormal);
}
.place .address{
	font-size: var(--textLittle);
	font-weight: normal; opacity: .8;
}
.place .price, .place .desc-short{
	display: inline-block;
	font-size: var(--textLittle);
	opacity: .8;
}