body {
width:100%;
height: 100vh;
background-color: grey;
}

#maincontainer {
	display:none;
	position: relative;
	top: 100px;
}

#timer, #score {
	border: 1px solid black;
	margin: 0
}

#cat {
	visibility: hidden;
	left: 0;
	top: 0;
	position:relative;
	transform: scaleX(-1);
	width: 100px;
}

#sword, #warrior, #swordstone {
	visibility: hidden;
	width: 100px;
}

#goat {
	visibility: hidden;
	width: 140px;
}

#message {
	margin: 10px auto;
	text-align: justify;
	background-color: rgba(255, 255, 255, 0.7);
	border: 1px solid black;
	font-size: 1em;

}

#word {
	margin: 10px auto;
	background-color: rgba(0, 0, 0, 0.5);
	font-size: 2em;
	color: white;
	}


#input {
	margin: 10px auto;
}

#inputbox{
	background-color: rgba(255, 255, 255, 0.7);
	text-align: center;
	font-size: 20px;
}

#timer, #score {
	background-color: rgba(255, 255, 255, 0.5);
	font-size: 20px;
}

#timer-input{
	width: 100%;
	margin: 0 auto;
	padding: 2%;
}

#timer-word, #score-word {
	text-align: left;
	padding-left: 2px;
	margin: 0 auto;
}

p {

	font-weight: 700;
	margin: 0 auto;
}

#homemessage{
	color: black;
	text-align: center;
	font-family: monospace;
	font-weight: bold;
	font-size: 3em;
	margin: 0 auto;
}

img {

}

.heart {
	width: 30px;
}

.col-4 {
	padding: 0px;
}

#lives {
	margin: 20px auto;
	background: rgba(239,133,173, 0.5);
	border: 1px solid rgb(255,0,148);
}

#checkmark{
	width: 30px;
	margin: 0 5px;
}

#endmessage{
	font-size: 2em;
	color:white;
	font-family: monospace;
}

::placeholder {
	text-align: center;
}