body {
	font-family: 'Roboto', sans-serif;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	align-items: center;
	justify-content: center;
	background-color: lightsalmon;
	color:rgb(71, 76, 82);;
}

main {
	flex: 1;
}

h1 {
	text-align: center;
}
footer {
	margin-top: auto;
	font-size: 12px;
}

.center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	max-width: 100%;
	margin-top: 1em;
	margin: 0 10px;
}

.center img {
	max-width: 100%;
	width: auto;
	height: auto;
	max-height: 50vh;
	margin: 1em;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}

.circle {
	border-radius: 100%;
}
.center img.active {
	opacity: 1;
	transition: opacity 0.5s ease-in-out;
}

.container {
	display: flex;
	justify-content: center;
	align-items: center;
  }
  .container p {
	font-size: 2.5rem;
	padding: 0.5rem;
	font-weight: bold;
	letter-spacing: 0.1rem;
	text-align: center;
	overflow: hidden;

}
	@media only screen and (max-width: 600px) {
		.container p {
			font-size: 2rem;
		}
	}
  .container p span.typed-text {
	font-weight: normal;
	color:rgb(71, 76, 82);
	/* color: #dd7732; */
  }
  .container p span.cursor {
	display: inline-block;
	background-color: rgb(36, 33, 33);
	margin-left: 0.1rem;
	width: 3px;
	animation: blink 1s infinite;
  }
  .container p span.cursor.typing {
	animation: none;
  }
  @keyframes blink {
	0%  { background-color: rgb(36, 33, 33) }
	49% { background-color: rgb(36, 33, 33) }
	50% { background-color: transparent; }
	99% { background-color: transparent; }
	100%  { background-color: rgb(36, 33, 33) }
  }