body {

  text-align:left;
  font-family:monospace;
  font-size: 20px;
  color: indianred;
}

a{
    text-align: center;
}

h1{
    color: indianred;
    font-size: 30px;
    text-align: center;
}
.onee{
    width: 260px;
    height: 260px;
    position: absolute;
    animation: 3s ease 0s normal forwards infinite fadein;
    animation: 3s ease s normal backwards infinite fadeout;
}
.beatles{
  position: absolute;
    height: 4000px;
    width: 8000px;
}
.beatles:hover{
    opacity: 0
}
@keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

@keyframes fadeout{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

.textone{
    text-align: left;
    position: relative;
    border: 4px solid indianred;
    width: 800px;
    margin-left: 225px;
    background-color: white;
    
}

.texttwo{
    text-align: left;
    position: relative; 
    position: relative;
    margin-left: 225px;
    border: 4px solid indianred;
    width: 800px;
    background-color: white;
    margin-top:  250px;
  
}


.textthree{
    text-align: left;
    position: relative;
     position: relative;
    border: 4px solid indianred;
     width: 800px;
    margin-left: 225px;
    background-color: white;
}

.be{ 
    width: 3000px;
    height: 1000px;
    position:absolute;
}

.textfour{
    text-align: left;
    position: relative;
     position: relative;
    border: 4px solid indianred;
     width: 800px;
    margin-left: 225px;
}


.beat{
    width: 3000px;
    height: 1000px;
    position: absolute;
}
.textfive{
    text-align: left;
    position: relative;
     position: relative;
    border: 4px solid indianred;
     width: 800px;
    margin-left: 225px;
}


img {
   max-width: 100%;
    max-height:500px;
    float: left;
    position: fixed;
 
}

.john{
    width: 300px;
    height: 300px;
    float: left;
    border: 5px solid white;
    position:absolute;
    filter: grayscale(100%);
    animation:spin 10s linear infinite;
    animation:spin 10s linear infinite;
    animation:spin 10s linear infinite;
}

.paul{ 
    width: 300px;
    height: 300px;
    left: 300px;
    border: 5px solid white;
    position: absolute;
    animation:spin 10s linear infinite;
    animation:spin 10s linear infinite;
    animation:spin 10s linear infinite;
}


.ringo{
    width: 300px;
    height: 300px;
    float: right;
    right: 300px;
    border: 5px solid white;
    position: absolute;
    animation:spin 10s linear infinite;
    animation:spin 10s linear infinite;
    animation:spin 10s linear infinite;
}

.george{
    width: 300px;
    height: 300px;
    float: right;
    right: 0px;
    border: 5px solid white;
    position:absolute;
    filter: grayscale(100%);
    animation:spin 10s linear infinite;
    animation:spin 10s linear infinite;
    animation:spin 10s linear infinite;

}

@-moz-keyframes spin { 100% {transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% {transform: rotate(360deg); } }
@keyframes spin { 100% {transform: rotate(360deg); transform:rotate(360deg); } }


img.john:hover{
    animation: rotating 60ms linear infinite;
}
img.paul:hover{
    animation: rotating 60ms linear infinite;
}
img.ringo:hover{
    animation: rotating 60ms linear infinite;
}
img.george:hover{
    animation: rotating 60ms linear infinite;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}