@import url("fonts/MinecraftFont.css");

body,
html {
  height: 100%;
  margin: 0;
  background-color: #333333;

  /* The image used */
  background-image: url("images/background.jpeg");

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  font-family: 'Minecraft';
}

h1 {
  font-family: 'Minecraft';
  text-align: center;
  color: #c8c8c8;
}

a{
  color: #3E78B2;
  text-decoration: none;
}

a:hover{
  text-decoration: underline;
}

.content {
  display: grid;
  grid-template-rows: 1fr 0.75fr 0.25fr 2fr 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  height: 100%;
}

.caption {
  grid-area: 2;
  font-size: max(45pt, 6vw);
  font-family: 'Minecraft';
  text-align: center;

  background-size: cover;
  color: #90A959;
  background-clip:text; 
  padding:0;
  margin:0;
  text-align:center;

  animation: fade ease 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-delay: 0ms;
}

.info {
  grid-area: 4;

  animation: fade ease 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-delay: 30ms;
}

.info h1 {
  font-size: max(1vw,28pt);
}

.login{
  position: fixed;
  bottom: 16px;
  right: 16px;
  font-family: 'Minecraft';
  font-weight: 48pt;
  color: #e7e7e7;
}

.highlight{
  color: #ce6932;
  font-size: 110%;
}

.animate{
  animation: pulse 2s infinite;
  animation-delay: 1s;
  transform: scale(1);
}

@keyframes pulse {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(0.95);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes fade {
  0% {
      opacity: 0;
  }
  70% {
    opacity: 0.90;
  }
  100% {
      opacity: 1;
   }
}