.my-grid-texture {
	background-color: var(--ri-background);
	background-image:
		linear-gradient(
			rgb(from var(--ri-accent) r g b / 0.025) 2px,
			transparent 2px
		),
		linear-gradient(
			90deg,
			rgb(from var(--ri-accent) r g b / 0.025) 2px,
			transparent 2px
		),
		linear-gradient(
			rgb(from var(--ri-accent) r g b / 0.025) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgb(from var(--ri-accent) r g b / 0.025) 1px,
			transparent 1px
		);
	background-attachment: fixed;
	background-size:
		2rem 2rem,
		2rem 2rem,
		1rem 1rem,
		1rem 1rem;
}
.my-img {
	width: min(300px, 100%);
	border: var(--ri-border);
}
.my-stickyTop {
	position: sticky;
	top: 0;
	background-color: inherit;
}
.my-icon {
	display: inline-block;
	font-size: 1.5rem;
	translate: 0 20%;
}
.my-button {
	box-shadow:
		rgb(from var(--ri-border-color) r g b) 0 0 0 2px,
		inset rgb(from white r g b / 0.2) 0 3px 1px 0,
		inset rgb(from black r g b / 0.2) 0 -3px 1px 0;
	transition: box-shadow 0.6s ease-in;
	&:hover,
	&:focus {
		box-shadow:
			rgb(from var(--ri-border-color) r g b) 0 0 0 3px,
			inset rgb(from white r g b / 0.2) 0 3px 1px 2px,
			inset rgb(from black r g b / 0.2) 0 -3px 1px 2px;
		transition: all 0.2s ease-out;
	}
	&:active {
		box-shadow:
			rgb(from var(--ri-border-color) r g b) 0 0 0 6px,
			inset rgb(from white r g b / 0.2) 0 3px 1px -1px,
			inset rgb(from black r g b / 0.2) 0 -3px 1px -1px;
		scale: 0.95;
	}
}
.my-goTop-button {
	position: fixed;
	right: 0;
	bottom: 0;
	margin: 2rem 1rem;
	animation: --fadeIn;
	animation-timeline: scroll();
}
.my-email {
	box-shadow:
		rgb(from var(--ri-border-color) r g b) 0 0 0 2px,
		inset rgb(from white r g b / 0.2) 0 3px 1px 0,
		inset rgb(from black r g b / 0.2) 0 -3px 1px 0;
}
.my-chips {
	margin-block: 0.2rem;
	border: 1px rgb(from var(--ri-border-color) r g b) solid;
	box-shadow:
		inset rgb(from black r g b / 0.1) 0 1px 1px 0,
		inset rgb(from white r g b / 0.1) 0 -1px 1px 0;
}
.my-card {
	box-shadow: rgb(from var(--ri-text-muted) r g b / 0.2) 0px 0px 0px 1px;
	height: 100%;
	justify-content: stretch;
	align-items: space-between;
}

@keyframes --fadeIn {
	0%,
	5% {
		pointer-events: none;
		opacity: 0;
	}
	10%,
	100% {
		pointer-events: all;
		opacity: 1;
	}
}