@font-face {
	font-family: "blocky";
	src: url("../fonts/m6x11plus.ttf");
}

#root {
	position: fixed;
	left: 0;
	top: 0%;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	z-index: -1;
	background-image: linear-gradient(45deg, #292E1E 10%, #7F0799 100%);
}

#music-bar {
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	text-align: center;
	width: 80cqh;
	height: 20%;
	margin: 0 auto;
	align-self: end;
	justify-self: center;
	border-radius: 32px 32px 0 0;
	background-image: linear-gradient(15deg, #292E1E 0%, #383F30 100%);
}

#yt-container {
	box-sizing: border-box;
	height: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	justify-content: center;
	align-content: center;
	border-radius: 32px 4px 0 0;
}

#overlay-div {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	backdrop-filter: blur(8px);
}

#style-container {
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
	width: 40cqh;
	height: 60cqh;
	margin: 0 auto;
	margin-top: 7%;
	background-image: linear-gradient(45deg, #7F0799 0%, #FFFFFF 100%);
	border-radius: 32px;
}

#style-container p {
	transition: all 0.5s ease;
	width: fit-content;
	margin: 0 auto;
	margin-bottom: 1cqh;
	font-size: 1.5rem;
	margin-left: 4cqh;
	margin-right: 4cqh;
}

#style-div {
	width: 100%;
	height: 50%;
	display: grid;
	grid-gap: 5px;
	margin-left: 0;
	align-self: start;
	grid-template-columns: max-content max-content;
}

#style-div label {
	text-align: right;
	font-size: 2.2rem;
	width: 65%;
	margin: 0 auto;
	justify-self: center;
	margin-left: 20%;
}

#style-div input {
	width: 5cqh;
	height: 5cqh;
}

.music-player {
	height: 100%;
	width: auto;
	margin: 0 auto;
	align-self: center;
	justify-self: center;
	text-align: center;
	margin-left: -29.0%;
}

.pulse-logo-div {
	width: 95%;
	height: 95%;
	align-content: center;
	justify-content: center;
	text-align: center;
	background-image: linear-gradient(to right, #7F0799FF 0%, #7F079900 25%, #7F079900 75%, #7F0799FF 100%);
	border-radius: 50%;
	margin: 0 auto;
}

.mask {
	width: 95%;
	height: 95%;
	align-content: center;
	justify-content: center;
	text-align: center;
	background-image: linear-gradient(to bottom, #BF83CC00 0%, #BF83CC00 10%, #BF83CCFF 30%, #BF83CCFF 45%, #FFFFFFFF 50%, #BF83CCFF 55%, #BF83CCFF 70%, #BF83CC00 90%, #BF83CC00 100%);
	border-radius: 50%;
	margin: 0 auto;
}

.pulse-logo-text {
	transform: scale(1.5, 1.0);
	transition: all 0.5s ease;
	width: fit-content;
	margin: 0 auto;
	margin-bottom: 1cqh;
	justify-self: center;
	align-self: center;
	font-family: "blocky";
	padding-top: 3%;
	color: #292E1E;
	cursor: default;
	font-size: 3.0rem !important;
}

#style-confirm {
	transition: all 0.2s ease;
	width: 50%;
	height: 5cqh;
	margin: 0 auto;
	background-color: #BF83CC;
	border-radius: 1cqh;
	cursor: default;
	color: #696E5E;
	align-content: center;
}
#style-confirm.valid {
	background-color: #292E1E;
	color: #FFFFFF;
	cursor: pointer;
}
#style-confirm.valid:hover {
	background-color: #7F0799;
}

#style-confirm p {
	transition: all 0.2s ease;
	align-self: center;
	justify-self: center;
	font-size: 1.5rem;
	transform: scale(1.0, 1.0);
	margin: auto auto;
}
#style-confirm.valid p {
	font-weight: bold;
	font-size: 1.8rem;
}






#vibe-controller {
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	text-align: center;
	margin: 0 auto;
	align-self: center;
	justify-self: center;
	width: 50cqh;
	height: 50cqh;
	overscroll-behavior: none;
}

.vibe-graph-overlay {
	position: absolute;
	width: 49.5cqh;
	height: 49.5cqh;
	background-image: repeating-linear-gradient(#00000022 0 2px, transparent 1px 100%), repeating-linear-gradient(90deg, #00000022 0 2px, transparent 1px 100%);
        background-size: 20% 20%, 20% 20%, 10% 10%;
        background-position: -1px -1px, -1px -1px, 0 0;
        border-style: solid;
}

.vibe-graph-bottom {
	position:absolute;
	width: inherit;
	height: inherit;
	background-image: linear-gradient(to right, #AAAAFF 0%, #FFFFAA 100%);
}
.vibe-graph-top {
	content:"";
	position:absolute;
	width: inherit;
	height: 30cqh;
	background:linear-gradient(to right, #FFAAAA 0%, #AAFFAA 100%);
	-webkit-mask:linear-gradient(#fff,transparent);
	mask:linear-gradient(#fff,transparent);
}



.mover { overflow: hidden; display: block; width: inherit; height: inherit; position: absolute; overscroll-behavior: none; } 
.move { position: absolute; width: 8cqh; height: 8cqh; left: 21.1cqh; top: 31.0cqh; background-image: linear-gradient(45deg, #7F0799AA 0%, #292E1EAA 100%); overscroll-behavior: none; border-radius: 50%; cursor: grab; }
.move:active {
	cursor: grabbing;
}







.toggle {
	position: relative;
	display: inline-block;
	width: 20cqh;
	height: 10cqh;
}

.toggle input {
	display: none;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	margin-left: -5%;
	right: auto;
	bottom: 0;
	width: 8cqh;
	height: 5cqh;
	background-color: #292E1E;
	transition: 0.4s;
	border-radius: 4cqh;
}

.slider:before {
	position: absolute;
	content: "";
	height: 4cqh;
	width: 4cqh;
	left: 0.5cqh;
	bottom: 0.5cqh;
	background-color: #FFFFFF;
	transition: all 0.2s ease;
	border-radius: 50%;
}

input:checked + .slider {
	background-color: #7F0799;
}

input:checked + .slider:before {
	transform: translateX(3cqh);
}






.rain {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.rain.back-row {
  display: none;
  z-index: 1;
  bottom: 60px;
  opacity: 0.5;
}

body.back-row-toggle .rain.back-row {
  display: block;
}

.drop {
  position: absolute;
  bottom: 100%;
  width: 15px;
  height: 120px;
  pointer-events: none;
  animation: drop 0.5s linear infinite;
}

@keyframes drop {
  0% {
    transform: translateY(0vh);
  }
  75% {
    transform: translateY(90vh);
  }
  100% {
    transform: translateY(90vh);
  }
}

.stem {
  width: 1px;
  height: 60%;
  margin-left: 7px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
  animation: stem 0.5s linear infinite;
}

@keyframes stem {
  0% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.splat {
  width: 15px;
  height: 10px;
  border-top: 2px dotted rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  opacity: 1;
  transform: scale(0);
  animation: splat 0.5s linear infinite;
  display: none;
}

body.splat-toggle .splat {
  display: block;
}

@keyframes splat {
  0% {
    opacity: 1;
    transform: scale(0);
  }
  80% {
    opacity: 1;
    transform: scale(0);
  }
  90% {
    opacity: 0.5;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

.bounce {
	animation: bounce 0.5s ease infinite alternate;
}

@keyframes bounce {
        100% {
		margin-top: -1%;
	}
}