

body {
	margin: 0;
	--color-text: #a5a5a5;
	--color-bg: #e3eff4;
	--color-link: #d6af7c;
	--color-link-hover: #fff;
    --color-text-circle-1: #5A49EA;
    --color-text-circle-2: #8250E6;
    --color-text-circle-3: #A956E1;
    --color-text-circle-4: #D353C9;
	--font-circle-1: ivymode, sans-serif;
	--font-weight-circle-1: 300;
	--font-circle-2: modesto-condensed, serif;
	--font-weight-circle-2: 400;
	--font-circle-3: minerva-modern, sans-serif;
	--font-weight-circle-3: 400;
	--font-circle-4: niagara, serif;
	--font-weight-circle-4: 300;
	--color-button: #5A49EA;
	--color-text-button: #fff;
	--dim-button: 90px;   
	background-color: #e3eff4 !important;
	font-family: tenon, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
  
html, body{
    background: #e3eff4 !important;
}
.enter {
	display: block;
	border: 0;
	width: var(--dim-button);
	height: var(--dim-button);
	position: absolute;
	left: calc(50% - var(--dim-button) / 2 );
	top: calc(50% - var(--dim-button) / 2 );
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	background: none;
	color: var(--color-text-button);
	padding: 0;
}

.enter:focus,
.enter:hover,
.enter:active {
	outline: none;
}

.enter__bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var(--color-button);
}

.enter__text {
	position: relative;
}

.js .enter {
	opacity: 0;
}
 

.circles {
	pointer-events: none;
	position: fixed;
	 --dim: 186vmin;
	width: var(--dim);
	height: var(--dim);
	top: calc(50% - var(--dim) / 2 );
	left: calc(50% - var(--dim) / 2 );
}
 
.circles__text {
	text-transform: uppercase;
	transform-origin: 700px 700px;
	will-change: transform, opacity;
}

.circles__text--1 {
    filter: blur(10px);
	font-size: 25vmin;
    opacity: 0.4 !important;
	font-size: clamp(170px,25vmin,180px);
	font-family: var(--font-circle-1);
	font-weight: var(--font-weight-circle-1);
	fill: var(--color-text-circle-1);
}

.circles__text--2 {
    filter: blur(5px);
	font-size: 17vmin;
    opacity: 0.6 !important;
	font-size: clamp(136px,17vmin,153px);
	font-family: var(--font-circle-2);
	font-weight: var(--font-weight-circle-2);
	fill: var(--color-text-circle-2);
}

.circles__text--3 {
    filter: blur(2px);
	font-size: 13.5vmin;
    opacity: 0.8 !important;
	font-size: clamp(110px,13.5vmin,120px);
	font-family: var(--font-circle-3);
	font-weight: var(--font-weight-circle-3);
	fill: var(--color-text-circle-3);
}

.circles__text--4 {
	font-size: 9.5vmin;
	font-size: clamp(85px,9.5vmin,94px);
	font-family: var(--font-circle-4);
	font-weight: var(--font-weight-circle-4);
	fill: var(--color-text-circle-4);
}
 
