/* USED FONTS */
@font-face {
	font-family: "mono";
	src: url(RobotoMono-Regular.ttf);
}

@font-face {
	font-family: "monobold";
	src: url(RobotoMono-Bold.ttf);
}

@font-face {
	font-family: "inter";
	src: url(Inter-Regular.ttf);
}

/* SCREEN */
body {
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	top: 0;
	left: 0;
	background-color: rgb(249, 249, 250);
}

#viewport {
	position: relative;
	top: 0;
	left: 0;
	width: 98%;
	height: 82%;
}

/* HEADER FILTERS AND ELEMENTS */
.filters {
	margin: 0;
	padding: 1%;
	padding-left: 3.2%;
	padding-top: 1%;
	font-family: "mono";
	font-size: 12px;
}

.topnav {
	padding-top: 4%;
	padding-bottom: 3%;
	display: flex;
	flex-direction: row;

}

.topnav a {
	color: rgb(74, 74, 74);
	text-decoration: none;
	font-size: 22px;
}

.subtitle{
	font-size: 10px;
	font-weight: 0;
}

.rightnav {
	padding-top: 2%;
	padding-bottom: 1%;
	line-height: 6px;
	padding-left: 13%;
	appearance: none;
	color: black;
	padding-left: 7%;

}

.rightnav a {
	appearance: none;
	color: black;
}


.titleabout {
	padding-left: 0.5em;
}

.lefttopnav {
	line-height: 10px;
}

.backnav {
	padding-top: 3%;
	padding-bottom: 2%;
	display: flex;
	flex-direction: row;
}

.t1 {
	font-size: 11px;
	font-weight: bold;
	font-family: "inter";
	letter-spacing: 0.25px;
	padding-top: 0.3%;
	color: rgb(43, 40, 40);
}

.t2 {
	font-size: 14px;
	font-family: "inter";
}


.sub {
	font-size: 8px;
	font-family: "inter";
	padding-inline-start: 9px;
	line-height: 2.5px;
	margin-block-start: 0;
	margin-block-end: 0.5em;
	padding-left: 0.9em;
}

.top {
	margin-block-start: 0;
	margin-block-end: 0.5em;
	padding-left: 0.5em;
}


/* HEADER GRID */
.filters {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(5, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 1.5px;
	height: calc(13vh);
	width: calc(93vw);
}

.div1 {
	grid-area: 1 / 1 / 2 / 5;;
	border-top: solid 0.8px black;
	border-bottom: solid 0.8px black;
	width: 100%;
	height: 100%;
	text-align: left;
}

.div2 {
	grid-area: 2 / 1 / 3 / 3;;
	border-bottom: solid 0.8px black;
	width: 100%;
	height: 100%;
}

.div3 {
	grid-area: 2 / 3 / 3 / 5;
	border-bottom: solid 0.8px black;
	width: 100%;
	height: 100%;
}

.div4 {
	grid-area: 1 / 5 / 2 / 6;
	border-bottom: solid 0.8px black;
	border-top: solid 0.8px black;
	border-left: solid 0.8px black;
	width: 100%;
	height: 100%;
}

.div4:hover {
	background-color: rgb(187, 187, 187, 0.80);

}

.div4-1 a {
	appearance: none;
	color: black;

}

.div4-1 {
	grid-area: 1 / 5 / 2 / 6;
	border-bottom: solid 0.8px black;
	border-top: solid 0.8px black;
	border-left: solid 0.8px black;
	width: 100%;
	height: 100%;
	background-color: rgba(187, 187, 187, 0.80);
}

.div5{
	grid-area: 2 / 5 / 3 / 6;
	border-bottom: solid 0.8px black;
	width: 100%;
	height: 100%;
}

/* CHECKBOXES */
input[type=checkbox] {
	appearance: none;
}

input[type=checkbox]:after {
	content: "";
	border: 1px solid rgb(43, 40, 40);
	display: block;
	opacity: 1;
	width: 10px;
	height: 10px;
	margin-right: 5px;
}

input[type=checkbox]:hover:after {
	background-color: rgb(43, 40, 40);
	opacity: 0.7;
}

input[type=checkbox]:checked:after {
	background-color: rgb(43, 40, 40);
}


/* HOVER-BOXES CONTENT */
#detail {
	width: 140px;
	height: 120px;
	background-color: rgb(77, 72, 72);
	color: white;
	display: none;
	position: absolute;
}

#detail.active {
	display: block;
}

.icon {
	height: 58px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-top: 3px;
}

.author {
	font-family: "inter";
	font-size: 8px;
	padding-left: 4px;
	padding-bottom: 1px;
}

.keywords{
	font-family: "mono";
	font-size: 7px;
	padding-top: 2px;
	padding-left: 4px;
	width: 90%;
	display: flexbox;
}


/* ABOUT-PAGE CONTENT */
.divabout {
	width: 48%;
	padding-left: 12%;
	padding-top: 4%;
	font-family: "inter";
	font-size: 14px;
	line-height: 25px;

}

.line {
	border-left: 0.9px solid black;
	height: 40%;
	width: 1%;
	position: absolute;
	right: 21.3%;
	padding-top: 2%;

}

.p1 {
	line-height: 8px;
	font-family: "mono";
	font-size: 11px;
}

.p2 {
	line-height: 8px;
	font-size: 10px;
}

.p3 {
	line-height: 2px;
	font-family: "mono";
	font-size: 11px;
	padding-top: 20%;
}

.p3 a {
	color: rgb(74, 74, 74);
}

.divthanks {
	width: 20%;
	padding-left: 19.5%;
	padding-top: 4%;
	font-family: "inter";
	font-size: 10px;
	line-height: 12px;
	color: rgb(74, 74, 74)
}

.paragraph {
	padding-bottom: 2.2%;
}

.wrap {
	display: flex;
	flex-direction: row;
}


/* SAFARI DISCLAIMER */
.alert-safari {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	color: rgb(43, 40, 40);
	margin-top: 10%;
	height: fit-content;
}

.disclaimer-1 {
	font-family: "monobold";
	font-size: 14px;
}

.disclaimer-2 {
	font-family: "inter";
	font-size: 14px;
}

.browser-list {
	font-family: "inter";
	font-size: 14px;
}


/* ------------- MOBILE VERSION ------------*/

@media only screen and (max-width: 768px) {
    
	
		.filters{
		height: calc(23vh);
		width: calc(95vw);
		font-size: 20;
		}

		#viewport {
		position: relative;
		top: 0;
		left: 0;
		width: calc(96vw);
		height: calc(75vw);
		}

	

	}