@import url('https://fonts.googleapis.com/css2?family=Teko&display=swap');

:root {
	font-family: 'Teko', sans-serif;
}

[v-cloak] {
	display: none;
}

html, body, #app {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.container {
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: rgba(0, 0, 0, .5);
	position: relative;
	text-align: center;
	border-radius: 15px;
}

h1 {
	margin-bottom: 5px;
}

#health-bar {
	display: flex;
	flex-direction: row;
	border-width: 1px;
	border-style: solid;
	border-color: black;
}

#health-bar .health {
	height: 20px;
	flex-grow: 1;
	border-radius: 2px;
	border-style: solid;
	border-color: black;
	border-width: 1px;
}

#health-bar .health.filled {
	background-color: red;
}
#health-bar .health.empty {
	background-color: darkred;
}


.grow-enter-active, .grow-leave-active {
	transition: transform 1s;
}
.grow-enter, .grow-leave-to {
	transform: scale(0);
}