body {
  background-color: #FFFFEA;
  color: #111111;
  font-family: arial;
  font-size: 20px;
  }
  @media screen and (min-width: 600px) {
    body {
      background-color: #FFFFA2;
    }
  }
      
  @media screen and (max-width: 800px) {
    body {
      background-color: #DDB791;
    }
  }
  
h1 {
  color: #888888;
  text-align: center;
  margin-left: 10px;
  }
 
.class1 {
  font-family: tahoma;
  color: #80000F;
  text-align: left;
  margin-left: 10px;
  }
   
h2 {
  color: #444444;
  margin-left: 10px;
  }

.time {
  font-family: tahoma;
  font-size: 16px;
  font-weight: bold;
  color: #101010;
  text-align: center;
  }

.class2 {
  color: #669966;
  font-family: tahoma;
  margin-left: 10px;
  }
  
p {
  color: #254117;
  font-family: arial;
  Font-size: 20px;
  font-weight: normal;
  margin-left: 10px;
  }
  

.list { 
  list-style-type: square;
  color: green;
  
  }

 .star { list-style-image: url('/star.gif');
   color: #00000F;
   } 
   
   
.intro {
  margin-left: 10px;
  margin-top: 40px;
  color: #222222;
  text-decoration: underline;
  text-align: center;
  }
  
  
.click { 
  background-color: rgb(200, 0, 0);
  color: white;
  border: none;
  margin-left: 10px;
  margin-right: 15px;
  border-radius: 3px;
  padding: 10px 26px;
  cursor: pointer;
  transition: opacity 0.25s;
  } 
  
.click:hover {
  opacity: 0.2;
  }
    
.click:active {
  opacity: 0.4;
  }

    
.another-click {
  background-color: #000000;
  color: #FFFFFF;
  border: #000000 1px solid;;
  margin-left: 1px;
  margin-right: 15px;
  border-radius: 3px;
  padding:10px 25px;
  cursor: pointer;
  transition: background-color 3s, color 3s ease-in-out;
  }
  
.another-click:hover {
  background-color: #FFFFFF;
  color: #000000;
  border: #000000 1px solid;
  }
    
.another-click:active {
  background-color: #888888;
  color: #222222;
  }    
    
    
.still-another {
  background-color: #008000;
  color: #FFFFFF;
  border: none;
  margin-left: 1px;
  margin-top: 3px;
  margin-right: 15px;
  border-radius: 20px;
  padding: 10px 15px;
  cursor: pointer;
  transition: box-shadow 0.5s;
  }
  
.still-another:hover {
  box-shadow: 5px 6px 5px 6px #DFE32D;
  background-color: #006633;
  color: #FFFAF0;
  
  }
  
.still-another:active {
  background-color: #00ff99;
  color: #80000C;
  }
    
.go-ahead {
  background-color: #888888;
  color: #254117;
  border: none;
  margin-left: 1px;
  margin-right: 15px;
  border-radius: 3px;
  cursor: pointer;
  padding: 10px 25px;
  }
  
.go-ahead:hover {
  background-color: #CC99FF;
  color: #222222;
  border: #000000 1px solid;
  box-shadow: 5px 6px 5px 6px #333333;
  }
    
.go-ahead:active {
  background-color: #FFFFFF;
  color: #000000;
  }    


.ask {
  background-color: #000000;
  color: #FFFFFF;
  border: none; 
  border-radius: 3px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 10px 28px;
  cursor: pointer;
  animation-name: color-change;
  animation-duration: 25s;
  }
  
  @keyframes color-change {
    from { background-color: #FFFFFF;
    color: #000000; }
    to { background-color: #000000;
    color: #FFFFFF;
    }
  }  

.add {
  background-color: #FFFFFF;
  color: #111111;
  border: palegoldenrod 1px solid;
  border-radius: 15px;
  margin-left: 7px;
  margin-right: 15px;
  padding: 10px 55px;
  animation-name: change2;
  animation-duration: 15s;
  }
  
  @keyframes change2 {
    0% { background-color: #C0C0C0;}
    25% { background-color: #555555;}  
    50% { background-color: #888888;}
    75% { background-color: #000000;
          color: #FFFFFF;}
    100% { background-color: #005000;
           color: #FFFFAA;}
  }      
  

.add:active {
  background-color: #333333;
  color: #FFFFAA;
  }


.sign-up {
  background-color: rgb(150, 0, 0);
  color: white;
  border: red 1px solid;
  padding: 10px 45px;
  border-radius: 3px;
  cursor: grab;
  margin-left: 5px;
  margin-right: 10px;
  }
  
.sign-up:hover {
  background-color: red;
  color: white;
  }

.sign-up:active {
  background-color: black;
  color: white;
  border: transparent;
  }


div {
  width: auto;
  height: auto;
  margin-bottom: 40px;
  background-color: #FFFFEA;
  color: black;
  padding: 10px;
  }
  
 .name {
   font-family: tahoma;
   color: green;
   }
  
.jeanne {
  font-family: verdana;
  color: purple;
  }
.estelle {
  color: red;
  font-family:sans-serif;
  }  
  
.elle { 
  color: blue;  
 }

.intro-2 {
  font-family: times;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  } 
  
  
 .test {
   background-color: #666666;
   color: #FFFFAA;
   font-family: helvetica;
   font-size: 18px;
   font-weight: bold;
   border: 1px solid;
   border-radius: 5px;
   padding: 15px 30px;
   transition: width 2s;
   margin-bottom:40px;
   cursor: progress;
   }
   
.test:hover {
  padding: 15px 200px;
  background-color: #FFFFAA;
  color: #666666;
  }  
 
 .rated-e {
   font-family: times;
   font-size: 18px;
   color: #006400;
   text-align: center;
   }
  
  .container2 {
    background-color: #FFFF00;
    text-align: center;
    font-family: times;
    font-size: 18px;
    color: #00640;
    }
  
  .blink {
    animation: blinker 2s linear infinite;
    color: green;
    font-family: sans-serif;
    text-shadow: 1px 1px #000000;
    text-align: center;
    }
    @keyframes blinker {
      50% {
          opacity: 0;
      }
    }
    
  
  
  .multi {
    border: 10px #000044;
    border-style: double;
    outline: 6px solid #CC00D2;
    background-color: #FFFFA2;
    }
     
    
   .timequotes {
     Padding-top: 10px;
     padding-bottom: 5px;
     text-align: center;
     font-family: arial, helvetica;
     font-size: 16px;
     font-weight:600;
     color: #444444;
     background-color: #FFFFA2
     }
     
  .move {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: black;
    animation-name: moving;
    animation-duration: 10s;
    margin-bottom: 60px;
 }
@keyframes moving {
  0%   {background-color:black; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:black; left:0px; top:0px;}
}

.glow {
  margin-top: 20px;
  font-family: arial;
  font-size: 40px;
  color: #FFFFFF;
  text-align: center;
  background-color: #000000;
  background-image: url("/star2.gif");
  -webkit-animation: glow is ease-in-out infinite alternative;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
  }
  
 @-webkit-keyframes glow {
    from {
      text-shadow: 0 0 5px #FFA07A, 0 0 10px #50c878, 0 0 15px #50c878, 0 0 20px #50c878, 0 0 25px #50c878, 0 0 30px #50c878, 0 0 35px #50c878;
      }
    to {
      text-shadow: 0 0 10px #FFA07A, 0 0 15px #af9b60, 0 0 20px #af9b60, 0 0 25px #af9b60, 0 0 30px #af9b60, 0 0 35px #af9b60, 0 0 40px #af9b60;
    }
  }