:root {
    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
	--primary-light: #8abdff;
	--primary: #6d5dfc;
	--primary-dark: #5b0eeb;
    color-scheme: light dark;
    background-color: #242424;
	--white: #ffffff;
    --greyLight-1: #f5f5f5;
    --greyLight-2: #e0e0e0;
    --greyLight-3: #c0c0c0;
    --greyDark: #808080;
    
}

.some-element {
	box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2),
		-0.2rem -0.2rem 0.5rem var(--white);
}

.another-element {
	box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2),
		inset -0.2rem -0.2rem 0.5rem var(--white);
}

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: inherit;
}

audio {
	display: none;
}

/* body {
	background-color: #f1efe4;
} */
.container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100vh;
}
h1 {
	color: rgb(158, 157, 156);
	margin-top: 130px;
	letter-spacing: 1px;
    position: relative;
    z-index: 1;
}
/* PLAY BUTTON */
.circle {
	grid-column: 2 / 3;
	grid-row: 4 / 6;
	width: 9rem;
	height: 100%;
	justify-self: center;
	border-radius: 1rem;
	display: grid;
	grid-template-rows: 1fr;
	justify-items: center;
	align-items: center;
	margin-bottom: 400px;
}

.circle__btn {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
	width: 6rem;
	height: 6rem;
	display: flex;
	margin: 0.6rem;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	font-size: 3.2rem;
	color: var(--primary);
	z-index: 300;
	/* background: var(--greyLight-1); */
    /* background: #fce97e; */
    background: #eaeaea;
	cursor: pointer;
	position: relative;
}

.circle__btn.shadow {
	box-shadow: 0.4rem 0.4rem 0.8rem var(--greyLight-2),
		-0.4rem -0.4rem 0.8rem var(--white);
}

.circle__btn .play {
	position: absolute;
	opacity: 0;
	transition: all 0.2s linear;
}

.circle__btn .play.visibility {
	opacity: 1;
}

.circle__btn .pause {
	position: absolute;
	transition: all 0.2s linear;
}

.circle__btn .pause.visibility {
	opacity: 0;
}

.circle__back-1,
.circle__back-2 {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
	width: 6rem;
	height: 6rem;
	border-radius: 50%;
	filter: blur(1px);
	z-index: 100;
}

.circle__back-1 {
	box-shadow: 0.4rem 0.4rem 0.8rem var(--greyLight-2),
		-0.4rem -0.4rem 0.8rem var(--white);
	background: linear-gradient(
		to bottom right,
		var(--greyLight-2) 0%,
		var(--white) 100%
	);
	animation: waves 4s linear infinite paused;
}

.circle__back-1.paused {
	animation-play-state: paused;
}

.circle__back-2 {
	box-shadow: 0.4rem 0.4rem 0.8rem var(--greyLight-2),
		-0.4rem -0.4rem 0.8rem var(--white);
	animation: waves 4s linear 2s infinite paused;
}

.circle__back-2.paused {
	animation-play-state: paused;
}

@keyframes waves {
	0% {
		transform: scale(1);
		opacity: 1;
	}

	50% {
		opacity: 1;
	}

	100% {
		transform: scale(2);
		opacity: 0;
	}
}
@media (prefers-color-scheme: light) {
    :root {
      color: #213547;
      background-color: #ffffff;
    }
    a:hover {
      color: #747bff;
    }
    button {
      background-color: #f9f9f9;
    }
  }