body {
	background-color: #1c1c1c;
	color: white;
	font-family: sans-serif;
}

h1 {
	text-align: center;
	color: #00eeaa;
	margin-top: 50px;
}

.flex-container {
	display: flex;
	flex-direction: column;
	margin: 46px 20vw 0 20vw;
}

.flex-container > button {
	max-width: min-content;
	align-self: center;
	margin-top: 28px;
	margin-bottom: 22px;
	padding: 8px 10px 8px 10px;
	font-size: 1.2em;
	background-color: #ffdddd;
	color: black;
	border-color: #ffdddd;
	border-style: solid;
	font-weight: 600;
	transition-duration: 0.4s;
	border-radius: 16px;
	font-family: sans-serif;
}

.flex-container > button:hover {
	background-color: #1c1c1c;
	color: #ffdddd;
}

.flex-container > textarea {
	background-color: #333;
	color: white;
	padding: 11px;
	font-size: 1.1em;
}

.flex-container > .textarea-label {
	margin-bottom: 5px;
	color: #ffddff;
	font-size: 1.2em;
	font-weight: 700;
}

.options-container {
	margin-top: 7px;
}

.options-label {
	width: fit-content;
	margin-right: 8px;
	font-weight: lighter;
}

.notif {
	text-align: center;
	border-radius: 3px;
	padding: 3px 0px;
	margin-top: 5px;
	display: none;
}

.dropdown {
	width: fit-content;
	background-color: #eed;
	padding: 5px 10px;
}

.dropdown:hover {
	background-color: #ddc;
}

#success {
	animation: fadeIn 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
	border: 1px solid rgba(36, 241, 6, 0.46);
    background-color: rgba(7, 149, 66, 0.12156862745098039);
	color: #a1e7a0;
	padding: 5px 0px;
	font-family: 'Courier New', Courier, monospace;
}

#failed {
	animation: fadeIn 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
	border: 1px solid rgba(241, 6, 6, 0.81);
    background-color: rgba(220, 17, 1, 0.16);
	color: #f1d1d1;
	padding: 5px 0px;
	font-family: 'Courier New', Courier, monospace;
}

@media (max-aspect-ratio: 9/16) {
	.flex-container {
		display: flex;
		flex-direction: column;
		margin: 46px 5vw 46px 5vw;
	}
}

@keyframes fadeIn {
	0% { opacity: 0;}
	100% {opacity: 1;}
}