#body {
#  background-color: #94DACD;
#}

#screen {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 6px;
  height: auto;
  width: auto;
  #background-color: #ffffff;
}

#menubar {
  height: 10%;
  width: 100%;
  background-color: #2A373A;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.mac-btn {
  position: absolute;
  height: 8px;
  width: 8px;
  border-radius: 50%;
  margin-top: 15.5px;
}

#mac-btn-one {
  #background-color: #FC6767;
  margin-left: 15.5px;
}

#mac-btn-two {
  #background-color: #FDD973;
  margin-left: 31px;
}

#mac-btn-three {
  #background-color: #B3E07A;
  margin-left: 47px;
}

#filler {
  margin-left: 120px;
}

#profiler {
  position: absolute;
  height: 125px;
  width: 100px;
  background-color: #E7F5FF;
  margin-top: 50px;
}

#intro {
  position: absolute;
  margin-top: 115px;
  margin-left: 140px;
}

.filler-one {
  height: 10px;
  width: 200px;
  background-color: #E7F5FF;
  margin-top: 10px;
}

#main {
  position: absolute;
  margin-top: 195px;
}

.filler-two {
  height: 10px;
  width: 340px;
  background-color: #E7F5FF;
  margin-top: 15px;
}

.notification {
  height: auto;
  width: auto;
  background-color: #C1F7EE;
  margin-top: 0%;
  margin-left: 100%;
  transform-origin: right;
  -webkit-animation: notify 5s ease-in-out infinite;
  animation: notify 7s ease-in-out infinite;
}

@-webkit-keyframes notify {
  0% {transform: scaleX(0);}
  10% {transform: scaleX(1);}
  13% {transform: scale(1.1);}
  16% {transform: scale(1);}
  55% {transform: scaleX(1); border-radius: 0%;}
  65% {transform: scaleX(0.25); border-radius: 50%;}
  95% {transform: scaleX(0.25); border-radius: 50%;}
  100% {transform: scaleX(0);}
}

@keyframes notify {
  0% {transform: scaleX(0);}
  10% {transform: scaleX(1);}
  13% {transform: scale(1.1);}
  16% {transform: scale(1);}
  55% {transform: scaleX(1); border-radius: 0%;}
  65% {transform: scaleX(0.25); border-radius: 50%;}
  95% {transform: scaleX(0.25); border-radius: 50%;}
  100% {transform: scaleX(0);}
}

.identifier {
  position: absolute;
  height: 40px;
  width: 420px;
  #font-family: sans-serif;
  #font-size: 8px;
  border-radius: 50%;
  #background-color: #94DACD;
  margin-top: -20px;
  margin-left: 0px;
  -webkit-animation: exit 3s ease-in-out infinite;
  animation: exit 3s ease-in-out infinite;
}

.text {
  position: absolute;
  height: 0%;
  width: 70%;
  background-color: #006400;
  margin-top: 12.25px;
  margin-left: -440px;
  -webkit-animation: exit 3s ease-in-out infinite;
  animation: exit 3s ease-in-out infinite;
}

@-webkit-keyframes exit {
  0% {opacity: 1;}
  55% {opacity: 1;}
  65% {opacity: 0;}  
  100% {opacity: 0;}
}

@keyframes exit {
  0% {opacity: 1;}
  55% {opacity: 1;}
  65% {opacity: 0;}  
  100% {opacity: 0;}
}

.number {
  position: absolute;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  #color: #94DACD;
  margin-top: 50px;
  margin-left: -440px;
  transform-origin: right;
  -webkit-animation: enter 1s ease-in-out infinite;
  animation: enter 7s ease-in-out infinite;
}

@-webkit-keyframes enter {
  0% {opacity: 0;}
  55% {opacity: 0;}
  65% {opacity: 1; transform: scaleX(1);}
  95% {opacity: 1; transform: scaleX(1);}
  100% {opacity: 0; transform: scaleX(1);}
}

@keyframes enter {
  0% {opacity: 0;}
  55% {opacity: 0;}
  65% {opacity: 1; transform: scaleX(1);}
  95% {opacity: 1; transform: scaleX(1);}
  100% {opacity: 0; transform: scaleX(1);}
}

.credit {
  #position: absolute;
  font-family: sans-serif;
  font-size: 14px;
  #color: #ffffff;
  margin-top: 20px;
  margin-left: 50px;
  left: 20px;
}

a,
a:visited {
  text-decoration: none;
  #font-size: 10px;
  #color: #ffffff;
}

a:focus,
a:hover {
  #color: #45B39F;
}