.banner {
    --banner-animation-offset-time: calc(var(--animete-duration,1) * 1s)
}

.banner img {
    pointer-events: none;
}

.banner.style-2 {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.banner.style-2.orient-right {
	flex-direction: row-reverse;
}

.banner.style-2 #topimg,
.banner.style-2 section {
	height: 100%;
	box-sizing: border-box;
}

.banner.style-2 #topimg {
	width: 66.66%;
}

.banner.style-2 section {
	width: 33.33%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.banner.style-2 #topimg {
	padding: 2em;
	overflow: hidden;
}

.banner.style-2.orient-left #topimg {
	animation: fade-in-left 2s ease-out calc(var(--banner-animation-offset-time,1s) + 0s) forwards;
}

.banner.style-2.orient-right #topimg {
	animation: fade-in-right 2s ease-out calc(var(--banner-animation-offset-time,1s) + 0s) forwards;
}

.banner.style-2 #topimg img {
	/* animation: topimg-fadein 30s ease-out calc(var(--banner-animation-offset-time,1s) + 0s) forwards; */
}

.banner.style-2 #topimg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--pos-x, 50%) var(--pos-y, 50%);
	border-radius: 2em;
	box-shadow: var(--z1), var(--z3), var(--z5);
}

.banner.style-2.orient-left #topimg aside {
	font-size: 0.8em;
	position: absolute;
	top: 0.25rem;
	left: 2rem;
}

.banner.style-2.orient-right #topimg aside {
	font-size: 0.8em;
	position: absolute;
	top: 0.25rem;
	right: 2rem;
}

.banner.style-2.content-align-left {
	text-align: left;
}

.banner.style-2.content-align-center {
	text-align: center;
}

.banner.style-2.content-align-right {
	text-align: right;
}

.banner.style-2.orient-left section div .greeting {
	opacity: 0;
	animation: fade-in-left 1s ease-out calc(var(--banner-animation-offset-time,1s) + 0.25s) forwards;
}

.banner.style-2.orient-left section div .hello {
	opacity: 0;
	animation: fade-in-left 1s ease-out calc(var(--banner-animation-offset-time,1s) + 0.5s) forwards;
}

.banner.style-2.orient-right section div .greeting {
	opacity: 0;
	animation: fade-in-right 1s ease-out calc(var(--banner-animation-offset-time,1s) + 0.25s) forwards;
}

.banner.style-2.orient-right section div .hello {
	opacity: 0;
	animation: fade-in-right 1s ease-out calc(var(--banner-animation-offset-time,1s) + 0.5s) forwards;
}

.banner.style-2.banner.style-2.content-align-center section div .greeting {
	opacity: 0;
	animation: fade-in-up 1s ease-out calc(var(--banner-animation-offset-time,1s) + 0.25s) forwards;
}

.banner.style-2.banner.style-2.content-align-center section div .hello {
	opacity: 0;
	animation: fade-in-up 1s ease-out calc(var(--banner-animation-offset-time,1s) + 0.5s) forwards;
}


.banner.style-2 section .greeting {
	margin: 0;
}

.banner.style-2.orient-left .mouse-link {
	position: absolute;
	right: 15%;
	bottom: 0;
	opacity: 0;
	animation: fade-in-up 0.5s ease-out calc(var(--banner-animation-offset-time,1s) + 1s) forwards;
}

.banner.style-2.orient-right .mouse-link {
	position: absolute;
	left: 15%;
	bottom: 0;
	opacity: 0;
	animation: fade-in-up 0.5s ease-out calc(var(--banner-animation-offset-time,1s) + 1s) forwards;
}

@media (max-width:767px) {

	.banner.style-2,
	.banner.style-2.banner.style-2.orient-right {
		flex-direction: column;
	}

	.banner.style-2 #topimg,
	.banner.style-2 section {
		width: 100%;
		box-sizing: border-box;
	}

	.banner.style-2 #topimg {
		height: 66.66%;
		padding: 0;
	}

	.banner.style-2 section {
		height: 33.33%;
	}

	.banner.style-2 #topimg img {
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}

	.banner.style-2 #topimg aside {
		color: var(--white);
		left: 0;
		right: unset;
		padding: 0.5rem;
		opacity: 0.5;
		user-select: none;
	}

	.banner.style-2 .mouse-link {
		position: absolute;
		left: calc(50% - 15px) !important;
		right: unset !important;
		bottom: 0 !important;
	}
}

.banner.style-3 {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.banner.style-3.orient-bottom {
	flex-direction: column-reverse;
}

.banner.style-3 #topimg,
.banner.style-3 section {
	width: 100%;
	box-sizing: border-box;
}

.banner.style-3 #topimg {
	flex: 1 1 auto;
	height: 100%;
	height: 75vh;
	overflow: hidden;
}

.banner.style-3 #topimg aside {
	z-index: 3;
	position: relative;
}

.banner.style-3.orient-top #topimg {
	animation: fade-in-down 2s ease-out calc(var(--banner-animation-offset-time,1s) + 0s) forwards;
}

.banner.style-3.orient-bottom #topimg {
	animation: fade-in-up 2s ease-out calc(var(--banner-animation-offset-time,1s) + 0s) forwards;
}

.banner.style-3 #topimg img {
	animation: topimg-fadein 30s ease-out calc(var(--banner-animation-offset-time,1s) + 0s) forwards;
}

.banner.style-3 section {
	flex: 0 1 auto;
	padding: 4em;
	height: fit-content;
}

.banner.style-3 #topimg {
	padding: 2em;
}

.banner.style-3 #topimg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--pos-x, 50%) var(--pos-y, 50%);
	border-radius: 2em;
	box-shadow: var(--z1), var(--z3), var(--z5);
}

.banner.style-3 section div {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.banner.style-3.content-align-left section div {
	justify-content: flex-start;

}

.banner.style-3.content-align-center section div {
	justify-content: center;

}

.banner.style-3.content-align-right section div {
	justify-content: flex-end;

}

#top.banner.style-3.orient-top section div .greeting {
	opacity: 0;
	animation: fade-in-up 1s ease-out calc(var(--banner-animation-offset-time,1s) + 0.25s) forwards;
}

#top.banner.style-3.orient-top section div .hello {
	opacity: 0;
	animation: fade-in-up 1s ease-out calc(var(--banner-animation-offset-time,1s) + 0.5s) forwards;
}

#top.banner.style-3.orient-bottom section div .greeting {
	opacity: 0;
	animation: fade-in-down 1s ease-out calc(var(--banner-animation-offset-time,1s) + 0.25s) forwards;
}

#top.banner.style-3.orient-bottom section div .hello {
	opacity: 0;
	animation: fade-in-down 1s ease-out calc(var(--banner-animation-offset-time,1s) + 0.5s) forwards;
}

#top.banner.style-3 section div .greeting,
#top.banner.style-3 section div .hello {
	margin: 0;
}

#top.banner.style-3 section div .hello {
	margin-left: 0.5em;
	padding-left: 0.5em;
	border-left: 1px solid rgba(0, 0, 0, 0.5);
}

.banner.style-3.orient-top.content-align-left .mouse-link {
	position: absolute;
	right: 4em;
	bottom: 5.5%;
	opacity: 0;
	animation: fade-in-up 0.5s ease-out calc(var(--banner-animation-offset-time,1s) + 1s) forwards;
}

.banner.style-3.orient-top.content-align-center .mouse-link {
	position: absolute;
	right: 4em;
	bottom: 5.5%;
	opacity: 0;
	animation: fade-in-up 0.5s ease-out calc(var(--banner-animation-offset-time,1s) + 1s) forwards;
}

.banner.style-3.orient-top.content-align-right .mouse-link {
	position: absolute;
	left: 4em;
	bottom: 5.5%;
	opacity: 0;
	animation: fade-in-up 0.5s ease-out calc(var(--banner-animation-offset-time,1s) + 1s) forwards;
}

.banner.style-3.orient-bottom .mouse-link {
	position: absolute;
	left: calc(50% - 15px);
	bottom: 0;
	opacity: 0;
	animation: fade-in-down 0.5s ease-out calc(var(--banner-animation-offset-time,1s) + 1s) forwards;
}

.banner.style-3.orient-bottom .mouse-icon {
	border-color: var(--light)
}

.banner.style-3.orient-bottom .mouse-icon .wheel {
	background-color: var(--light)
}


@media (max-width:767px) {

	.banner.style-3 section {
		padding: 2em;
	}

	.banner.style-3 section div {
		display: block;
	}

	#top.banner.style-3 section div .hello {
		margin: 0;
		padding: 0;
	}

	.banner.style-3.content-align-left section div {
		justify-content: unset;
		text-align: left;

	}

	.banner.style-3.content-align-center section div {
		justify-content: unset;
		text-align: center;

	}

	.banner.style-3.content-align-right section div {
		justify-content: unset;
		text-align: right;

	}

	#top.banner.style-3.orient-top section div .hello {
		animation: fade-in-up 1s ease-out calc(var(--banner-animation-offset-time,1s) + 0s) forwards;
	}

	#top.banner.style-3.orient-bottom section div .hello {
		animation: fade-in-down 1s ease-out calc(var(--banner-animation-offset-time,1s) + 0s) forwards;
	}

	#top.banner.style-3 section div .hello {
		border-left-style: none;
	}


	.banner.style-3.orient-top.content-align-left .mouse-link {
		position: absolute;
		right: 2em;
		bottom: 2.5%;
		opacity: 0;
		animation: fade-in-up 0.5s ease-out calc(var(--banner-animation-offset-time,1s) + 1s) forwards;
	}

	.banner.style-3.orient-top.content-align-center .mouse-link {
		position: absolute;
		right: 2em;
		bottom: 2.5%;
		opacity: 0;
		animation: fade-in-up 0.5s ease-out calc(var(--banner-animation-offset-time,1s) + 1s) forwards;
	}

	.banner.style-3.orient-top.content-align-right .mouse-link {
		position: absolute;
		left: 2em;
		bottom: 2.5%;
		opacity: 0;
		animation: fade-in-up 0.5s ease-out calc(var(--banner-animation-offset-time,1s) + 1s) forwards;
	}

	.banner.style-3.orient-bottom .mouse-link {
		bottom: 1rem;
	}

}

.banner.style-4 {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.banner.style-4.orient-right {
	flex-direction: row-reverse;
}

.banner.style-4 #topimg,
.banner.style-4 section {
	height: 100%;
	box-sizing: border-box;
}

.banner.style-4 #topimg {
	width: 50%;
	animation: fade-in-up 1s ease-out forwards;
}

.banner.style-4 section {
	width: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 6em;
	opacity: 0;
	animation: fade-in-up 1s ease-out calc(var(--banner-animation-offset-time,1s) + 0.25s) forwards;
}

.banner.style-4.orient-left.content-align-left section {
	justify-content: flex-start;
	text-align: left;
}

.banner.style-4.orient-left.content-align-right section {
	justify-content: flex-end;
	text-align: right;
}

.banner.style-4.orient-right.content-align-right section {
	justify-content: flex-end;
	text-align: right;
}

.banner.style-4.orient-right.content-align-left section {
	justify-content: flex-start;
	text-align: left;
}

.banner.style-4 #topimg {
	padding: 2em;

}

.banner.style-4 #topimg img {
	width: 66%;
	height: 100%;
	object-fit: cover;
	object-position: var(--pos-x, 50%) var(--pos-y, 50%);
	border-radius: 2em;
	display: block;
	margin: 0 auto;
	box-shadow: var(--z1), var(--z3), var(--z5);
	opacity: 0;
	animation: fade-in-up 1s ease-out calc(var(--banner-animation-offset-time,1s) + 0.25s) forwards;
}

.banner.style-4.orient-left #topimg aside {
	font-size: 0.8em;
	position: absolute;
	top: 0.25rem;
	left: 2rem;
}

.banner.style-4.orient-left #topimg {
	opacity: 0;
	animation: fade-in-left 1s ease-out calc(var(--banner-animation-offset-time,1s) + 0s) forwards;
}

.banner.style-4.orient-right #topimg {
	opacity: 0;
	animation: fade-in-right 1s ease-out calc(var(--banner-animation-offset-time,1s) + 0s) forwards;
}

.banner.style-4.orient-right #topimg aside {
	font-size: 0.8em;
	position: absolute;
	top: 0.25rem;
	right: 2rem;
}

.banner.style-4 section .greeting {
	margin: 0;
}

.banner.style-4 section .hello {
	opacity: 0;
	animation: fade-in-up 0.66s ease-out calc(var(--banner-animation-offset-time,1s) + 0.33s) forwards;
}


.banner.style-4.content-align-left {
	text-align: left;
}

.banner.style-4.content-align-center {
	text-align: center;
}

.banner.style-4.content-align-right {
	text-align: right;
}

.banner.style-4.orient-left .mouse-link {
	position: absolute;
	right: calc(25% - 15px);
	bottom: 0;
	opacity: 0;
	animation: fade-in-up 0.5s ease-out calc(var(--banner-animation-offset-time,1s) + 1s) forwards;
}

.banner.style-4.orient-right .mouse-link {
	position: absolute;
	left: calc(25% - 15px);
	bottom: 0;
	opacity: 0;
	animation: fade-in-up 0.5s ease-out calc(var(--banner-animation-offset-time,1s) + 1s) forwards;
}


@media (max-width:767px) {

	.banner.style-4,
	.banner.style-4.banner.style-4.orient-right {
		flex-direction: column;
	}

	.banner.style-4 #topimg,
	.banner.style-4 section {
		width: 100%;
		box-sizing: border-box;
	}

	.banner.style-4 section {
		padding: 0 2em !important;
	}


	.banner.style-4 #topimg {
		height: 66.66%;
	}

	.banner.style-4 section {
		height: 33.33%;
	}

	.banner.style-4 #topimg img {
		width: 100%;
	}

	.banner.style-4 #topimg aside {
		left: 0;
		right: unset;
		padding: 0.5rem;
		opacity: 0.5;
		user-select: none;
	}

	.banner.style-4 .mouse-link {
		position: absolute;
		left: calc(50% - 15px) !important;
		right: unset !important;
		bottom: 0 !important;
	}
}

.banner.style-5 {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.banner.style-5.orient-right {
	flex-direction: row-reverse;
}

.banner.style-5 #topimg,
.banner.style-5 section {
	height: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}

.banner.style-5 #topimg {
	width: 50%;
	opacity: 0;
	animation: fade-in-up 1s ease-out calc(var(--banner-animation-offset-time,1s) + 0s) forwards;
}

.banner.style-5 section {
	width: 50%;
	padding: 0 6em;
	opacity: 0;
	animation: fade-in-up 1s ease-out calc(var(--banner-animation-offset-time,1s) + 0.25s) forwards;
}

.banner.style-5.orient-left.content-align-left section {
	justify-content: flex-start;
	text-align: left;
}

.banner.style-5.orient-left.content-align-right section {
	justify-content: flex-end;
	text-align: right;
}

.banner.style-5.orient-right.content-align-right section {
	justify-content: flex-end;
	text-align: right;
}

.banner.style-5.orient-right.content-align-left section {
	justify-content: flex-start;
	text-align: left;
}

.banner.style-5 #topimg {
	padding: 2em;
}

.banner.style-5 #topimg img {
	width: 75%;
	height: 75%;
	object-fit: cover;
	object-position: var(--pos-x, 50%) var(--pos-y, 50%);
	border-radius: 50%;
	display: block;
	margin: 0 auto;
	box-shadow: var(--z1), var(--z3), var(--z5);
	animation: fade-in-up 1s ease-out calc(var(--banner-animation-offset-time,1s) + 0s) forwards;
}

.banner.style-5.orient-left #topimg aside {
	font-size: 0.8em;
	position: absolute;
	top: 0.25rem;
	left: 2rem;
}

.banner.style-5.orient-right #topimg aside {
	font-size: 0.8em;
	position: absolute;
	top: 0.25rem;
	right: 2rem;
}

.banner.style-5 section .greeting {
	margin: 0;
}

.banner.style-5 section .hello {
	opacity: 0;
	animation: fade-in-up 0.66s ease-out calc(var(--banner-animation-offset-time,1s) + 0.33s) forwards;
}

.banner.style-5.content-align-left {
	text-align: left;
}

.banner.style-5.content-align-center {
	text-align: center;
}

.banner.style-5.content-align-right {
	text-align: right;
}

.banner.style-5.orient-left .mouse-link {
	position: absolute;
	right: calc(25% - 15px);
	bottom: 0;
	opacity: 0;
	animation: fade-in-up 0.5s ease-out calc(var(--banner-animation-offset-time,1s) + 1s) forwards;
}

.banner.style-5.orient-right .mouse-link {
	position: absolute;
	left: calc(25% - 15px);
	bottom: 0;
	opacity: 0;
	animation: fade-in-up 0.5s ease-out calc(var(--banner-animation-offset-time,1s) + 1s) forwards;
}


@media (max-width:767px) {

	.banner.style-5,
	.banner.style-5.banner.style-5.orient-right {
		flex-direction: column;
	}

	.banner.style-5 #topimg,
	.banner.style-5 section {
		width: 100%;
		box-sizing: border-box;
	}

	.banner.style-5 section {
		padding: 0 2em !important;
	}


	.banner.style-5 #topimg {
		height: 100vw;
	}

	.banner.style-5 section {
		height: 33.33%;
	}

	.banner.style-5 #topimg img {
		width: 100%;
		height: 100%;
	}

	.banner.style-5 #topimg aside {
		left: 0;
		right: unset;
		padding: 0.5rem;
		opacity: 0.5;
		user-select: none;
	}

	.banner.style-5 .mouse-link {
		position: absolute;
		left: calc(50% - 15px) !important;
		right: unset !important;
		bottom: 0 !important;
	}
}


.banner.color1 #topimg {
    background-color: #30363d;
}

.banner.color2 #topimg {
    background-color: #db8992;
}

.banner.color3 #topimg {
    background-color: #ab7aad;
}

.banner.color4 #topimg {
    background-color: #897cad;
}

.banner.color5 #topimg {
    background-color: #7794ce;
}

.banner.color6 #topimg {
    background-color: #64abb4;
}

.banner.color7 #topimg {
    background-color: #6ba78c;
}

/**
* @link https://projects.verou.me/css3patterns/#
*/
.banner.pattern1 #topimg {
    /* Zig-Zag by eCSSpert */
    background-image:
        linear-gradient(135deg, rgba(236, 237, 220, 0.25) 25%, transparent 25%),
        linear-gradient(225deg, rgba(236, 237, 220, 0.25) 25%, transparent 25%),
        linear-gradient(315deg, rgba(236, 237, 220, 0.25) 25%, transparent 25%),
        linear-gradient(45deg, rgba(236, 237, 220, 0.25) 25%, transparent 25%);
    background-position: -50px 0, -50px 0, 0 0, 0 0;
    background-size: 100px 100px;
}

.banner.pattern2 #topimg {
    /* Half-Rombes by Valentin Agachi */
    background-image:
        linear-gradient(115deg, transparent 75%, rgba(255, 255, 255, .2) 75%),
        linear-gradient(245deg, transparent 75%, rgba(255, 255, 255, .2) 75%),
        linear-gradient(115deg, transparent 75%, rgba(255, 255, 255, .2) 75%),
        linear-gradient(245deg, transparent 75%, rgba(255, 255, 255, .2) 75%);
    background-position: 0 0, 0 0, 7px -15px, 7px -15px;
    background-size: 15px 30px;
}

.banner.pattern3 #topimg {
    /* Hearts */
    background:
        radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187, 0, 51, 0) 27%),
        radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187, 0, 51, 0) 27%),
        radial-gradient(circle closest-side at 42% 22%, #d35 43%, rgba(221, 51, 85, 0) 45%),
        radial-gradient(circle closest-side at 58% 22%, #d35 43%, rgba(221, 51, 85, 0) 45%),
        radial-gradient(circle closest-side at 50% 35%, #d35 32%, rgba(221, 51, 85, 0) 27%),

        radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187, 0, 51, 0) 27%) 50px 50px,
        radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187, 0, 51, 0) 27%) 50px 50px,
        radial-gradient(circle closest-side at 40% 22%, #d35 40%, rgba(221, 51, 85, 0) 45%) 52px 50px,
        radial-gradient(circle closest-side at 60% 22%, #d35 40%, rgba(221, 51, 85, 0) 45%) 48px 50px,
        radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221, 51, 85, 0) 37%) 50px 50px;
    background-color: #b03;
    background-size: 100px 100px;
}


.banner.pattern4 #topimg {
    /* Argyle by Anna Kassner */
    background-image:
        repeating-linear-gradient(120deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .1) 1px, transparent 1px, transparent 60px),
        repeating-linear-gradient(60deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .1) 1px, transparent 1px, transparent 60px),
        linear-gradient(60deg, rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .1) 75%, rgba(0, 0, 0, .1)),
        linear-gradient(120deg, rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .1) 75%, rgba(0, 0, 0, .1));
    background-size: 70px 120px;
}

.banner.pattern5 #topimg {
    /* Waves */
    background-image:
        radial-gradient(circle at 100% 50%, transparent 20%, rgba(255, 255, 255, .3) 21%, rgba(255, 255, 255, .3) 34%, transparent 35%, transparent),
        radial-gradient(circle at 0% 50%, transparent 20%, rgba(255, 255, 255, .3) 21%, rgba(255, 255, 255, .3) 34%, transparent 35%, transparent);
    background-position: 0 0, 0 -50px;
    background-size: 75px 100px;
}

.banner.pattern6 #topimg {
    /* dots */
    background-image: radial-gradient(rgba(255, 255, 255, 0.25) 15%, transparent 16%),
        radial-gradient(rgba(255, 255, 255, 0.25) 15%, transparent 16%);
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
}


.banner.pattern7 #topimg {
    /* checkerboard */
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.25) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.25) 75%, rgba(255, 255, 255, 0.25)),
        linear-gradient(45deg, rgba(255, 255, 255, 0.25) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.25) 75%, rgba(255, 255, 255, 0.25));
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
}

.banner.pattern8 #topimg {
    /* checkerboard diagnol */
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.25) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.25) 75%, rgba(255, 255, 255, 0.25)),
        linear-gradient(-45deg, rgba(255, 255, 255, 0.25) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.25) 75%, rgba(255, 255, 255, 0.25));
    background-size: 60px 60px;
}

.banner.pattern9 #topimg {
    /* Tartan by Marta Armada */
    background-image: repeating-linear-gradient(transparent, transparent 50px, rgba(0, 0, 0, .1) 50px, rgba(0, 0, 0, .1) 53px, transparent 53px, transparent 63px, rgba(0, 0, 0, .1) 63px, rgba(0, 0, 0, .1) 66px, transparent 66px, transparent 116px, rgba(0, 0, 0, .2) 116px, rgba(0, 0, 0, .2) 166px, rgba(255, 255, 255, .05) 166px, rgba(255, 255, 255, .05) 169px, rgba(0, 0, 0, .2) 169px, rgba(0, 0, 0, .2) 179px, rgba(255, 255, 255, .05) 179px, rgba(255, 255, 255, .05) 182px, rgba(0, 0, 0, .2) 182px, rgba(0, 0, 0, .2) 232px, transparent 232px),
        repeating-linear-gradient(270deg, transparent, transparent 50px, rgba(0, 0, 0, .1) 50px, rgba(0, 0, 0, .1) 53px, transparent 53px, transparent 63px, rgba(0, 0, 0, .1) 63px, rgba(0, 0, 0, .1) 66px, transparent 66px, transparent 116px, rgba(0, 0, 0, .2) 116px, rgba(0, 0, 0, .2) 166px, rgba(255, 255, 255, .05) 166px, rgba(255, 255, 255, .05) 169px, rgba(0, 0, 0, .2) 169px, rgba(0, 0, 0, .2) 179px, rgba(255, 255, 255, .05) 179px, rgba(255, 255, 255, .05) 182px, rgba(0, 0, 0, .2) 182px, rgba(0, 0, 0, .2) 232px, transparent 232px),
        repeating-linear-gradient(125deg, transparent, transparent 2px, rgba(0, 0, 0, .05) 2px, rgba(0, 0, 0, .05) 3px, transparent 3px, transparent 5px, rgba(0, 0, 0, .05) 5px);
}

.banner.pattern10 #topimg {
    /* diagonal stripes */
    background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255, 255, 255, .25) 35px, rgba(255, 255, 255, .5) 70px);
}

.banner.pattern11 #topimg {
    /* Cicada stripes by Randy Merrill */
    background-image: linear-gradient(90deg, rgba(255, 255, 255, .07) 50%, transparent 50%),
        linear-gradient(90deg, rgba(255, 255, 255, .13) 50%, transparent 50%),
        linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, .17) 50%),
        linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, .19) 50%);
    background-size: 13px, 29px, 37px, 53px;
}

.banner.pattern12 #topimg {
    /* horizontal stripes */
    background-image: linear-gradient(transparent 50%, rgba(255, 255, 255, .25) 50%);
    background-size: 50px 50px;
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



@keyframes fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-left {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade-in-right {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 减少运动效果 */
@media (prefers-reduced-motion: reduce) {
    .banner * {
        --banner-animation-offset-time: 0 !important;
        animation-duration: 0.001s !important;
    }
}