:root {
    --bg-color: #111b1d;
    --accentcolor1: #5f817d;
    --accentcolor2: #CC3F0C; 
    --accentcolor3: #19363f; 
    --accentcolor4: #19231A; 
    --tekstcolor: #e1d8c4; 
}

.navlogo{
	margin: 5px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 5px;
	font-size: 300%;
	display: inline;
}
a:link {
  text-decoration: none;
  color: var(--tekstcolor);
}

a:visited {
  text-decoration: none;
  color: var(--tekstcolor);
}

a:hover {
  text-decoration: underline;
  color: var(--tekstcolor);
}

a:active {
  text-decoration: underline;
  color: var(--tekstcolor);
}
.ivtitle{
	margin-left: 10px;
}

body{
	background-color: var(--bg-color);
	text-align: center;
	margin: 0;
	color: var(--tekstcolor);
	font-family: "Roboto";
	-webkit-appearance:none;
}
html{
	margin: 0;
	-webkit-appearance:none;
}
nav{
	background-color: var(--accentcolor3);
	width: 100%;
	position: fixed;
	top: 0;
}
span{
	margin: 5px;
	font-size: 600%;
}
.title{
	margin-top: 30px;
}
.subtitle {
	font-size: 200%;
	margin-bottom: 5%;
}
/*.title span{
	margin: 5px;
	margin-top: 10%;
	font-size: 600%;
	background-color: var(--bg-color);
}
.subtitle span{
	font-size: 120%;
	margin-bottom: 5%;
	background-color: var(--bg-color);
}*/
.zoek{
	width: 40%;
	height: 48px;
	font-size: 200%;
	border-radius: 10px;
}
.zoekknop{
	min-width: 150px;
	width: 10%;
	height: 50px;
	font-size: 200%;
	border-radius: 10px;
}
.trendingtable{
	font-size: 200%;
	width: 50%;
	margin-left: 25%;
	text-align: left;
}
.background{
	height: 100%;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}
.trendingheader{
  text-align: left;
  margin-left: 25%;
  font-size: 280%;
}

.trzoek:hover{
	background-color: lightgray;
	cursor: pointer;
}

.searchresult{
	min-width: 150px;
	position: absolute;
	width: 39.5%;
	height: fit-content;
	background-color: white;
	margin-left: 25%;
	max-height: 25%;
	overflow: hidden;
	border: 2px solid black;
}

.zoektable{
	color: black;
	width: 100%;
	margin-left: 0px;
	text-align: left;
	font-size: 150%;
}

.trend{
	cursor: pointer;
}
ul{
	list-style-type: none;
	font-size: 200%;
	display: flex;
	margin:  0;
	padding: 0;
	float: right;
}
li{
	text-align: right;
	width: fit-content;
	margin-right: 5px;
	margin-left: 30px;
}



@media only screen and	(max-width:  1300px){
	.thiv{
		display: none;
	}

}
@media only screen and (max-width: 1000px) {
	.trendingtable{
		width: 100%;
		margin-left: 0%;
	}
	span{
		margin: 30px;
		margin-top: 10%;
		font-size: 250%;
	}
	.subtitle{
		font-size: 150%;
	}
	.searchresult{
		min-width: 150px;
		position: absolute;
		width: 39%;
		height: fit-content;
		background-color: white;
		margin-left: 22%;
		max-height: 25%;
	}

}
@media only screen and (max-width: 800px) {
	.zoek{
		width: 60%;
		height: 25px;
		font-size: 100%;
		border-radius: 5px;
	}

	.zoekknop{
		min-width: 75px;
		width: 10%;
		height: 30px;
		font-size: 100%;
		border-radius: 2px;
	}
	.searchresult{
		min-width: 150px;
		position: absolute;
		width: 59%;
		height: fit-content;
		background-color: white;
		margin-left: 15%;
		max-height: 25%;
	}
}
@media only screen and (max-width: 700px) {
	.trendingtable, .trendingheader{
		visibility: hidden;
	}
	.searchresult{
		min-width: 150px;
		position: absolute;
		width: 59%;
		height: fit-content;
		background-color: white;
		margin-left: 13%;
		max-height: 25%;
	}
	nav{
		display: none;
	}
}
@media only screen and (max-height: 800px) {
	body{
		overflow-x: hidden;
	}


}