styles.css

@font-face {
  font-family: "Inter";
  font-style:  normal;
  font-weight: 500;
  font-display: block;
  /*src: url("../fonts/Inter.var.woff2") format("woff2");*/
}
:root {
	--bg-color: #ddb74d;
	--bg-color-dark: #e28800;
	--bg-color-darker: #d06000;
}

body {
	/*background-color: var(--bg-color);*/
	background-image: url("lava.png");
	image-rendering: pixelated;
	font-family: Inter, Asap, Arial, sans-serif;
	margin: 0;
	color: azure;
	text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
body::-webkit-scrollbar {
	width: 0.8em;
	height: 0.8em;
}
body::-webkit-scrollbar-thumb {
	background-color: var(--bg-color-dark);
}
body::-webkit-scrollbar-thumb:hover {
	background-color: var(--bg-color-darker);;
}
body::-webkit-scrollbar-corner {
	background-color: var(--bg-color);
}
body::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

button {
	font-family: Inter;
	background-color: var(--bg-color-dark);
}
button:hover {
	background-color: #ffdd48;
	cursor: pointer;
}

.indented {
	padding-left: 10%;
}
.bold {
	font-weight: bold;
}
.clickable {
	cursor: pointer;
}
.italic {
	font-style: italic;
}


.main {
	width: 100%;
	position: absolute;
	top: 70%;
}
.barra-fondo {
	width: 42%;
	margin: 15px auto;
	height: 20px;
	background-color: #525252;
	border: 3px solid #2e2e2e;
	position: relative;
}

.barra-target {
	width: 15%;
	height: 20px;
	background-color: #b3b3b3;
	position: absolute;
	left: 0px;
}
.barra-movil {
	width: 3%;
	height: 5px;
	background-color: lime;
	position: absolute;
	top: -11px;
	left: 0px;
}
.tiempo {
	width: 30%;
	background-color: #525252;
}
.barra-tiempo {
	width: 100%;
	height: 20px;
	background-color: #5fe36c;
}
.image-container {
	margin-bottom: 45px;
	display: flex;
	justify-content: center;
	position: relative;
	align-items: center;
}
.imagen {
	position: absolute;
}