/* Algae */
.algae {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 375px;
  top: 12px;
}
.algae {
  -webkit-box-reflect: left 175px;
}
/* Backgrounds and Text */
.title{
  font-family: Garamond, serif;
  color: white;
  text-align: center;
  font-size: 75px;
  font-weight: bold;
}
.title:active {
  color: black;
}
.heading {
  color: #4B371C;
  text-align: center;
  font-size: 17.5px;
}
.h2 {
  font-weight: bold;
  margin: 15px;
  font-size: 30px;
}
h1 {
  color: #FBFCF8;
	text-align: center;
}
.margin{
  margin: 10px;
}
.Normal{
  Text-align: center;
  font-size: 20px;
  position: absolute;
}
#DefBack {
  background-color: #FBFCF8;
  width: 545px;
  height: 225px;
  margin: auto;
  position: relative;
}
#HeadingBack {
  background-color: #E7C27D;
  width: 200px;
  height: 50px;
  margin: auto;
  border-radius: 10px 10px;
  position: relative;
}
#HeadingBack2 {
  background-color: #E7C27D;
  width: 300px;
  height: 50px;
  margin: auto;
  border-radius: 10px 10px;
  position: relative;
}
#TextBack {
  background-color: #B0FC38;
  width: 545px;
  height: 160px;
  margin: auto;
  border-radius: 10px 10px;
  position: relative;
}
#TextBack2 {
  background-color: #B0FC38;
  width: 545px;
  height: 250px;
  margin: auto;
  border-radius: 10px 10px;
  position: relative;
}
#TextBack3 {
  background-color: #B0FC38;
  width: 545px;
  height: 200px;
  margin: auto;
  border-radius: 10px 10px;
  position: relative;
}
#TextBack4 {
  background-color: #B0FC38;
  width: 545px;
  height: 300px;
  margin: auto;
  border-radius: 10px 10px;
  position: relative;
}
body {
  background-color: #F9E076;
}
.source {
  font-size: 10px;
  color: grey;
}
/* The Body */
#outline {
  background-color: black;
  width: 600px;
  height: 600px;
  margin: auto;
  border-radius: 10px 10px 30px 30px;
  box-shadow: 10px 10px 20px black;
}
#middle {
  background-color: gold;
  width: 566px;
  height: 566px;
  margin: auto;
  border-radius: 10px 10px;
  position: relative;
  top: 17.5px;
}
#mid {
  background-color: #E6AF45;
  width: 566px;
  height: 125px;
  margin: auto;
  border-radius: 10px 10px;
  position: relative;
}
/* the screen  */
#screen {
  top: 185px;
  background-color: gold;
  width: 566px;
  height: 356px;
  margin: auto;
  position: absolute;
  display: inline-block;
  border-radius: 10px 10px;
}
/* buttons that lead to pages */
.button {
  background-color: #03AC13;
  overflow: hidden;
}
#HomeB {
  background-color: #EEDC9A;
  padding: 1px 9px;
  position: absolute;
  left: 3px;
}
#HomeB:hover {
  background-color: #FCAE1E;
}
#DefB {
  background-color: #EEDC9A;
  padding: 1px 9px;
  position: absolute;
  left: 63px;
}
#DefB:hover {
  background-color: #FCAE1E;
}
#PG1 {
  background-color: #EEDC9A;
  padding: 1px 9px;
  position: absolute;
  left: 188px;
}
#PG1:hover {
  background-color: #FCAE1E;
}
#PG2 {
  background-color: #EEDC9A;
  padding: 1px 9px;
  position: absolute;
  left: 316px;
}
#PG2:hover {
  background-color: #FCAE1E;
}
#PG3 {
  background-color: #EEDC9A;
  padding: 1px 9px;
  position: absolute;
  left: 437px;
}
#PG3:hover {
  background-color: #FCAE1E;
}
#screens {
  display: none;
}
/* google search bar animation */
.search {
  width: 545px;
  height: 60px;
  position: relative;
  margin: 10px;
  /* snip from "Digigtal Ocean": */
  object-fit: cover;
}
.container {
  position: relative;
  text-align: center;
  color: black;
}
.l1 {
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 105px;
  transform: translate(-50%, -50%);
  animation-name: D;
  animation-duration: .25s;

}
@keyframes D {
  0%   {color: white;}
  99.99% {color: white}
  100% {color: green;}
}
.l2 {
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 125px;
  transform: translate(-50%, -50%);
  animation-name: e;
  animation-duration: .5s;
}
@keyframes e {
  0%   {color: white;}
  99.99% {color: white}
  100% {color: green;}
}
.l3 {
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 140px;
  transform: translate(-50%, -50%);
  animation-name: f;
  animation-duration: .75s;
}
@keyframes f {
  0%   {color: white;}
  99.99% {color: white}
  100% {color: green;}
}
.l4 {
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 157.5px;
  transform: translate(-50%, -50%);
  animation-name: i;
  animation-duration: 1s;
}
@keyframes i {
  0%   {color: white;}
  99.99% {color: white}
  100% {color: green;}
}
.l5 {
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 175px;
  transform: translate(-50%, -50%);
  animation-name: n;
  animation-duration: 1.25s;
}
@keyframes n {
  0%   {color: white;}
  99.99% {color: white}
  100% {color: green;}
}
.l6 {
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 192.5px;
  transform: translate(-50%, -50%);
  animation-name: e2;
  animation-duration: 1.5s;
}
@keyframes e2 {
  0%   {color: white;}
  99.99% {color: white}
  100% {color: green;}
}
.l7 {
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 227.5px;
  transform: translate(-50%, -50%);
  animation-name: A;
  animation-duration: 2s;
}
@keyframes A {
  0%   {color: white;}
  99.99% {color: white}
  100% {color: green;}
}
.l8 {
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 245px;
  transform: translate(-50%, -50%);
  animation-name: l;
  animation-duration: 2.25s;
}
@keyframes l {
  0%   {color: white;}
  99.99% {color: white}
  100% {color: green;}
}
.l9 {
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 262.5px;
  transform: translate(-50%, -50%);
  animation-name: g;
  animation-duration: 2.5s;
}
@keyframes g {
  0%   {color: white;}
  99.99% {color: white}
  100% {color: green;}
}
.l10 {
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 280px;
  transform: translate(-50%, -50%);
  animation-name: a2;
  animation-duration: 2.75s;
}
@keyframes a2 {
  0%   {color: white;}
  99.99% {color: white}
  100% {color: green;}
}
.l11 {
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 297.5px;
  transform: translate(-50%, -50%);
  animation-name: e3;
  animation-duration: 3s;
}
@keyframes e3 {
  0%   {color: white;}
  99.99% {color: white}
  100% {color: green;}
}