html {
	background: black;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
}

:root {
	--color-primary-purple: rgba(155, 0, 255, 1.0);
	--color-primary-silver: rgba(200, 200, 200, 1.0);
	--color-primary-red: rgba(255, 0, 0, 1.0);
	--color-secondary-pink: rgba(255, 175, 200, 1.0);
}

.common-page-border {
	position: relative;
	border: 1px solid var(--color-primary-purple);
	box-shadow: 0 0 5px 2px var(--color-primary-purple);
	margin: 0;
	z-index: 100;
}

body {
	margin: 0;
	min-height: 100dvh;
	font-size: 24px;
}

.kyros-note {
	border: 1px solid var(--color-primary-purple);
	box-shadow: 0 0 5px 1px var(--color-primary-purple), inset 0 0 5px 1px var(--color-primary-purple);
	margin: 8px;
	padding: 8px;
	display: flex;
}

.kyros-img {
	padding: 8px;
	object-fit: contain;
	width: 64px;
	height: 64px;
}

.social-media {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.social-media-icon {
	margin: 16px;
}

/* Phone - Vertical */
@media screen and (width >= 320px) and (width < 768px) {
	.kyros-note {
		flex-direction: column;
		align-items: center;
	}
	.kyros-text {
		font-size: 1.25rem;
		text-align: center;
	}
}

/* Phone - Horizontal */
@media screen and (width >= 768px) and (width < 1300px) {
	.kyros-note {
		flex-direction: row;
		align-items: flex-start;
	}
	.kyros-text {
		font-size: 1.5rem;
	}
}

/* Desktop */
@media screen and (width >= 1300px) {
	.kyros-note {
		flex-direction: row;
		align-items: flex-start;
	}
	.kyros-text {
		font-size: 1.5rem;
	}
}