body {
	background-color: #212121;
	display: grid;
}

html * {
	color: rgba(255, 255, 255, 0.8);
	font-family: "Dancing Script", cursive;
  	font-optical-sizing: auto;
 	font-weight: 400;
  	font-style: normal;
}

a {
	text-decoration: none;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 100,
  'GRAD' 0,
  'opsz' 24
}

h2 {
	font-size: 3em;
	display: block;
	text-align: center;
}

div.actions {
	position: fixed;
	bottom: 0px;
	right: 0px;
	display: flex;
	flex-direction: column;
}

div.actions .action-icon {
	opacity: 0.6;
	cursor: pointer;
	margin-right: 8px;
}

div.actions .action-icon:hover {
	opacity: 0.9;
}

img.dm_logo {
	width: 24px;
	height: 24px;
}

h2.title {
	margin: 24px auto 0;
}

div.img-card {
	margin: 48px auto;
	width: 50%;
	max-width: 400px;
}

div.img {
	width: 100%;
	aspect-ratio: 2 / 3;
	background-position: center !important;
	background-size: cover !important;
	border: 1px solid #999;
	border-radius: 8px;
}

span.name {
	display: block;
	text-align: end;
	font-size: 1.5em;
	margin-top: 4px;
}

@media (max-width: 640px) {
	div.img-card { width: 60%; }
}

@media (max-width: 480px) {
	div.img-card { width: 70%; }
}

@media (max-width: 400px) {
	div.img-card { width: 75%; }
}

/*
@media (min-width:320px)  {
	div.img-card { width: 80%; max-width: 400px; }
}
@media (min-width:481px)  {
	div.img-card { width: 70%; max-width: 400px; }
}
@media (min-width:641px)  {
	div.img-card { width: 60%; max-width: 400px; }
}
@media (min-width:961px)  {
	div.img-card { width: 50%; max-width: 340px; }
}
@media (min-width:1025px) {
	div.img-card { width: 40%; max-width: 360px; }
}
@media (min-width:1281px) {
	div.img-card { width: 35%; max-width: 400px; }
}
*/