body {
	background:#5B2D96;
	background-image:url(stripe.png);
}

.parent {
	display:flex;
	align-items:center;
	justify-content:center;
	height: 100%;
	margin: 0;
	padding: 0;
}

.t {
	font-family: courier;
	font-size:0.75rem;
	color:#000;
}
.outer {
	margin: auto;
	background: #5B2D96;
	background: linear-gradient(160deg, #5B2D96 50%, #D4C13D 50%);
	padding: 5px;
	border-radius:5px;
	max-width:500px;
	border: solid #000 2px;
	outline: solid #ffffff 1px;
}

.flexbox {
	display:flex;
	flex-direction:row;
	gap:10px;
	align-items:center;
	justify-content:center;
}

@media (max-width:800px) {
.flexbox {
	flex-direction:column-reverse;
}
}
.bar {
	background:#fff;
	border-radius:5px;
	padding:5px;
	margin-top:7px;
	margin-bottom:7px;
	border: solid #000 2px;
	outline: solid #ffffff 1px;
	box-shadow:3px 3px #000;
	max-width:400px;
}

.box {
	padding:2px;
	margin:5px;
}

.box2 {
	background: #fff;
	border-radius:5px;
	padding:5px;
	max-width:400px;
	border: solid #000 2px;
	outline: solid #ffffff 1px;
	box-shadow:3px 3px #000;
}
.img {
	max-width:200px;
}

.right {
	text-align:right;
}

.quot {
	font-size:1rem;
	font-family:times;
}

.border {
	padding:5px;
	margin:auto;
	background-color:#000;
}

.pop {
	max-width:100px;
	animation:pop 2s ease-in-out infinite;
}


@keyframes pop {
	50% {transform: scale(-1);}
}

.flex2 {
	display:flex;
	flex-direction:row;
}
.music {
	display:block;
	margin-left:auto;
	float:right;
}

.p {
	font-family:courier;
}

.smil {
	display:block;
	margin-right:auto;
	float:left;
}

.rotate {
	transition:0.5s ease;
	animation:rotate 5s linear infinite;
}

@keyframes rotate {
	100% {transform:rotate(360deg)};
}