.album {
}

.not_visible {
	display: none;
}

.flex {
	display: flex;
}

.album__visualizer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.7);
	align-items: center;
	z-index: 100;
}

.album__visualizer_close_container {
	position: absolute;
	top: 1rem;
	left: calc(100% - 1rem);
	transform: translateX(-100%); 
	height: 48px;
	width: 48px;
}

.album__visualizer_close {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.album__visualizer_button {
	color: white;
	border: none;	
	font-size: 2rem;
	background-color: rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
}

.album__visualizer_prev {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
}

.album__visualizer_next {
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translate(-100%, -50%);
	z-index: 5;
}


.album__current_image_container {
	max-height: 90vh;
	width: 90%;
	margin: auto;
}

.album__current_image {
	max-height: 90vh;
	width: 100%; 
	object-fit: contain; 
}

.album__title {
	margin-top: 3rem;
	text-align: center;
}

.album__pictures {
	margin-top: 3rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.album__download_container {
	margin: 3rem 0;
	display: flex;
	justify-content: center;
}

.album__download {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  letter-spacing: 2px;
  text-decoration: none;
  text-transform: uppercase;
  color: #000;
  cursor: pointer;
  border: 3px solid;
  padding: 0.25em 0.5em;
  box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.album__download:active {
  box-shadow: 0px 0px 0px 0px;
  top: 5px;
  left: 5px;
}

@media (min-width: 768px) {
	.album__visualizer_close {
		cursor: pointer;
		transition: scale 0.2s;
	}

	.album__visualizer_close:hover {
		scale: 1.2;
	}

	.album__visualizer_close:active {
		scale: 1;
	}

	.album__visualizer_button {
		font-size: 3rem;
		cursor: pointer;
	}

	.album__visualizer_button:hover {
		background-color: rgba(255, 255, 255, 0.2);
	}

	.album__visualizer_button:active {
		background-color: rgba(255, 255, 255, 0.1);		
	}

	.album__visualizer_next {
		left: calc(100% - 1.5rem);
	}

	.album__visualizer_prev {
		left: 1.5rem;
	}

	.album__pictures {
		margin: 3rem auto 0 auto;
		width: 80%;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 0.5rem;
		justify-content: center;
	}

	.album__picture {
		width: 100%;
		aspect-ratio: 16/9;
		object-fit: contain;
		cursor: pointer;
		transition: scale 0.2s;
	}

	.album__picture:hover {
		scale: 1.05;
	}

	.album__picture:active {
		scale: 1;
	}
}