#settings-table {
	--min-width: 0;
	--max-width: 40rem;
	--min-data-width: 16rem;

	margin-inline: auto;
}

#settings-table tr {
	& th {
		padding-top: .5rem;
	}
	&:first-child td {
		padding-top: 0;
	}
}

:where(#edit-account-dialog, #delete-user-dialog) .dialog-content > p {
	padding-inline: 1rem;
	text-align: center;
}

#edit-account-form {
	width: min(90%, 16rem);
	height: 8rem;

	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1rem;
}

#delete-account-button {
	background-color: var(--color-dim-error);
}

#delete-account-button:hover {
	background-color: var(--color-error);
}

.contact-list {
	width: min(100%, 31rem);
	margin: auto;

	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.contact-list > a {
	height: 5rem;
	width: 15rem;

	display: flex;
	justify-content: center;
	align-items: center;

	border-radius: 6px;
	border: 2px solid var(--color-mid-gray);
	background-color: var(--color-gray);
	color: var(--color-light);

	text-decoration: none;
	font-size: 1.2rem;

	transition:
		background-color 200ms ease-in-out,
		box-shadow 200ms ease-in-out;

	&:hover {
		background-color: var(--color-mid-gray);
		box-shadow: 0px 0px 9px 5px rgba(0, 0, 0, .8);
	}
	
	&:first-child:hover {
		background-color: var(--color-success);
	}
	
	&:nth-child(3):hover {
		background-color: var(--color-changed);
	}
	
	&:nth-child(4):hover {
		background-color: darkblue;
	}
}

@media (max-width: 22rem) {
	#clock-container {
		display: none;
	}
	
	#clock-setting-row {
		display: none;
	}
}