
.wrap {
	display: flex;
	flex-direction: column;
	/* align-items: center; */
}

.blurred, .hide-blur {
	display: flex;
	justify-content: center;
	align-items: center;
	grid-area: 1 / 1;
	width: auto;
	height: auto;
	margin: -80px -40px -50px;
	backdrop-filter: blur(3px);
	z-index: 10;
	opacity: 1;
	transition: opacity 0.3s ease-in-out;
}

.hide-blur {
	opacity: 0;
	pointer-events: none;
}

.blur-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

html[class~=dark] .only-desktop {
	color: #f0f0f0;
	background-color: rgb(17, 17, 17);
	box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.2) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 2px 0px, rgba(0, 0, 0, 0.075) 0px 2px 4px 0px;
}

.only-desktop {
	transform: translateY(-14px);
	font-size: 14px;
	margin-top: -30px;
	line-height: 14px;
	padding: 8px;
	border-radius: 8px;
	background-color: #ffffff;
	box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 2px 0px, rgba(0, 0, 0, 0.075) 0px 2px 4px 0px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 100%;
}

html[class~=dark] .start, html[class~=dark] .start-shaked {
	color: #282828;
  background-color: rgb(226, 232, 240);
}

.start, .start-shaked {
	padding: 16px 32px;
	border-radius: 4px;
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	height: 48px;
	cursor: pointer;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	border: none;
	background-color: #282b3b;	
}

.start-shaked {
	animation: horizontal-shaking 0.3s ease-in-out;
}


@keyframes horizontal-shaking {
	0% { transform: translateX(0) }
	25% { transform: translateX(5px) }
	50% { transform: translateX(-5px) }
	75% { transform: translateX(5px) }
	100% { transform: translateX(0) }
}

.content {
	width: fit-content;
	max-width: 1200px;
}

.control {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 16px;
	justify-content: space-between;
}

.time {
	display: flex;
	align-items: center;
	gap: 12px;
}

html[class~=dark] .divider {
	background-color: #555;
}

.divider {
	background-color: #f0f0f0;
	height: 20px;
	width: 1px;
}

html[class~=dark] .play-wrap {
	color: #f0f0f0;
} 

.play-wrap {
	color: #222222;
	user-select: none;
	font-size: 14px;
	border: none;
	cursor: pointer;
	text-decoration: underline;
	text-decoration-style: dashed;
	display: flex;
	align-items: center;
	gap: 8px;
	width: 76px;
}

.play-wrap svg {
	width: 16px;
	height: 16px;
}

html[class~=dark] .container {
	border: 1px solid #2b2b2b;
	background-color: #1a1a1a;
}

.container {
  background-color: #fafafa;
	border: 1px solid rgb(235, 235, 235);
	border-radius: 8px;
	padding: 16px;
	display: grid;
}

html[class~=dark] .config {
	color: #f0f0f0;
}

.config {
	position: relative;
	display: flex;
	gap: 8px;
	align-items: center;
	color: #222222;
}

html[class~=dark] .config-button {
	border: 1px solid #414141;
	background-color: #111111;
}

.config-button {
  padding: 0 16px;
	height: 38px;
	text-transform: capitalize;
	border: 1px solid rgb(225, 225, 225);
	border-radius: 2px;
	font-size: 12px;
	background-color: #ffffff;
	cursor: pointer;
}

.config-button svg {
	width: 16px;
	height: 16px;
}


.config-wrap {
	position: relative;
}


.config-info {
	cursor: help;
	font-size: 14px;
	text-decoration: underline;
	text-decoration-style: dashed;
}

.arrow-wrap svg {	
	width: 16px;
	height: 16px;
}

html[class~=dark] .config-popup {
	background-color: rgb(17, 17, 17);
	box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.2) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 2px 0px, rgba(0, 0, 0, 0.075) 0px 2px 4px 0px;
}


.config-popup {
	white-space: nowrap;
	display: none;
	position: absolute;
	padding: 16px;
	border-radius: 8px;
	background-color: #ffffff;
	box-shadow:
		rgb(255, 255, 255) 0px 0px 0px 0px,
		rgba(0, 0, 0, 0.08) 0px 0px 0px 1px,
		rgba(0, 0, 0, 0.1) 0px 1px 2px 0px,
		rgba(0, 0, 0, 0.075) 0px 2px 4px 0px;
	flex-direction: column;
	align-items: flex-start;
	top: calc(100% + 8px);
	left: 50%;
	z-index: 10;
	transform: translate(-50%, 0);
}

.config-wrap:hover .config-popup {
	display: flex;
}


.sticker-wrap {
	position: relative;
}

.sticker {
	bottom: -16px;
	left: -16px;
	position: absolute;
	width: 140px;
	pointer-events: none;
}

.sticker img {
	border-radius: 8px;
}

.congrats {
	position: absolute;
	display: flex;
	height:40px;
	color: #333;
	border-radius: 8px;
	left: 44px;
	bottom: -16px;
}

html[class~=dark] .congrats-text {
	background-color: #1a1a1a;
	border-top: 1px solid #464646;
	border-right: 1px solid #464646;
	color: #a0a0a0;
}

.congrats-text {
	display: flex;
	align-items: center;
	background-color: #ffffff;
	border-top: 1px solid #c0c0c0;
	border-right: 1px solid #c0c0c0;
	text-wrap: nowrap;
	border-top-right-radius: 4px;
	padding: 0 12px 0 78px;
	font-size: 14px;
	font-weight: 500;
	font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
}