/** VARIABLES */

:root {
  --mcolor: #FFA405; /** h1 and bold **/
  --mvariant: #FFA405; /** back of button **/
  --mlight: #FFAF15; /** logo **/
  --lightgrey: #D38D3B; /** credit **/
  --hfcolor: #582500; /** text in header and footer **/
  --text: #582500;
  --background: #FFE58F;
  --dark:#FFA700;
  --darkest:#FFB745; /** banner **/
  --mfont : 'Pathway Gothic One', Arial, sans-serif;
  --pfont: Delius, Arial, sans-serif;
  --hfont: Indie Flower, Arial, sans-serif;
  --shadow:#744C00;
}

/** HEADER: Logo */

.logo {
    margin-left:10%;
    margin-top:1%;
	text-shadow: 1.5px 1.5px 1.5px var(--shadow);
	width:200px;
}

.logop1 {
	font-size: 40px;
	color:white;
	height:32px; 
	letter-spacing: 2px;
}

.logop2 {
	font-size:40px;
	color:var(--mlight); 
	font-weight:bold;
}

.collectief {
	color:white; 
	padding-left:3px;
	margin-top:-4px; 
	letter-spacing:4.8px;
}


/** HEADER: General */

.topnavwrapper {
    margin-top: 0.5%;
	background-color: var(--darkest);
	height: 40px;
	font-size:18px;
	width:100%;
	opacity: 0.8;
}

.topnav {
	padding-right: 10%;
}

.topnav a {
	position:relative;
    float: right;
    text-align:center;
    padding: 10px 30px;
    color:var(--hfcolor);
    text-decoration:none;
    font-family: var(--mfont);
}

@media screen and (max-width: 400px) {
	.topnav a {
		padding: 10px 10px;
	}
}

.topnav a:hover {
    background-color: var(--mvariant);
    color:#FFD673;

}

.topnav a.active {
    color:#FFD673;
}



/** HEADER: Dropdown menu */

button {
	all: unset;
}

.dropdown { 
    display: block; 
    position: relative; 
} 

.dropdown-content {
    display: none;
	float:right;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown:hover .dropdown-content {
      display: grid;
	  background: var(--darkest);
}

.dropdown:hover .wie {
	display:none;
}

.dropdown:hover a {
	padding: 10px 13.8px;
}



/** FOOTER */

body::after {
  content: '';
  height:100%;
  display: block;
  height: 40px; /* Set same as footer's height, it's to make sure the content never disappears behind it at the end of the page */
}

footer {
	position:fixed;
	bottom:0;
    background-color: var(--darkest);
    width:100%;
	opacity: 0.95;


}

.bottomnav {
	margin-left:10%;
	margin-right:10%;
	position:relative;
}

.bottomnav > p {
	text-align: center;
	color:var(--hfcolor);

}

.bottomnav a {
	color: var(--hfcolor);
}

.bottomnav a:hover {
    color:var(--mcolor);
	font-weight:bold;
}

/** CENTER */
	
.center {
    margin:auto;
    position:center;
    width:55%;
    min-width:300px;
    margin-top: 0%;
    margin-bottom:5%;
}

.center-picture {
	width:100%;
	height:100%;
	display:block;
	background-position: center;
	height: 75vh;
}


.picture-left {
	width: 400px;
	float:left;
	padding-top:8px;
	margin-right: 50px;
	margin-bottom: 40px;
}

.picture-left img {
	width:100%;
	border-radius: 25px;
}

.picture-right {
	width: 450px;
	float:right;
	padding-top:8px;
	margin-left: 50px;
	margin-bottom: 40px;
}
.picture-right img {
	width:100%;
	border-radius: 25px;
}


@media screen and (max-width: 735px) {
	.picutre-left img {
		width: 90%;
	}
	.picture-left  {
		width:100%;
	}
	
	.picutre-right img {
		width: 90%;
	}
	.picture-right  {
		width:100%;
	}
}


.quote {
	padding-left: 50px;
	padding-right: 70px;
	float:left;
}

.quote p {
	font-style:italic;
	font-size: 17px;
	letter-spacing: 0.5px;
	font-family: var(--mfont); 
	color: var(--shadow);
	text-align:center;
}

.notice {
	background-color:var(--darkest);
	width:100px;
	float:left;
	block-size:fit-content;
	padding-top:-10px;
	padding: 10px;
	display:left;
}

.notice a {
	font-size:20px;
}

.center {
	background: rgba(1000, 1000, 1000, 0.0);
}

.center b {
	color:var(--mcolor);
	text-shadow: 1px 1px 0px var(--shadow);
}


.center a {
	text-decoration: underline;
	color:blue;
	color:var(--mvariant);
}

body {
	padding:0;
	margin:0;
	background-image: url("img/background.jpg");
}


/** TEXT */
	
h1 {
	word-break:keep-all;
	color:var(--mcolor);
	font-size: min(max(20px, 3.5vh), 40px);
	font-family: var(--hfont);
	letter-spacing:6px;
	font-weight: bold;
	text-shadow: 1px 1px 1px var(--shadow);
	margin:40px 0px 30px 0px;
}

h2 {
	text-align: left;
	color:var(--mcolor);
	font-size:30px;
	font-family: var(--mfont);
	letter-spacing:2px;
	font-weight: normal;
	text-shadow: 1px 1px 1px (--shadow);
	margin:30px 0px 20px 0px;
}
h3 {
	text-align: left;
	color:var(--text);
	font-size:25px;
	font-family: var(--mfont);
	letter-spacing:2px;
	font-weight:bold;
	text-shadow: 2px 2px 3px (--shadow);
	margin:30px 0px 15px 0px;
}

p {
	text-align: justify;
	color:var(--text);
	font-family: var(--pfont);
	font-size:16px;
	letter-spacing: 1.5px;
	line-height: 1.5;
}

.logo p {
	font-family:var(--mfont);
	font-size:18px;
}

a {
	text-align: center;
	color:var(--text);
	font-family: var(--mfont);
	text-decoration:none;
}

hr {
	height:1px;
	border:0;
	background-color:white;
	color:white;
}

.heading-year {
	font-size:20px;
}

.picture-credit {
	font-size: 11px;
	letter-spacing: 0.5px;
	text-shadow: none;
	color: var(--lightgrey);
	text-align:right;
	padding-top:0px;
	margin-top:0px;
}