
body {
background-image: url('img/stars.gif');
background-size: auto;
background-color: purple;
color: white;
}

.headpart {
border: 10px solid blue;
border-radius: 25px;
padding: 10px;
Margin: 30px 100px;
background-color: lightblue;
outline: 5px solid darkblue;
text-align: center;
font-family:"Lucida Console", Monospace;
font-size: 90px;
}

.bodypart {
border: 5px dotted purple;
margin: 10px 200px;
padding: 20px;
background-color: purple;
outline: 10px dotted darkpurple;
}

#stick1 {
  animation: mymove 15s infinite ease-in-out;
  animation-direction: alternate;
  position: absolute;
  left: 0;
  top: 0;
}

@keyframes mymove {
  from {transform:translateX(0);}
  to {transform:translateX(5000px);}
}

#kennel {
  border: 10px solid blue;
border-radius: 25px;
padding: 10px;
Margin: 30px 100px;
background-color: lightblue;
outline: 5px solid darkblue;
text-align: left;
font-family:"Lucida Console", Monospace;
font-size: 20px;
overflow: scroll;
position: relative;
min-height: 300px;
min-width: 300px;
  }
  
#rightpart {
position:absolute;
left:5000px;
padding: 50px;
}

#followd {
  position:absolute;
  left:0px;
  padding:50px;
  visibility: visible;
  animation: visionfollow 30s infinite;
}

@keyframes visionfollow{
  5% {opacity: 1;}
  12%{opacity: 0;}
  100%{opacity:0;}
}

#waitd{
  position:absolute;
  left:0px;
  padding:50px;
  animation: visionwait 30s infinite;
}

@keyframes visionwait{
  0% {opacity:0;}
  15% {opacity:0;}
  20% {opacity:1;}
  60% {opacity:0;}
  100% {opacity:0;}
}

#welcomed{
  position:absolute;
  left:0px;
  padding:50px;
  animation: visionwelcome 30s infinite;
}

@keyframes visionwelcome{
 0% {opacity:0;}
 85% {opacity:0;}
 90% {opacity:1;}
 95% {opacity:1;}
 100% {opacity:0;}
}

#sisbutt{
  color: white;
  background-color:darkblue;
  border-color:blue;
  border: 20px;
  height:50px;
  text-align:center;
}
  
