style.css

html { box-sizing: border-box; }
*, ::before, ::after { box-sizing: inherit; }

:root {
	--blue: #004599;
	--blue-light:rgba(0, 69, 153, 0.575);
	--red: rgb(255, 68, 56);
	--white: #FFFFFF;
	--grey: #efefef;

	--font-default: 'Roboto', sans-serif;

}

body {
	margin: 0;
	padding: 30px;
	font-family: var(--font-default);
	background-color: var(--white)
}
main {
	margin-top: 2em;
}

/*
 **************************************
	MENU
 **************************************
*/
.menu__checkbox {
	position: absolute;
	left: -999999px;
	background-color: var(--grey);
}
.menu__toggler {
	cursor: pointer;
}
.menu__icon {
	height: 2em;
	width: auto;
	display: block;
}
.menu__wrapper{
	display: none;
	padding: 1em;
	list-style: none;
	background-color: var(--blue);
	color: var(--grey);

}
.menu__item {
	border-bottom: 1px solid var(--grey);
	font-weight: bold;
	text-transform: uppercase;
	list-style: none;

}

.menu__link {
	display: block;
	padding: 15px;
	text-decoration: none;
	color: var(--grey);
}

.menu__link:hover {
	color: var(--blue);
	background-color: var(--grey);
}
.menu__item--active .menu__link {
	background-color: var(--grey);
	color: var(--blue);
}
.menu__checkbox:checked ~ .menu__wrapper {
	display: block;
}
.menu__checkbox:checked ~ .menu__title {
	display: none;
}

@media screen and (min-width: 800px) {

	.menu__toggler {
		display: none;
	}

	.menu__wrapper {
		display: flex !important;
		justify-content: flex-end;

	}
	.menu__title {
		text-align: center;
		align-items: flex-end;
		justify-items: baseline;
		font-style: italic;
	}
	.menu__list {
		display: flex !important;
		justify-content: flex-end;
	}
	.menu__item {
		border-right: 1px solid var(--grey);
		border-bottom: 0;
	}
	.menu__link:hover {
		border-bottom: 2px solid var(--blue);
	}

}
/*
 **************************************
	HOME
 **************************************
*/
.image__background {
	max-height: 650px;
	max-width: 650px;
}
.home {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/*
 **************************************
	FOOTER
 **************************************
*/
.footer__icon{
	margin: 0.5em 0.25em 0.5em 0.25em;
	width: 1em;
	height: 1em;
}
.footer__heart{
	margin: 0px;
	width: 1em;
	height: 1em;
}
.footer__logo {
	text-transform: uppercase;
	color: var(--blue);
	font-weight: bold;
	text-align: center;
}
.footer__item {
	margin: 1em;
}

.span__red {
	color: red;
}
.footer-wrapper {
	display: flex;
	background-color: var(--grey);
	justify-content: space-evenly;
}
.footer__right{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
}

.footer__left {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;

}

@media (min-width: 800px) {

	.footer-wrapper {
		justify-content: space-around;
	}
	.footer__left {
		flex-direction: row;
	}
	.footer__right {
		flex-direction: row;
	}
	.footer__icon{
		margin: 0.5em;
		width: 1em;
		height: 1em;
	}
}
/*
 **************************************
	BUTTONS
 **************************************
*/
.button-bar {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.button {
	font-weight: bolder;
	min-width: 200px;
	text-align: center;
	color: var(--white);
	background-color: var(--red);
	border-radius: 10px;
	border: none;
	text-align: center;
	list-style: none;
	text-decoration: none;
	cursor: pointer;
	padding: 1em;
	margin-top: 10%;
	margin-bottom: 10%;
	font-family: var(--font-default);

}	

.button:hover {
	transform:scale(110%);

}
.button--reset {
	background-color: var(--blue);
}

@media (min-width: 800px) {

	.button {
		width: 300px;
	}
}

/*
 **************************************
	FORM
 **************************************
*/
.form-content {
	display: flex;
	flex-direction: column;
}
.form-part {
	display: flex;
	flex-direction: column;
	margin-bottom: 6em;
	line-height: 1.5em;
	color: grey;
}

.input__form {
	border: none;
	box-shadow: 0px 4px 6px var(--blue-light);
	border-radius: 10px;
	height: 2.5em;
	font-family: 'Roboto'
	
}

.input__form:focus {
	border-color: grey;

}
.textarea__form {
	border: none;
	box-shadow: 0px 15px 10px var(--blue);
	border-radius: 10px;
	font-family: 'Roboto'

}
.asterix {
	color: var(--red);
}


@media (min-width: 800px) {
	
	.form-content {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-evenly;
	}
	.form-part {
		justify-content: flex-start;
	}

	.input__form {
		width: 400px;
	}

}

/*
 **************************************
	INSPIRATION
 **************************************
*/

.block-wrapper {
	display: grid;
	grid-template-columns: auto;
	gap: 0.25em;
}

.block__item {
	padding: 10%;
	line-height: 1.5;
	text-align: center;
	font-size: 1.25em;
	color: grey;
	box-shadow: 0px 4px 6px var(--blue-light);
    border-radius: 10px;
}

.block__item:hover {
	transform:scale(105%);
	background-color: var(--blue);
	color: var(--white);
}

@media (min-width: 800px) {
	.block-wrapper {
		grid-template-columns: repeat(3, minmax(100px,600px));
		gap: 30px;
		justify-content: space-evenly;
		align-self: center;
		}
	.block__item {
		width: auto;
		height: 300px;
		text-align: center;
	}
}

/*
 **************************************
	HOW DOES IT WORK
 **************************************
*/

.block__item--big {
	text-transform: uppercase;
	text-align: center;
	font-weight: 900;
	color: var(--blue);
	font-size: 4em;

}