@media screen and (min-width: 320px) {
    .view {
				z-index: 3;
				width: 100%;
				margin: 0 auto;
    }

		.drop {
				margin: 5px auto;
		}

		div.wrapper {
				z-index: 4;
				width: 100%;
				aspect-ratio: 2 / 3;
				margin: 0 auto;
		}

		div.tile {
				z-index: 5;
				width: 96%;
				height: 98%;
				margin: 0 auto;
				border: 2px solid #E0E0E0;
				border-radius: 10px;
				text-align: center;
		}


		li.box {
				display: block;
				vertical-align: top;
				align: center;
				font-family: Arial, sans-serif;
				font-size: 4vw;
		}

		.desc {
				line-height: 150%;
				/* overflow-x: scroll; */
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
		}

		.details {
				margin: 0 auto;
				padding: 0px;
		}
}

@media screen and (min-width: 800px) {
    .view {
				z-index: 3;
        width: 800px;
				margin: 0 auto;
    }
		.drop {
				margin: 40px auto;
		}

		div.wrapper {
				z-index: 4;
				width: 245px;
				height: 370px;
		}

		div.tile {
				z-index: 5;
				width: 240px;
				height: 360px;
				border: 2px solid #E0E0E0;
				border-radius: 10px;
				text-align: center;
				line-height: 75%;
		}

		li.box {
				display: inline-block;
				vertical-align: top;
				font-family: Arial, sans-serif;
				font-size: 10pt;
		}

		.desc {
				line-height: 125%;
				/* overflow-x: scroll; */
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
		}

		.details {
				margin: 0 auto;
				padding: 2%;
				width: 640px;
				border: 2px solid #E0E0E0;
				border-radius: 10px;
		}
}

@media screen and (min-width: 1024px) {
    .view {
				z-index: 3;
        width: 1024px;
				margin: 0 auto;
    }

		.drop {
				margin: 40px auto;
		}

		div.wrapper {
				z-index: 4;
				width: 245px;
				height: 370px;
		}

		div.tile {
				z-index: 5;
				width: 240px;
				height: 360px;
				border: 2px solid #E0E0E0;
				border-radius: 10px;
				text-align: center;
				line-height: 75%;
		}

		li.box {
				display: inline-block;
				vertical-align: top;
				font-family: Arial, sans-serif;
				font-size: 10pt;
		}

		.desc {
				line-height: 125%;
				/* overflow-x: scroll; */
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
		}

		.details {
				margin: 0 auto;
				padding: 2%;
				width: 640px;
				border: 2px solid #E0E0E0;
				border-radius: 10px;
		}
}

.logobar {
		margin: 20px auto 10px auto;
		width: 640px;
}

.logo {
		font-family: Courier New, sans-serif;
		font-style: bold;
		font-size: 30pt;
		color: #404040;
}

.logo2 {
		font-family: Courier New, sans-serif;
		font-style: italic;
		font-size: 14pt;
		color: #404480;
}

.lang {
		float: right;
}

ul.boxes {
		margin: 0 auto;
		padding: 0px;
}

body {
		font-size: 10pt;
}

html {
		font-size: 11pt;
}

.pic {
		z-index: 10;
		display: block;
		height: 65%;
		width: 90%;
		margin: 5% auto 5% auto;
		object-fit: contain;
}

.desc {
		z-index: 10;
		text-align: left;
		margin: 0 10% 10% 10%;
		/* overflow-x: scroll; */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
}

.nav {
		display: block;
		text-decoration: underline;
		background-color: #f0f0f0;
		color: blue;
		margin: -10% auto auto auto;
		width: fit-content;
		text-align: center;
		cursor: pointer;
}

.home {
		display: block;
		text-decoration: underline;
		background-color: #f0f0f0;
		color: blue;
		margin: auto;
		width: fit-content;
		text-align: center;
		cursor: pointer;
}

.timestamp {
		font-size: 75%;
		font-color: grey;
}

.details {
		font-family: Roboto, Arial, sans-serif;
		font-size: 12pt;
}