@import url("https://fonts.googleapis.com/css2?family=Homemade+Apple&family=Merriweather:wght@300&display=swap");
:root {
	--txt-color-gray: #555;
	--txt-color-darkgray: #3c4858;
	--txt-color-white: #fff;
	--color-light-blue: #6aadcc;
	--color-dark-blue: #04689b;
	--color-important: #f54646;
	--font-serif: "Merriweather", serif;
	--font-hand: "Homemade Apple", cursive;
	--font-sans: Tahoma, Geneva, Verdana, sans-serif;
}

body {
	font-family: var(--font-serif);
	background-color: #e5e5e5;
}

/* menu */

.navbar {
	width: 100%;
	background-color: white !important;
	/* box-shadow: 0 6px 24px lightgrey; */
	box-shadow: 0 1px 10px -6px rgb(0 0 0 / 42%), 0 1px 10px 0 rgb(0 0 0 / 12%),
		0 4px 5px -2px rgb(0 0 0 / 10%);
}

.navbar-collapse {
	flex-grow: 0;
}

.nav-link,
.dropdown-item {
	color: var(--txt-color-gray);
	font-family: var(--font-sans);
}

.dropdown-item:focus,
.dropdown-item:hover {
	color: var(--color-light-blue);
	background-color: transparent;
}

.dropdown-menu {
	border-radius: 3px;
	border: none;
	box-shadow: 0 1px 10px -6px rgb(0 0 0 / 42%), 0 1px 10px 0 rgb(0 0 0 / 12%),
		0 4px 5px -2px rgb(0 0 0 / 10%);
}

.dropdown-menu li {
	padding: 0.25rem;
}

.logo img {
	width: 50px;
}

/* header */

header {
	height: 350px;
	width: 100%;
	background-size: cover;
	background-position: center center;
}

.main-title {
	height: 100%;
	padding: 60px 0 50px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.title,
.sub-title {
	font-family: var(--font-sans);
	color: white;
	text-shadow: 1px 1px 10px black;
}

/* header-images */

.header-home {
	background-image: url(../img/header-image/header-image-main.png);
}

.header-tekentaal {
	background-image: url(../img/header-image/header-image-tekentaal.jpg);
}

.header-schrijven {
	background-image: url(../img/header-image/header-image-schrijven.jpg);
}

.header-schilderen {
	background-image: url(../img/header-image/header-image-schilderen.jpg);
}

.header-workshops {
	background-image: url(../img/header-image/header-image-workshops.jpg);
}

.header-creativiteit {
	background-image: url(../img/header-image/creativiteit.jpg);
	background-position: 0 28%;
}

.header-moodboard {
	background-image: url(../img/header-image/moodboard-header.jpg);
	background-position: 0 60%;
}

/* main */

.main {
	max-width: 100%;
	height: auto;
	padding: 3rem 0 0 0;
	background: white;
}

.main-raised {
	margin: -50px 2rem 0;
	border-radius: 6px 6px 0 0;
	box-shadow: 0 16px 24px 2px rgb(0 0 0 / 14%), 0 6px 30px 5px rgb(0 0 0 / 12%),
		0 8px 10px -5px rgb(0 0 0 / 20%);
}

.none {
	display: none;
}

h2 {
	font-family: var(--font-sans);
	color: var(--color-dark-blue);
	text-align: center;
	margin: 0 0 2rem 0;
}

.bullets {
	list-style: none;
}

.bullets li::before {
	content: "\2022";
	color: var(--color-dark-blue);
	font-weight: bold;
	display: inline-block;
	width: 1em;
	margin-left: -1em;
}

.info-item {
	text-align: center;
}

.info-item h3 {
	font-family: var(--font-sans);
	margin: 30px 0 15px;
	font-size: 1.1rem;
	font-weight: bold;
	color: var(--txt-color-darkgray);
}

.info-item i {
	font-size: 3.75rem;
	color: var(--color-dark-blue);
}

.info-item a {
	text-decoration: none;
}

h4 {
	color: var(--color-dark-blue);
	font-size: 2rem;
	font-family: var(--font-sans);
	margin: 1rem 0;
}

.text-link {
	color: var(--color-light-blue);
	text-decoration: none;
}

.text-link:hover {
	color: var(--color-dark-blue);
}

.row img {
	box-shadow: 0 16px 38px -12px rgb(0 0 0 / 56%), 0 4px 25px 0 rgb(0 0 0 / 12%),
		0 8px 10px -5px rgb(0 0 0 / 20%);
	border-radius: 3px;
	max-width: 100%;
	margin: 15px 0;
}

h5 {
	font-family: var(--font-hand);
	font-size: 1.5rem;
	color: var(--color-dark-blue);
	margin: 1rem 0;
}

h6 {
	color: var(--color-dark-blue);
	font-size: 1.5rem;
	font-family: var(--font-sans);
	margin: 1rem 0;
}

.important {
	color: var(--color-important)
}

.important-block {
	border: solid 2px var(--color-important);
    padding: 10px;
    border-radius: 5px;
    background: #f8ecec;
}

.content-logo {
	width: 60px;
	box-shadow: none !important;
}

.main-footer {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.handwrite {
	font-family: var(--font-hand);
	font-size: 3rem;
}

.sidebar {
	background-color: var(--color-light-blue);
	border-radius: 0.5rem;
	color: white;
	padding: 1rem;
}

/* divider */

.divider {
	background: var(--color-light-blue);
	width: 100%;
}

.divider p {
	color: white;
	padding: 1rem;
	text-align: center;
}

/* section contact */

.contact {
	padding: 6rem 0;
	width: 100%;
	height: auto;
	background-image: url("../img/pondje.jpg");
	background-position: center center;
	background-size: cover;
	box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.7);
}

td {
	color: #eaeaea;
	padding: 7px 12px 7px 0;
}

td.contact-title {
	font-size: 1.4rem;
	font-weight: bold;
	font-family: var(--font-sans);
}

td i {
	font-size: 2rem;
	color: white;
}

.contact p {
	color: #eaeaea;
}

.contact-form {
	width: 100%;
	height: auto;
	border-radius: 6px;
	background: white;
	display: inline-block;
	position: relative;
	margin-top: 3rem;
}

.contact-form label {
	color: #555;
	font-size: 1rem;
}

.contact-form form {
	margin: 2rem 1rem;
}

.contact-form .error {
	color: red;
}

.contact-form input,
.contact-form textarea {
	width: 100%;
	resize: none;
	border: none;
	border-bottom: solid 1px var(--color-light-blue);
	color: var(--color-dark-blue);
	padding: 5px 5px 5px 0;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
	outline: none;
}

.succesMessage:empty,
.errorMessage:empty,
.error:empty {
	display: none;
}

.submitButton {
	box-shadow: 0 2px 2px 0 rgb(106 173 204 / 14%),
		0 3px 1px -2px rgb(106 173 204 / 20%), 0 1px 5px 0 rgb(106 173 204 / 12%);
	background: var(--color-light-blue);
	color: white !important;
	width: inherit !important;
	padding: 1rem 2rem !important;
	border-radius: 3px;
	transition: 0.3s;
}

.submitButton:hover {
	box-shadow: 0 14px 26px -12px rgb(106 173 204 / 42%),
		0 4px 23px 0 rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(106 173 204 / 20%);
}

.contact-form p.alert {
	color: var(--txt-color-darkgray);
	margin-top: 1rem;
}

.contact-header {
	box-shadow: 0 16px 38px -12px rgb(0 0 0 / 56%), 0 4px 25px 0 rgb(0 0 0 / 12%),
		0 8px 10px -5px rgb(0 0 0 / 20%);
	background: var(--color-light-blue);
	color: white;
	margin: -20px 15px 0 15px;
	padding: 17px 10px;
	border-radius: 3px;
}

.contact-header p {
	color: white;
	font-size: 1rem;
	font-family: var(--font-sans);
	font-weight: 700;
	text-align: center;
	margin: 0;
}

.contactpage i,
.contactpage td {
	color: var(--txt-color-darkgray);
}

/* footer */

footer {
	background: #323437;
	padding: 2rem;
	bottom: 0;
}

footer p,
footer a {
	color: #ccc;
	text-decoration: none;
}

.scroll-to-top {
	width: 50px;
	height: 50px;
	position: fixed;
	bottom: 20px;
	right: 85px;
	z-index: 99;
	background: var(--color-dark-blue);
	border-radius: 50%;
	display: none;
	justify-content: center;
	align-items: center;
	color: #eee;
	box-shadow: 0 1px 10px -6px rgb(0 0 0 / 42%), 0 1px 10px 0 rgb(0 0 0 / 12%),
		0 4px 5px -2px rgb(0 0 0 / 10%);
}

/* QUOTES */
q {
	quotes: auto;
	font-style: italic;
}

q::before,
q::after {
	font-size: 1.5rem;
}

blockquote {
	font-weight: bold;
}

/* MEDIA QUERIES */

@media (max-width: 768px) {
	.main-raised {
		margin: 0;
		border-radius: 0;
	}
	.main-title {
		padding: 60px 0 0 0;
	}
}