/* Add your CSS styles here! */
/* Practice different selectors:
   - Element selectors: h1, p, button
   - Class selectors: .verse, .chorus, .emphasis
   - ID selectors: #special-item
   - Descendant selectors: header p, .practice-area button
*/

.color-red {
  color: red;
}

.color-blue {
  color: blue;
}

.color-green {   
  color: green;
}

h1{
  color: rgb(255, 255, 255);
  font-family: 'Courier New', Courier, monospace;
  font-size: 50px;
  background-color: chartreuse;
}
body{
  place-items: center
  ;
  text-align: center;
}
#paul{
  width: 800px;
}
#beatle{
  width: 300px;
}
#beatle {
  position: fixed;
  top: 0;
  left: 0;
  width: 80px;
  animation: floatAround 10s infinite linear alternate;
}

@keyframes floatAround {
  0%   { top: 0; left: 0; }
  25%  { top: 50%; left: 20%; }
  50%  { top: 80%; left: 70%; }
  75%  { top: 30%; left: 90%; }
  100% { top: 0; left: 50%; }
}
#beatle2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 80px;
  animation: floatAround 10s infinite linear alternate;
}

@keyframes floatAround {
  0%   { top: 0; left: 0; }
  25%  { top: 50%; left: 20%; }
  50%  { top: 80%; left: 70%; }
  75%  { top: 30%; left: 90%; }
  100% { top: 0; left: 50%; }
}
#beatle3{
  position: fixed;
  top: 0;
  left: 0;
  width: 80px;
  animation: floatAround 2s infinite linear alternate;
}

@keyframes floatAround {
  0%   { top: 0; left: 0; }
  25%  { top: 50%; left: 20%; }
  50%  { top: 80%; left: 70%; }
  75%  { top: 30%; left: 90%; }
  100% { top: 0; left: 50%; }
}
#beatle4{
  position: fixed;
  top: 0;
  left: 0;
  width: 80px;
  animation: floatAround 20s infinite linear alternate;
}

@keyframes floatAround {
  0%   { top: 0; left: 0; }
  25%  { top: 50%; left: 20%; }
  50%  { top: 80%; left: 70%; }
  75%  { top: 30%; left: 90%; }
  100% { top: 0; left: 50%; }
}
#beatle5{
  position: fixed;
  top: 10;
  left: 0;
  width: 80px;
  animation: floatAround 1s infinite linear alternate;
}

@keyframes floatAround {
  0%   { top: 0; left: 0; }
  25%  { top: 50%; left: 20%; }
  50%  { top: 80%; left: 70%; }
  75%  { top: 30%; left: 90%; }
  100% { top: 0; left: 50%; }
}

  body {

 background-image: url(depositphotos_67510257-stock-video-abstract-animation-background.jpg);
 background-color: #cccccc;
}

text{
  outline: 5px dotted green;
}
#beatle{
  outline: 5px solid 
  rgb(255, 12, 154);
}

body{
  color: rgb(0, 0, 0);
}

h2{
  outline: 5px solid;
  stroke: rgb(255, 255, 255) 11px;
}

#Blast{
  width: 500px;
}