html, body {
	height: 120%;
	overflow: hidden;
}

body {
	font-family: Verdana;
	background: #00ff6a;
	margin: 0;
}

header {
	background-color: white;
	color: black;
	height: 80px;
	
	display: flex;
 	align-items: center;
	justify-content: center;
	box-shadow: 0px 10px 10px rgba(15, 15, 15, 0.15);
}

/*WORD CONTAINER*/

.word {
	background-color: white;
	box-shadow: 5px 10px 10px rgba(15, 15, 15, 0.15);
	border-radius: 5px;

	width: fit-content;
	padding: 15px;

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	display: flex;
	flex-direction: column;
	align-items: center;
}

.word input {
	border: 1px solid;
	border-radius: 5px;
	width: 200px;
	height: 40px;
	outline: none;
}

.word button {
	background-color: orange;
	background: linear-gradient(145deg, rgba(255, 166, 0, 1) 10%, rgba(251, 255, 0, 1) 50%, rgba(255, 166, 0, 1) 90%);
	box-shadow: 5px 10px 10px rgba(15, 15, 15, 0.15);
	border: none;
	border-radius: 5px;
	
	width: 100px;
	height: 50px;
	
	font-size: 1.4em;
	color: white;
	cursor: pointer;

	margin: 10px;
}

.word h5 {
	font-size: 2em;
	margin: 5px;
}

/*OPTIONS CONTAINER*/

.options {
	background-color: white;
	box-shadow: 5px 10px 10px rgba(15, 15, 15, 0.15);
	border-radius: 5px;

	width: fit-content;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 15px;
	padding-top: 0;

	position: absolute;
	top: calc(100% - 10px);
	left: 5px;
	transform: translateY(-100%);

	display: flex;
	flex-direction: column;
	align-items: center;
}

.options button {
	background-color: rgb(230, 230, 230);
	box-shadow: 5px 5px 5px rgba(15, 15, 15, 0.35);
	border: none;
	border-radius: 5px;

	margin: 5px;
	cursor: pointer;

	width: 80px;
	height: 20px;
}