home-app/src/styles/contents.css

contents {
	display: flex;
	position: relative;
	top: calc(37.5vh - 0.5rem);

	right: 0vh;
	left: 0vh;

	justify-content: center;
	align-items: flex-start;
	flex-direction: column;
	flex-wrap: nowrap;
}

contents > group {
	display: flex;
	margin: 2.5vh 0;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
}

card {
	display: flex;
	background-color: var(--box-color);
	padding: 2rem;
	min-height: 3rem;
	border-radius: 10px;
	flex-grow: 1;
	margin-top: 1rem;
	margin-right: 0.5rem;
	margin-left: 0.5rem;
	align-content: center;
	justify-content: center;
	align-items: center;

	backdrop-filter: blur(15px);
}

card > a > img {
	max-height: 48px;
	width: 48px;
	vertical-align: middle;
}

group#friend > card > a > img {
	max-height: 48px;
	max-width: 48px;
	border-radius: 100px;
}

group#footer {
	display: block;
	margin: 2rem 0.5rem;
	align-self: flex-start;
	color: var(--font-color-lighter);
	font-size: calc(var(--font-size-description) - 0.4rem);
}

group#footer > * {
	display: block;
}

@media (prefers-color-scheme: dark) {
	card#github > a > img {
		filter: invert(100%);
	}
}

@media screen and (max-width: 1024px) {
	contents {
		top: calc(32.5vh - 0.5rem);
	}
}

@media screen and (max-width: 530px) {
	contents {
		top: 20vh;
	}
}