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

@keyframes fadeOutIntroText {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}

body {
    background: rgba(162, 210, 255, 0.2);
    background-repeat: no-repeat;
    font-family: "Lora", serif;
    font-size: 20px;
    color: rgba(0,0,0,1);
    transition-property: background;
    transition-duration: 10s;
  }

  header {
    padding: 1em 1em;
    max-width: 26em;
    font-size: 1.4em;
  }

  main {
    padding: 0em 1em;
    max-width: 26em;
    font-size: 1.4em;
  }
  
  footer {
    padding: 1em 1em;
    max-width: 26em;
    font-size: 1.4em;
    padding-top:0.5em;
  }

  h1, h2, h3, h4, h5, h6 {
    padding:0;
    margin:0;
    font-size: 1.4em;
  }

  h1 {
    font-size: 1.8em;
    padding-bottom: 1em;
  }

  a {
    color: rgba(0,0,0,1);
    font-style: italic;
    transition: color 150ms ease-in-out;
  }
  
  a:hover {
    color: rgba(30,60,52,1)
  }

  small {
    color: rgba(0,0,0,.5)
  }

  .wave {
    display: inline-block !important;
    animation: 1s ease-in-out infinite wave;
  }
  
  @keyframes wave {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(45deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }

 .flex {
    display: flex;
  }

  .dot {
	background: black;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
	margin: .3em;
	height: 0.75em;
	width: 0.75em;
	transform: scale(1);
	animation: pulse-black 2s infinite;
    margin-right: 0.75em;
  }

  .dot.red {
	background: rgba(255,0,0, 1);
	box-shadow: 0 0 0 0 rgba(255,0,0, 1);
	animation: pulse-red 2s infinite;
  }

@keyframes pulse-red {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255,0,0, 0.7);
	}
	
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(255,0,0, 0);
	}
	
	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255,0,0, 0);
	}
}

.dot.green {
	background: rgba(50,205,50, 1);
	box-shadow: 0 0 0 0 rgba(50,205,50, 1);
	animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(50,205,50, 0.7);
	}
	
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(50,205,50, 0);
	}
	
	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(50,205,50, 0);
	}
}

.eyes { 
    padding: 0em 0.25em;
    font-style: normal;  
}

.bottom {
  margin-bottom:2em;
}
  @media only screen and (max-width: 640px){
    header {
        font-size: 110%;
    }
    main, footer, h1, h2, h3, h4, h5, h6 {
        font-size: 120%;
    }
  }

  .error header {
    padding-top:1em;
    max-width: 100% !important;
    text-align: center;
  }

  .error main {
    max-width: 100% !important;
    text-align: center;
  }

  .error footer {
    max-width: 100% !important;
    text-align: center;
  }

  .error h1 {
    font-size: 6em;
    line-height: 2em;
    padding:0;
    margin:0;
  }