/*  _____                                                             _____  */
/* ( ___ )                                                           ( ___ ) */
/*  |   |~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|   |  */
/*  |   |                                                             |   |  */
/*  |   |           _    _                                            |   |  */
/*  |   |          / \  | | __ _  ___ _ __ ___   ___  ___ _ __        |   |  */
/*  |   |         / _ \ | |/ _` |/ _ \ '_ ` _ \ / _ \/ _ \ '_ \       |   |  */
/*  |   |        / ___ \| | (_| |  __/ | | | | |  __/  __/ | | |      |   |  */
/*  |   |       /_/   \_\_|\__, |\___|_| |_| |_|\___|\___|_| |_|      |   |  */
/*  |   |                  |___/                                      |   |  */
/*  |   |                                                             |   |  */
/*  |___|~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|___|  */
/* (_____)                                                           (_____) */

body{
	margin: 0 auto;
	padding: 0;
	font-family: Seaford, Helvetica, Arial, sans-serif;
	background-color: #3e3e3e;
}

/* dit activeert wanneer een pop-up menu open is zodat je niet nog op de achtergrond kan scrollen */
body.noScroll{
	overflow: hidden;
}

/* hoofdcontainer voor alle content */
#wrapper{
	margin: 0 auto;
	width: 80%;
	min-height: 84vh;
}

/* tooltip dat te zien is tijdens hoveren over icoontjes */
.tooltip{
	opacity: 0;
	position: absolute;
	transition: 200ms;
	background: #3e3e3e;
	border: 3px solid #2f2f2f;
	color: #fff;
	border-radius: 5px; /* ronden hoeken */
	padding: 5px 10px;
	left: 50%;
	transform: translateX(-50%);
	bottom: 100%;
	margin-bottom: 5px;
	z-index: 100;
	pointer-events: none;
	text-align: center;
}

.iconButtons{
	background: none;
	border: none;
	cursor: pointer;
	position: relative;
}

.iconButtons:hover .tooltip{
	opacity: 1;
}

.externalLinks{
	color: #8af;
	transition: 50ms;
}

.externalLinks:hover{
	color: #46b;
}

/* voor tijdens het switchen van thema, anders ziet het er lelijk uit */
.disableTransitions *{
  transition: none !important;
}

/* voor bij het zoekspelletje om de victoryVideo te verstoppen tot het halen */
.hideElement{
	display: none;
}


/*  _____                                               _____  */
/* ( ___ )                                             ( ___ ) */
/*  |   |~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|   |  */
/*  |   |                                               |   |  */
/*  |   |        _   _                _                 |   |  */
/*  |   |       | | | | ___  __ _  __| | ___ _ __       |   |  */
/*  |   |       | |_| |/ _ \/ _` |/ _` |/ _ \ '__|      |   |  */
/*  |   |       |  _  |  __/ (_| | (_| |  __/ |         |   |  */
/*  |   |       |_| |_|\___|\__,_|\__,_|\___|_|         |   |  */
/*  |   |                                               |   |  */
/*  |   |                                               |   |  */
/*  |___|~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|___|  */
/* (_____)                                             (_____) */


header{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	background-color: #333;
	border-radius: 10px;
	margin: 10px 0px;
}

#logo{
	width: 120px;
	filter: invert(100%) brightness(75%);  /* grijs maken, maar dan voor plaatjes */
}

header .tooltip{
	top: 100%;
	bottom: inherit;
	margin-top: 5px;
}

/* light mode waarschuwing moet niet te zien zijn op dark mode */

#themeDisclaimer{
	display: none;
}

/* 
dit staat namelijk in lightMode.css:

#themeDisclaimer{
	text-align: center;
	font-weight: bold;
}*/

.headerIcons{
	width: 20px;
	filter: invert(100%) brightness(75%); /* grijs maken, maar dan voor plaatjes */

}

/*  _____                                                         _____  */
/* ( ___ )                                                       ( ___ ) */
/*  |   |~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|   |  */
/*  |   |                                                         |   |  */
/*  |   |        _   _             _             _   _            |   |  */
/*  |   |       | \ | | __ ___   _(_) __ _  __ _| |_(_) ___       |   |  */
/*  |   |       |  \| |/ _` \ \ / / |/ _` |/ _` | __| |/ _ \      |   |  */
/*  |   |       | |\  | (_| |\ V /| | (_| | (_| | |_| |  __/      |   |  */
/*  |   |       |_| \_|\__,_| \_/ |_|\__, |\__,_|\__|_|\___|      |   |  */
/*  |   |                            |___/                        |   |  */
/*  |   |                                                         |   |  */
/*  |___|~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|___|  */
/* (_____)                                                       (_____) */


nav{
	float: left;
	width: 100%;
	margin-bottom: 20px;
	display: flex;
	flex-wrap: wrap; /* dan wrapped het naar beneden als er geen plek meer is */
	transition: 200ms;
}

.navButtons{
	flex: 1; /* verdeeld alle buttons eerlijk over de flex display (nav) */
	text-align: center;
	text-decoration: none;
	color: #7c7;
	transition: 200ms;
	background-color: #2a2a2a;
	border-radius: 10px; /* ronde hoeken */
	padding: 8px 5px 8px 5px;
	margin: 1px;
}

.navButtons:hover{
	color: #cf9;
	font-weight: bold;
	background-color: #6a6a6a;
}


.navIcons{
	width: 11px;
	filter: invert(100%);
}

/*  _____                                             _____  */
/* ( ___ )                                           ( ___ ) */
/*  |   |~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|   |  */
/*  |   |                                             |   |  */
/*  |   |           _         _   _      _            |   |  */
/*  |   |          / \   _ __| |_(_) ___| | ___       |   |  */
/*  |   |         / _ \ | '__| __| |/ __| |/ _ \      |   |  */
/*  |   |        / ___ \| |  | |_| | (__| |  __/      |   |  */
/*  |   |       /_/   \_\_|   \__|_|\___|_|\___|      |   |  */
/*  |   |                                             |   |  */
/*  |   |                                             |   |  */
/*  |___|~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|___|  */
/* (_____)                                           (_____) */

#homeImg{
	border: 10px;
	width: 1500px;
	max-width: 100%; /* zodat het altijd past binnen de article, ook met inzoomen */
	border-radius: 20px;
}

#homePaginaArticle{
	text-align: center;
	align-items: center;
}

#homePaginaArticle h1{
		font-size: 50px;
}

#homePaginaArticle p{
		font-size: 25px;
}

#homePaginaArticle a{
		font-size: 20px;
		text-decoration: none;
		color: #5a5;
		text-decoration-line: underline;
		font-style: italic;	
}

#victoryVideo {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

article{
	background-color: #4a4a4a;
	border-radius: 30px;
	padding: 1px 20px 20px 20px;
	color: #5a5;
	clear: left;
	min-height: 10%;
	font-size: 16px;
}

/* flexbox container voor artikelen met tekst en afbeelding naast elkaar */
.flexArticle{
  display: flex;
  gap: 20px;
  width: 100%;
  align-items: flex-start;
}

.flexArticle img{
  flex: 1;
  width: 600px;
  object-fit: cover;
  border-radius: 10px;
}

/* plaatjes gaan onder tekst op kleinere schermen */
@media(max-width: 1500px){
  .flexArticle{
    flex-direction: column;
  }

  .flexArticle img{
	    width: 100%; /* zodat het de hele breedte van de article neemt */
	    flex: none;
	  }
}

/*  _____                                           _____  */
/* ( ___ )                                         ( ___ ) */
/*  |   |~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|   |  */
/*  |   |                                           |   |  */
/*  |   |        _____           _                  |   |  */
/*  |   |       |  ___|__   ___ | |_ ___ _ __       |   |  */
/*  |   |       | |_ / _ \ / _ \| __/ _ \ '__|      |   |  */
/*  |   |       |  _| (_) | (_) | ||  __/ |         |   |  */
/*  |   |       |_|  \___/ \___/ \__\___|_|         |   |  */
/*  |   |                                           |   |  */
/*  |   |                                           |   |  */
/*  |___|~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|___|  */
/* (_____)                                         (_____) */

.footerIcons{
	width: 28px;
	filter: invert(100%) brightness(75%);  /* grijs maken, maar dan voor plaatjes */
}

footer{
	color: #777777;
	font-weight: bold;
	padding: 20px;
	height: 100%;
	margin-bottom: 30px;
	gap: 12px;
	display: flex;
	justify-content: end; /* align alle plaatjes naar het einde */
}

/*  _____                                            _____  */
/* ( ___ )                                          ( ___ ) */
/*  |   |~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|   |  */
/*  |   |                                            |   |  */
/*  |   |        __  __                  _           |   |  */
/*  |   |       |  \/  | ___ _ __  _   _( )___       |   |  */
/*  |   |       | |\/| |/ _ \ '_ \| | | |// __|      |   |  */
/*  |   |       | |  | |  __/ | | | |_| | \__ \      |   |  */
/*  |   |       |_|  |_|\___|_| |_|\__,_| |___/      |   |  */
/*  |   |                                            |   |  */
/*  |   |                                            |   |  */
/*  |___|~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|___|  */
/* (_____)                                          (_____) */

/* de standaard lijst bolletjes willen altijd boven elkaar staan, dat vond ik lelijk bij gecentreerde tekst, dus heb ik dit geschreven */
.menuBox ul{
	list-style: none;
	padding: 0;
}

/* dit maakt weer een nieuw bolletje aan het begin van elke list item */
.menuBox ul li::before{
	content: "•";
	font-size: 22px;
	margin-right: 10px;
	position: relative;
	top: 3px; /* verplaatsen om op de goeie hoogte te zijn naast tekst */
}

/* grijze achtergrond overlay wanneer een menu open is, normaal gesproken niet te zien */
.menuModal{
	background-color: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1; /* hierdoor is hij achter alles zodat je er niks mee kan */
	opacity: 0; /* en hierdoor zie je hem sowieso niet, voor de zekerheid */
	display: flex;
	align-items: center;
	justify-content: center;
}

/* wanneer het de .open class heeft word het zichtbaar (door javascript) */
.menuModal.open{
	opacity: 1;
	z-index: 1;
}

/* de pop-up zelf voor mijn menu's (info, doneren, contact, credits, bronnen) */
.menuBox{
	background-color: #3a3a3a;
	border-radius: 10px;
	text-align: center;
	width: 400px;
	max-width: 80vw; /* zodat het er ook nog mooi uit ziet op kleinere schermen */
	max-height: 65%;
	overflow: auto; /* zodat je kan scrolling als hij te lang is */
	padding: 20px;
	color: #ddd;
	position: relative;
	z-index: 2;
	margin: 0 auto;	
}

.menuBox h2{
	color: #fff;
}

.menuBox h3{
	margin-bottom: 10px;
	color: #cfc;
}

.menuBox i{
	color: #aaa;
}

.closeMenuButton{
	border: 0; /* een knop heeft altijd een (lelijke) standaard rand */
	background: none; /* en een achtergrond, die haal ik beide hier weg */
	cursor: pointer;
	position: absolute;
	top: 20px;
	right: 20px;
}

.closeMenuIcon{
	width: 15px;
	filter: invert(100%) brightness(80%);  /* grijs maken, maar dan voor plaatjes */
}


/*  _____                                                                        _____  */
/* ( ___ )                                                                      ( ___ ) */
/*  |   |~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|   |  */
/*  |   |        __  __                    _       _                     _       |   |  */
/*  |   |       |  \/  | ___ _ __  _   _  (_)_ __ | |__   ___  _   _  __| |      |   |  */
/*  |   |       | |\/| |/ _ \ '_ \| | | | | | '_ \| '_ \ / _ \| | | |/ _` |      |   |  */
/*  |   |       | |  | |  __/ | | | |_| | | | | | | | | | (_) | |_| | (_| |      |   |  */
/*  |   |       |_|  |_|\___|_| |_|\__,_| |_|_| |_|_| |_|\___/ \__,_|\__,_|      |   |  */
/*  |   |                                                                        |   |  */
/*  |___|~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|___|  */
/* (_____)                                                                      (_____) */



.sourcesTableImages{
	width: 16px;
}

#donateButton:hover{
	background-color: #7c7;
	border: 3px solid #5a5;
}

#donateMenuModal p{
	color: #ccc;
	font-size: 14px;
}

#donateButton{
	background-color: #5a5;
	border: 3px solid #383;
	font-weight: bold;
	transition: 200ms;
	text-decoration: none;
	cursor: pointer;
	padding: 10px 15px;
	width: 100px;
	margin-top: 10px;
	border-radius: 10px; /* ronde hoeken */
	color: #fff;
}

#donateButtonDiv{
	margin-top: 30px;
	margin-bottom: 30px;
}

#openInfoMenu{
	border: 0;
	background: none;
	cursor: pointer; /* dan lijkt het wat meer op een knop */
}

#sourcesMenuModal table{
  border-collapse: collapse; /* zodat er maar 1 border is ipv los bij elke cel (met marge ertussen) */
  width: 100%;
}

#sourcesMenuModal td, th{
  border: 1px solid #fff;
  text-align: left;
  padding: 8px;
}

/* geef alle even tabel rijen een eigen kleur */
#sourcesMenuModal tr:nth-child(even){
  background-color: #333;
}

/* geef alle oneven tabel rijen een andere kleur */
#sourcesMenuModal tr:nth-child(odd){
  background-color: #444;
}

/*  _____                                                   _____  */
/* ( ___ )                                                 ( ___ ) */
/*  |   |~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|   |  */
/*  |   |                                                   |   |  */
/*  |   |        _____          _                   _       |   |  */
/*  |   |       |__  /___   ___| | _____ _ __   ___| |      |   |  */
/*  |   |         / // _ \ / _ \ |/ / __| '_ \ / _ \ |      |   |  */
/*  |   |        / /| (_) |  __/   <\__ \ |_) |  __/ |      |   |  */
/*  |   |       /____\___/ \___|_|\_\___/ .__/ \___|_|      |   |  */
/*  |   |                               |_|                 |   |  */
/*  |   |                                                   |   |  */
/*  |___|~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|___|  */
/* (_____)                                                 (_____) */

/* checkt of scherm smaller is dan 1200px, zo ja dan komen de plaatjes onder elkaar ipv naast elkaar */
@media(max-width: 1200px){
	#gameFTD{
	  flex-direction: column;
	}
}

#gameFTD{
  display: flex;
  gap: 20px;
  width: 1600px;
  max-width: 100%; /* zodat het altijd binnen de article blijft, ook met inzoomen */
}

.FTDImages{
	flex: 1;
	width: 100%;
	max-height: 600px;
	object-fit: fill;
	border: 2px solid black;
	box-sizing: border-box;
}

.FTD{
	position: relative;
}

.FTDmarker{
  position: absolute;
  border: 2px solid red;
  border-radius: 50%;
  aspect-ratio: 1 / 1; /* zodat de marker een perfecte circle is */
}

#FTDResetButton:hover{
	background-color: #7c7;
	border: 3px solid #5a5;
}

#FTDResetButton{
	background-color: #5a5;
	border: 3px solid #383;
	font-weight: bold;
	transition: 200ms;
	text-decoration: none;
	cursor: pointer;
	padding: 10px 15px;
	width: 100px;
	margin-top: 10px;
	border-radius: 10px;
	color: #fff;
}