@import url("./reset.css");
@import url("./root.css");

/* --- General elements: --------------------------------------------------- */

body {
	height: 100vh;
	background-color: #f9f1f2;
	color: black;
	/* line-height: 1.3; */
}

/* --- headings: ----------------------------------------------------------- */

h1 {
	font-size: 3rem;
	font-weight: lighter;
	font-variant-caps: all-small-caps;
}
h2 {
	margin-bottom: 1rem;
	font-weight: lighter;
	font-variant: small-caps;
}
h3 {
	font-size: 1rem;
}

/* --- links: -------------------------------------------------------------- */
a {
	color: #444;
	text-decoration: none;
	text-underline-offset: 4px;
}
a:hover {
	color: #000;
	text-decoration: underline;
}

/* --- text: --------------------------------------------------------------- */

p {
	margin-bottom: 1rem;
}

/* --- buttons: ------------------------------------------------------------ */

button,
input[type="submit"] {
	padding: 5px 10px;
	font-size: 1rem;
}

/* --- lists: -------------------------------------------------------------- */

ul {
	list-style-type: none;
}
li {
	margin-bottom: 1rem;
}

nav {
	z-index: 10;
}
nav ul {
	display: flex;
	justify-content: center;    
}
@media  (min-width: 1024px) {
	nav {
		width: 100%;
	}
	nav ul {
		align-items: center;
	}
}
@media  (max-width: 1023px) {
	nav {
		width: 50px;
		height: 50px;
	}
	nav.main-nav {
		background-image: url("../images/hamburger.svg");
		background-repeat: no-repeat;
		background-size: cover;
	}
	nav ul{
		flex-direction: column;
		gap: 1rem;
		height: fit-content;
		width: fit-content;
		margin-left: 50px;
		padding: 10px 20px 20px 20px;
		background-color: #f9f1f2;
		z-index: 10;
	}
}


nav ul li {
    font-size: 1em;
    letter-spacing: 1px;
    display: inline;
    margin: 0px 18px;
    margin-left: 18px;
}

nav ul li a {
    text-decoration: none;
}

nav ul li a:hover {
    text-decoration: none;
	font-weight: bold;
}

/* --- forms: -------------------------------------------------------------- */

form,
input[type="text"],
input[type="email"],
textarea {
	width: 100%;
}
form {
	margin-bottom: 1rem;
}
input[type="text"],
input[type="email"],
textarea {
	margin-bottom: 10px;
	padding: 3px;
	font-size: 1rem;
}
textarea {
	height: 10rem;
	resize: vertical;
}

label {
	display: block;
}

/* --- De header: ---------------------------------------------------------- */

header {
	display: flex;
	height: 126px;
	padding: 1rem;
	z-index: 10;
}
header h1 {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-grow: 1;
}
header img {
	height: calc(126px - 2rem);
}
header h3 {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-grow: 1;
}

@media (max-width: 1023px) {
	h1 {
		font-size: 1.5rem;
	}
	header {
		flex-direction: row;
		/* height: calc(126px + 3rem); */
		height: 126px;
		margin-bottom: 1rem;
	}
	header div {
		margin: 0;
	}
	.logo {
		display: flex;
		justify-content: flex-start;
	}
}

@media (min-width: 1024px) {
	header {
		flex-direction: row;
	}
	header div {
		width: auto;
	}
	header .logo {
		min-width: calc(220px + 2rem);
	}
	header img {
		display: block;
	}
	header p {
		min-width: calc(220px + 2rem);
	}
}

/* --- Main: --------------------------------------------------------------- */

@media (min-width: 1024px) {
	main {
		height: 100%;
		padding: 1rem 0; 
	}
}

/* --- Footer: ------------------------------------------------------------- */

footer {
	margin-top: 2.5rem;
	padding: 1rem;
	text-align: center;
}

@media (min-width: 360px) and (max-width: 1023px) {
	footer {
		font-size: 16px;
	}
}

@media (min-width: 1024px) {
	footer {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		gap: 1rem;
	}
}

/* --- The pictogram-links: ------------------------------------------------ */

nav.site-nav {
	display: flex;
	align-items: center;
	justify-content: center;
}
nav.site-nav p {
	margin: 0;
}
nav.site-nav img {
	display: block;
	border-radius: 15px;
}

@media (max-width: 1023px) {
	nav.site-nav {
		flex-direction: row;
		position: absolute;
		top: 5px;
		right: 0.5rem;
		width: calc(80px + 1rem);
	}
	nav.site-nav p {
		width: calc(40px + 0.5rem);
	}
	nav.site-nav img {
		width: 40px;
		margin: 0.5rem;
	}
}

@media (min-width: 1024px) {
	nav.site-nav {
		flex-direction: column;
		position: fixed;
		top: 0;
		right: 1rem;
		width: calc(60px + 2rem);
	}
	nav.site-nav p {
		width: calc(60px + 2rem);
	}
	nav.site-nav img {
		width: 60px;
		margin: 0.5rem 1rem;
	}
}

.hero {
	height: calc(100% - 126px);
	display: flex;
	/* align-items: center; */
	justify-content: center;
}
.hero img{
	max-width: 90%;
	max-height: 90%;
}

.hidden {
	display: none;
}