:root {
    --background-body: #5e3d83; /* Soft pastel purple */
    --background-alt: #39254f;
    --background: #39254f; /* Rich purple */
    --focus: #39254f; /* Light violet */
    --border: #5B21B6; /* Deep purple */
		--button-base: #140d1c;
    --button-hover: #2f1e42; /* Slightly brighter purple */
    --highlight: #39254f; /* Light purple */
		--focus: #a86dea;
		--selection: #a86dea;
}

.dynapuff-font {
  font-family: "DynaPuff", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.header-container {
  display: flex;
  padding: 20px;
  overflow: auto;
  align-items: center;
  justify-content: center;
}

.header-container img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  float: left;
}

.header-container h1 {
  top: 0.2em;
  left: 24em;
  line-height: 50px;
  font-size: 70px;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.select-group {
  display: flex;
  gap: 15px;
}
.select-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

label {
  font-weight: bold;
  margin-bottom: 5px;
}
button {
  margin-top: 15px;
  font-size: 16px;
  font-weight: bold;
}

.youtube-container {
	overflow: hidden;
	width: 100%;
	/* Keep it the right aspect-ratio */
	aspect-ratio: 16/9;
	/* No clicking/hover effects */
	pointer-events: none;
	border-radius: 10px;
	
	iframe {
		/* Extend it beyond the viewport... */
		width: 300%;
		height: 100%;
		/* ...and bring it back again */
		margin-left: -100%;
	}
}