@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;700;800&family=Montserrat:wght@100;300;400;600;900&display=swap');


@keyframes {
	0% {}
	7.69% {}
	15.38% {}
	23.08% {}
	30.77% {}
	38.46% {}
	46.15% {}
	53.85% {}
	61.54% {}
	69.23% {}
	76.92% {}
	84.62% {}
	92.31% {}
	100% {}
}

@keyframes f0 {
	0% { opacity: 0 ; }
	7.69% { opacity: 1; }
	100% { opacity: 1; }
}

@keyframes f1 {
	0% { opacity: 0 ; }
	7.69% { opacity: 0; }
	15.38% { opacity: 1; }
	100% { opacity: 1; }
}

@keyframes f2 {
	0% { opacity: 0 ; }
	15.38% { opacity: 0; }
	23.08% { opacity: 1; }
	100% { opacity: 1; }
}

@keyframes f3 {
	0% { opacity: 0 ; }
	23.08% { opacity: 0; }
	30.77% { opacity: 1; }
	100% { opacity: 1; }
}

@keyframes f4 {
	0% { opacity: 0 ; }
	30.77% { opacity: 0; }
	38.46% { opacity: 1; }
	100% { opacity: 1; }
}

@keyframes f5 {
	0% { opacity: 0 ; }
	38.46% { opacity: 0; }
	46.15% { opacity: 1; }
	100% { opacity: 1; }
}

@keyframes f6 {
	0% { opacity: 0 ; }
	46.15% { opacity: 0; }
	53.85% { opacity: 1; }
	100% { opacity: 1; }
}

@keyframes f7 {
	0% { opacity: 0 ; }
	53.85% { opacity: 0; }
	61.54% { opacity: 1; }
	100% { opacity: 1; }
}

@keyframes f8 {
	0% { opacity: 0 ; }
	61.54% { opacity: 0; }
	69.23% { opacity: 1; }
	100% { opacity: 1; }
}

@keyframes f9 {
	0% { opacity: 0 ; }
	69.23% { opacity: 0; }
	76.92% { opacity: 1; }
	100% { opacity: 1; }
}

@keyframes f10 {
	0% { opacity: 0 ; }
	76.92% { opacity: 0; }
	84.62% { opacity: 1; }
	100% { opacity: 1; }
}

@keyframes f11 {
	0% { opacity: 0 ; }
	84.62% { opacity: 0; }
	92.31% { opacity: 1; }
	100% { opacity: 1; }
}

@keyframes f12 {
	0% { rotate: 0deg; }
	92.31% { rotate: 720deg; }
	100% { rotate: 720deg; }
}

.slice-0 .peel {
	opacity: 0;
	animation: f0 3s linear 2s 1 normal;
	animation-fill-mode: forwards;
}

.slice-1 .peel {
	opacity: 0;
	animation: f1 3s linear 2s 1 normal;
	animation-fill-mode: forwards;
}

.slice-2 .peel {
	opacity: 0;
	animation: f2 3s linear 2s 1 normal;
	animation-fill-mode: forwards;
}

.slice-3 .peel {
	opacity: 0;
	animation: f3 3s linear 2s 1 normal;
	animation-fill-mode: forwards;
}

.slice-4 .peel {
	opacity: 0;
	animation: f4 3s linear 2s 1 normal;
	animation-fill-mode: forwards;
}

.slice-5 .peel {
	opacity: 0;
	animation: f5 3s linear 2s 1 normal;
	animation-fill-mode: forwards;
}

.slice-0 .flesh {
	opacity: 0;
	animation: f6 3s linear 2s 1 normal;
	animation-fill-mode: forwards;
}

.slice-1 .flesh {
	opacity: 0;
	animation: f7 3s linear 2s 1 normal;
	animation-fill-mode: forwards;	
}

.slice-2 .flesh {
	opacity: 0;
	animation: f8 3s linear 2s 1 normal;
	animation-fill-mode: forwards;
}

.slice-3 .flesh {
	opacity: 0;
	animation: f9 3s linear 2s 1 normal;
	animation-fill-mode: forwards;
}

.slice-4 .flesh {
	opacity: 0;
	animation: f10 3s linear 2s 1 normal;
	animation-fill-mode: forwards;
}

.slice-5 .flesh {
	opacity: 0;
	animation: f11 3s linear 2s 1 normal;
	animation-fill-mode: forwards;
}

.slice {
	transform-origin: 50% 50%;
	animation: f12 3s linear 2s 1 normal;
	animation-fill-mode: forwards;
}

:root {
    --brand: #5865f2;
    --greyple: #99aab5;
    --dark-not-black: #2c2f33;
    --focus-border: #00b0f4;
    --status-green: #43b581;
    --text-link: #00b0f4;
    --off-white: #f6f6f6;
    --white: #fff;
    --not-quite-black: #23272a;
    --not-quite-black-rgb: 35,39,42;
    --black: #000;
    --ekko-red: #de2761;
}

.suppress-load-transitions * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

html {
	background-color: var(--dark-not-black);
}

a, a:visited {
	color: var(--text-link);
	text-decoration: none;
}

a:hover {
	font-weight: 700;
}