html,
body {
	height: 100%;
}

body {
	color: rgba(0, 0, 0, 0.1);
	text-align: left;
	background-color: rgba(0, 0, 0, 0.8);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	font-family: Roboto;
	font-weight: 400;
}

a,
a:visited,
a:active {
	color: rgba(0, 0, 0, 0.6);
	text-decoration: none;
}

a:hover {
	color: rgba(0, 0, 0, 1);
	cursor: pointer;
}

#container {
	max-width: 1024px;
	margin: 0 auto;
	padding: 20px 40px;
}

h1 {
	font-size: 1.5em;
	margin-top: 40px;
}

#portfolio {
	display: flex;
	margin: 40px 0;
	flex-wrap: wrap;
}

#portfolio a {
	display: flex;
	margin-right: 20px;
	margin-bottom: 20px;
}

#portfolio a img {
	box-shadow: 2px 2px 5px #000;
	border-radius: 14px;
}

#portfolio a:hover img,
#portfolio a.selected img {
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

.popover {
	display: none;
	position: absolute;
	background-color: #000;
	border: 1px solid #ccc;
	padding: 10px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	z-index: 1000;
}

.popover .close {
	position: absolute;
	top: 5px;
	right: 10px;
	cursor: pointer;
	font-size: 20px;
}

#portfolio {
	display: flex;
	margin: 40px 0;
	flex-wrap: wrap;
}

#portfolio a {
	display: flex;
	margin-right: 20px;
}

#app-details {
	display: none;
	opacity: 0.5;
	font-size: 0.9em;
	margin-bottom: 40px;
	margin-left: 20px;
}

#app-details a {
	font-size: 0.8em;
}

footer {
	margin-left: 55px;
	padding-bottom: 40px;
}

/* min height 500 */
@media screen and (min-height: 800px) {
	footer {
		position: fixed;
		bottom: 20px;

	}
}

/* General reset */
body {
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
	background-color: #ffffff;
	/* White background */
	color: #333333;
	/* Dark text for contrast */
}

/* Logo styling */
.logo {
	max-width: 250px;
	margin: 20px;
}

/* App icons section */
.app-icons {
	display: flex;
	justify-content: center;
	gap: 20px;
	padding: 20px;
}

/* App icon styling */
.app-icons img {
	width: 76px;
	height: 76px;
	border-radius: 10px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Minimalist header */
header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 20px;
}

/* Other minimalist adjustments */
/* ...existing code... */

h1.title-section {
	font-weight: 300;
}

h1.title-section span {
	top: -20px;
	position: relative;
	color: #000;
}

h1 img {
	width: 600px;
}

@media screen and (min-width: 1024px) {
	h1 {
		text-align: center;
		margin-bottom: 100px;
	}

	footer {
		text-align: center;
		width: 100%;
		margin-left: 0;
		left: unset;
	}

	div#app-details {
		margin-left: 0;
		width: 100%;
		margin: 0 auto;
		max-width: 540px;
	}
}

@media screen and (max-width: 1023px) {
	h1 {
		text-align: left;
		margin-bottom: 40px;
	}

	section.app-icons {
		justify-content: start;
	}

	.logo {
		max-width: 200px;
	}

	.app-icons img {
		width: 66px;
		height: 66px;
	}
}


.custom-text {
	font-size: 1.0rem;
	font-weight: 300;
	letter-spacing: 2px;
	text-transform: lowercase;
	margin-bottom: 40px;
	color: black;
	text-align: center;
}