:root {
	--primary: #ffb7c5;
	--secondary: #ff003f;
	--background: #534b4f;
	--background-alt: #645452;
	--foreground: #faf0e6;
	--support: #444444;
	@media (prefers-color-scheme: light) {
		--primary: #ff91a4;
		--secondary: #dc143c;
		--foreground: #534b4f;
		--background: #faf0e6;
		--background-alt: #f0ead6;
		--support: #dddddd;
	}
}

@font-face {
	font-family: DepartureMono;
	src: url(./DepartureMono-Regular.woff2);
}

@keyframes banner {
	0%,
	100% {
		background-color: var(--primary);
		color: var(--background);
		border-top-right-radius: 50px;
		border-bottom-left-radius: 50px;
		border-top-left-radius: 0;
		border-bottom-right-radius: 0;
	}
	25% {
		color: var(--secondary);
	}
	50% {
		color: var(--background);
		border-top-left-radius: 50px;
		border-bottom-right-radius: 50px;
		border-top-right-radius: 0;
		border-bottom-left-radius: 0;
	}
	75% {
		color: var(--secondary);
	}
}

html {
	background-color: var(--background);
	color: var(--foreground);
	::selection,
	::-moz-selection {
		background-color: var(--primary);
		color: var(--background);
	}

	font-family: DepartureMono;
	* {
		margin: 0;
		padding: 0;
	}
	h1 {
		color: var(--primary);
		font-size: 32px;
	}
	p,
	a {
		font-size: 20px;
	}
	a {
		color: var(--primary);
		text-decoration: underline;
		text-decoration-style: wavy;
		&::selection,
		&::-moz-selection {
			background-color: var(--secondary);
			color: var(--primary);
		}
		&:hover,
		&:active {
			background-color: var(--primary);
			color: var(--background);
			text-decoration: none;
		}
	}
	pre,
	code {
		overflow-x: auto;
		max-width: 100%;
		font-size: 14px;
		color: var(--secondary);
		background-color: var(--support);
		padding: 0 4px;
		border-radius: 4px;
		display: inline-block;
		-webkit-overflow-scrolling: touch;
	}
	hr {
		margin: 20px 0;
	}

	body {
		main {
			margin: 5% 15%;
			@media (max-width: 799px) {
				margin: 5% 5%;
			}
			#banner {
				user-select: none;
				-moz-user-select: none;
				display: flex;
				flex-direction: column;
				width: 100%;
				align-items: center;
				justify-content: center;
				img {
					max-height: 80px;
					max-width: 80px;
				}
				h1 {
					font-size: 48px;
					padding: 10px;
					animation: banner 10s infinite;
				}
			}
			#description {
				* {
					font-size: 20px;
				}
				padding: 10px;
				margin: 20px 0;
				#ideology {
					padding: 10px;
					margin: 10px;
					ul {
						list-style-position: inside;
					}
				}
			}

			#subdomains {
				padding: 5px;
				h1,
				p {
					padding: 5px;
				}
				#sd-grid {
					display: flex;
					flex-direction: row;
					align-items: stretch;
					justify-content: stretch;
					flex-wrap: wrap;
					.sd-grid-card {
						display: flex;
						flex-direction: column;
						text-align: center;
						align-items: center;
						justify-content: space-between;
						background-color: var(--background-alt);
						padding: 5px;
						margin: 5px;
						border-radius: 5px;
						border: 1px solid var(--primary);
						max-width: 300px;
						.sd-grid-card-title {
							text-align: center;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: space-between;
							font-size: 25px;
							color: var(--primary);
							width: 100%;
							* {
								padding: 10px;
							}
						}
						.sd-grid-card-description {
							padding: 5px;
							text-align: left;
						}
						.sd-grid-actions-row {
							display: flex;
							flex-direction: row;
							width: 100%;
							padding: 5px;
							.sd-grid-card-action {
								width: 100%;
								border: 4px dotted var(--primary);
								border-radius: 4px;
								margin: 4px;
								font-size: 20px;
								font-weight: bolder;
								text-decoration: none;
								color: var(--primary);
								&:hover,
								&:active {
									border: 4px solid var(--secondary);
									background-color: var(--secondary);
									color: var(--primary);
								}
							}
						}
					}
				}
			}
			#pubkeys {
				h3 {
					display: flex;
					flex-direction: row;
					text-align: center;
					align-items: center;
					margin: 10px 0;
					button {
						margin: 0 10px;
						padding: 2px;
						background-color: transparent;
						border: none;
						color: var(--primary);
						font-size: 18px;
						border-radius: 4px;
						&:hover {
							color: var(--secondary);
							cursor: pointer;
						}
						&:active {
							color: var(--primary);
							background-color: var(--secondary);
						}
					}
				}
			}
			#credits {
				h1 {
					padding: 5px;
				}
				p,
				li,
				a {
					font-size: 18px;
				}
				ul {
					margin-left: 10px;
					list-style-position: inside;
				}
			}
		}
	}
}