@font-face {
	font-family: titleFont;
	src: url('fonts/Optimus.otf');
}


body {
	margin: 0;
	background-color: rgb(60, 60, 60);
	background-image: url("mechtower/pattern.jpg");
	animation: scrollBackground 4s linear infinite;
}

@keyframes scrollBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 192px;
  }
}

@keyframes aboutPulse {
  from {
		box-shadow: 0 0 35px rgb(255, 149, 0);
  }
  to {
		box-shadow: 0 0 15px rgba(255, 106, 0, 0.594)
  }
}

.title {
	position: relative;
	width: 100%;
	height: 40vh;
	background: url('mechtower/background.webp') center/cover no-repeat;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fc9b00;
    -webkit-text-fill-color: #00000096;
    -webkit-text-stroke: 1px;
	font-size: 5em;
	font-family: titleFont;
	text-shadow: 0 0 50px rgb(255, 162, 0);
}

.about {
	margin-top: 20px;
	padding: 10px;
	background-color: #0f0f0fd8;
	border: 2px solid #FFBC00;
	border-radius: 15px;	
	color: rgb(255, 255, 255);
	max-width: 1000px;
	margin: 0 auto;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	box-shadow: 0 0 25px rgb(255, 106, 0);
	animation: aboutPulse 2s alternate infinite;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10vh;
}