html, body {
	margin: 0;
	padding: 0;
}

body {
	background: #dfdfdf;
	padding: .5vw;
}

#textinput {
	font-family: sans-serif;
	text-transform: uppercase;
	display: block;
	transition: color 0.3s;
	font-size: 5vw;
	overflow-wrap: break-word;
	overflow-y: auto;
	height: calc(100vh - 9.5vw);
	word-break: break-all;
	padding: 1vw;
	background: white;
	border-radius: .5vw;
	margin-bottom: .5vw;
	border: .25vw solid black;
}
	  
.action-buttons {
	display: flex;
	gap: .5vw;
}
	  
.action-button {
	border-radius: 50%;
	font-size:2.25vw;
	text-align:center;
	border:.25vw solid black;
	height: 3.75vw;
	width: 3.75vw;
	background: white;
	line-height: 3.75vw;
	cursor: pointer;
	transition: all ease-in .2s;
}
    
.action-button.rightspace {
	margin-right: 2vw;
}
	  
.action-button:hover,
.action-button:active {
	transform: scale(.925);
}
	  
.action-button.randomcolor {
	background: linear-gradient(
		90deg,
		rgba(255, 0, 0, 1) 0%,
		rgba(255, 154, 0, 1) 10%,
		rgba(208, 222, 33, 1) 20%,
		rgba(79, 220, 74, 1) 30%,
		rgba(63, 218, 216, 1) 40%,
		rgba(47, 201, 226, 1) 50%,
		rgba(28, 127, 238, 1) 60%,
		rgba(95, 21, 242, 1) 70%,
		rgba(186, 12, 248, 1) 80%,
		rgba(251, 7, 217, 1) 90%,
		rgba(255, 0, 0, 1) 100%
	);
}