@import url("shared.css");

:root {
	--page-background: #110033;
	--content-background: hsla(260, 100%, 30%, 50%);
	--content-background: none;
	--primary-color: white;
	--accent-color: #ee00aa;
	--nav-bar-height: 0;
	--icon-size: min(16rem, 50vh, 40vw);
	--icon-corner-radius: calc(var(--icon-size) / 16);
}

#content {
	padding-bottom: 0;
}

#content>* {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

hr {
	border: none;
	border-top: 1px solid hsl(260, 100%, 30%);
}

/* header */

#content>header img {
	width: 640px;
	max-height: 30vh;
}

#dict {
	font-family: serif;
	font-style: italic;
}

#dictword {
	font-weight: 800;
}

/* app list */

#app-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/* cancel out margins from flexbox spacing */
	margin: -0.5rem;
	margin-bottom: 0.5rem;
}

#app-list>* {
	width: var(--icon-size);
	margin: 0.5rem;
	border-radius: 1rem;
	overflow: hidden;
	transition-duration: 0.5s;
	transition-property: filter, transform;
	filter: brightness(100%);
	/* need to provide this here so the anim works */
}

#app-list>*:hover {
	transition-duration: 0.1s;
	filter: brightness(120%);
	transform: scale(1.02, 1.02);
}

/* contact list */

#contact-list {
	max-width: 17rem;
	/* 16 + 2 * 0.5 (inner margin) */
	display: flex;
	flex-direction: column;
	align-items: stretch;
	margin: 0px auto;
	/* cancel out margins from flexbox spacing */
	margin-top: -0.5rem;
	margin-bottom: 0.5rem;
}

#contact-list>* {
	margin: 0.5rem;
	border-radius: 1rem;
	overflow: hidden;
	transition-duration: 0.5s;
	transition-property: filter, transform;
	filter: brightness(100%);
	/* need to provide this here so the anim works */
}

#contact-list>*:hover {
	transition-duration: 0.1s;
	filter: brightness(120%);
	transform: scale(1.02, 1.02);
}

#contact-list>div>a>div {
	padding: 12px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

#contact-list>div>a>div>p {
	flex-grow: 1;
	margin: 0px;
	padding: 0px;
}

#contact-list img {
	display: inline-block;
	width: 32px;
}

#contact-list a {
	text-decoration: none;
	color: #ffffff;
}