@font-face {
	font-family: "Inter";
	src: url("../media/ui/Inter.ttf");
}

@font-face {
	font-family: "Inter Italic";
	src: url("../media/ui/Inter Italic.ttf");
}

* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	box-sizing: border-box;
	font-family: "Inter";
}

html {
	height: 100%;
}

body, main {
	min-height: 100%;
	background-color: #c8daf7;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 16px;
}

#spell-input {
	border: 1px solid black;
	background-color: white;
	border-radius: 3px;
	padding: 10px 14px;
	font-size: 38px;
	width: 400px;
}

#audio-btn {
	width: 200px;
	height: 200px;
	cursor: pointer;
	border-radius: 50%;
	background-image: url("media/speaker.png");
	background-size: contain;
}

#one, #two {
	display: flex;
	gap: 16px;
}

button {
	background-color: #0041b3;
	border-radius: 3px;
	padding: 10px 26px;
	font-size: 32px;
	color: white;
	cursor: pointer;
}

.disabled {
	background-color: #596d8e;
	color: #b5b5b5;
	cursor: default;
	pointer-events: none;
}

h2 {
	font-size: 40px;
}

#result, #correct-spelling, #next-btn {
	visibility: hidden;
}

#definition {
	font-family: "Inter Italic";
	font-style: normal;
}

#pos {
	text-transform: uppercase;
}