/* Contact */
.contact {
	display: flex;
	gap: 20px;
	align-items: center;
}
.contact img {
	width: 20px;
}

/* chanchan.world */
.chan-chan-world img {
	width: 15px
}

.chan-chan-world {
	color: white;
	text-decoration: underline;
	font-size: 12px
}

/* Toast */
.toast {
	position: fixed;
	left: 50%;
	bottom: 200px;
	transform: translateX(-50%) translateY(20px);
	padding: 10px 14px;
	background-color: black;
	border-radius: 8px;
	color: #fff;
	font-size: 14px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
	z-index: 5000;
}

.toast.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* Photo Viewer */
.photo-viewer { 
	min-height:100vh;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:20px;
	padding: 20px;
	margin: 0
}

.photo-viewer img {
	max-width:90vw;
	max-height:80vh;
	border: solid 1px #36ccfd
}

.photo-viewer .controls { 
	display:flex;
	gap:20px;
}

.photo-viewer button { 
	padding:8px 16px;
	color:#36ccfd;
	font-weight:400; 
	border: solid 1px #36ccfd
}

.photo-viewer button:disabled {
	pointer-events:none;
	color: black;
	border-color: black
}

.viewer {
  width: fit-content;
  margin: 0 auto;
}

.toolbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 
}

.counter {
  justify-self: start;
  font-size: 14px;
  color: var(--white);
  opacity: 0.8;
}

.controls {
  display: inline-flex;
  gap: 12px;
  justify-self: center;
}

.spacer {
  justify-self: end;
}

.back {
	padding: 30px 0 60px 0;
}

.lyrics-link {
	padding: 10px 0;
	text-decoration: underline
}

.detail {
		padding: 10px 0;
		font-size: 10px;
		text-align: left;
}