vlw.se/assets/css/pages/contact.css

/* # Overrides */

:root {
	--primer-color-accent: 255, 195, 255;
	--color-accent: rgb(var(--primer-color-accent));

	--hue-accent: 200deg;
}

vv-shell {
	gap: var(--padding);
	display: flex;
	align-items: center;
	flex-direction: column;

	> svg {
		margin: var(--padding) 0;
	}
}

.fingerprint {
	word-break: break-all;
}

section {
	&.center {
		text-align: center;
	}

	&.social {
		--icon-size: 60px;

		gap: var(--padding);
		fill: white;
		display: grid;
		align-items: center;
		grid-template-rows: var(--icon-size);
		grid-template-columns: repeat(3, var(--icon-size));

		social {
			position: relative;
			transition: 200ms fill;

			p {
				top: 0;
				left: 0;
				display: none;
				padding: 5px 10px;
				position: absolute;
				transform: translate(0, 0);
				white-space: nowrap;
				border-radius: 6px;
				pointer-events: none;
				backdrop-filter: brightness(.2) blur(20px);
				background-color: rgba(var(--primer-color-accent), .1);
				-webkit-backdrop-filter: brightness(.2) blur(20px);

				@media (hover: hover) {
					& {
						fill: var(--color-accent);
					}

					&.hovering {
						display: initial;
					}
				}
			}
		}
	}

	&.pgp {
		gap: var(--padding);
		display: flex;
		padding: var(--padding);
		position: relative;
		max-width: 800px;
		transform: rotate(-1.5deg);
		text-align: center;
		border-radius: 12px;
		flex-direction: column;
		background-color: rgba(var(--primer-color-accent), .15);

		> svg {
			top: -30px;
			fill: var(--color-accent);
			right: -20px;
			width: 60px;
			position: absolute;
		}

		> p {
			padding: 0 var(--padding);
		}

		.buttons {
			gap: var(--padding);
			display: flex;
			margin-top: var(--padding);
			flex-direction: column;
		}
	}

	&.form {
		gap: var(--padding);
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		:is(input, textarea) {
			color: black;
			border: none;
			outline: none;
			padding: var(--padding);
			min-width: 100%;
			max-width: 100%;
			border-radius: 4px;
		}

		input {
			height: calc(var(--running-size) - var(--padding));
		}

		textarea {
			min-height: calc(var(--running-size) * 1.5);
		}

		form {
			display: contents;

			input-group {
				gap: calc(var(--padding) / 2);
				width: 100%;
				display: flex;
				flex-direction: column;

				label {
					color: var(--color-accent);
				}
			}
		}

		button {
			width: 100%;
			max-width: 500px;
		}
	}

	&.form-message {
		gap: calc(var(--padding) / 2);
		width: 100%;
		color: black;
		margin: var(--padding) 0;
		display: flex;
		padding: var(--padding);
		flex-direction: column;
		background-color: white;

		&.error {
			color: white;
			background-color: #ec4444;

			& + section.form {
				display: none;
			}
		}

		&.sent {
			background-color: var(--color-accent);
		}

		h3 {
			text-align: center;
		}

		pre {
			padding: var(--padding);
			white-space: pre-wrap;
			background-color: rgba(0, 0, 0, .15);
		}
	}
}

cite {
	text-decoration: underline;
	text-decoration-style: dotted;
	text-decoration-color: rgba(var(--primer-color-accent), .5);
	text-decoration-thickness: .1em;

	&:hover {
		text-decoration-color: var(--color-accent);
	}
}

/* # Size queries */

@media (min-width: 460px) {
	section {
		&.pgp {
			padding: calc(var(--padding) * 1.5);

			.buttons {
				flex-direction: row;
				justify-content: center;
			}
		}
	}
}