@font-face {
  font-family: "Comic-Sans-Local";
  src: url("./comic-sans/Comic-Sans-MS.ttf");
}

body {
	background-repeat: no-repeat;
	background-attachment: fixed; 
	background-size: 100% 100%;
	text-align: center;
	height: 100%; 
	overflow: hidden;
	font-size: 24px;
	font-family: "Comic-Sans-Local";
	--purpl: #b888ff;
	--btn: rgba(255, 255, 255, 0);
	--color: #eaecf0;
	color: var(--color);
}

body:not(.light) {
	background-image: url("./night-background.png");
}

body.light {
	background-repeat: no-repeat;
	background-attachment: fixed; 
	background-size: 100% 100%;
	text-align: center;
	height: 100%; 
	overflow: hidden;
	font-size: 24px;
	font-family: "Comic-Sans-Local";
	--purpl: #ffb300;
	--btn: rgba(0, 0, 0, 0);
	--color: #363330;
}

.center {
	position: absolute;
	bottom: 10%;
	left: 25%;
	width: 50%;
	height: 80%;
	padding: 20px;
	outline: double var(--purpl) 8px;
	border-radius: 32px;
}

#text_to_cat_noises_result, #cat_noises_to_text_result {
	overflow-y: auto;
	height: calc(50% - 160px);
    scrollbar-color: var(--purpl) rgba(0, 0, 0, 0);
}

button, input {
	outline: solid var(--purpl) 2px;
	border-radius: 8px;
	background: var(--btn);
	color: var(--color);
}