@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

:root {
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}
a:hover {
  color: #535bf2;
}

body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  color: #fff;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}
button:hover {
  border-color: #646cff;
}
button:focus,
button:focus-visible {
  outline:none;
}
.editor-player-controls-left {
  zoom: 1.2;
}
.editor-player-controls-fullscreen {
  zoom: 1.2;

}



/* 3D */
* {
  transform-style: preserve-3d;
}

.tw-caret {
	position: relative;
}
.tw-caret::after {
	content: '';
	position: absolute;
	left: calc(100% + var(--tw-caret-gap, 3px));
	top: var(--tw-caret-top, 0);
	width: var(--tw-caret-width, 2px);
	height: var(--tw-caret-height, 1em);
	background: currentColor;
	pointer-events: none;
	backface-visibility: hidden;
	will-change: transform;
	transform: translateY(var(--tw-caret-translateY, 0)) translateZ(0);
}

/* When heightEm is set, prefer it over height px */
.tw-caret[data-caret-hem="true"]::after {
	height: calc(var(--tw-caret-height-em, 0.08em));
}