body {
    background: #23272a;
  }
  
  .skip{
      width: 0;
      height: 0;
      animation-name: outanim;
      animation-duration: 1.5s;
  }
  img{
      animation-name: imganim;
      animation-duration: 1.5s;
      width: 250px;
      height: 250px;
  }
  button {
    z-index: -10000;
    position: static;
    animation-name: startin;
    animation-duration: 0.5s;
    text-decoration: none;
    background: seagreen;
    border-radius: 5px;
    border: none;
    float: right;
    font-size: 26pt;
    border-width: 5px;
    color: white;
  }
  
  input {
    animation-name: startin;
    animation-duration: 0.5s;
    border: none;
    margin-left: 20px;
    font-size: 26pt;
    border-width: 5px;
    color: white;
    background-color: seagreen;
    border-radius: 5px;
  }
  ::placeholder {
    color: whitesmoke;
    opacity: 0.75;
  }
  
  .rname {
    animation-name: fadein;
    animation-duration: 0.5s;
    margin: 10px;
    font-size: 20px;
    background-color: limegreen;
    color: white;
    border-radius: 5px;
    padding: 5px;
    overflow-wrap: break-word;
  }
  .rmessage {
    animation-name: fadein;
    animation-duration: 0.75s;
    margin: 10px;
    font-size: 26px;
    background-color: limegreen;
    color: white;
    border-radius: 5px;
    padding: 5px;
  }
  .name {
    animation-name: fadein;
    animation-duration: 0.5s;
    margin: 10px;
    font-size: 20px;
    background-color: darkgreen;
    color: white;
    border-radius: 5px;
    padding: 5px;
    overflow-wrap: break-word;
  }
  .message {
    animation-name: fadein;
    animation-duration: 0.75s;
    margin: 15px;
    font-size: 26px;
    background-color: darkgreen;
    color: white;
    border-radius: 5px;
    padding: 5px;
  }
  .cmessage {
    animation-name: fadein;
    animation-duration: 0.75s;
    margin: 15px;
    font-size: 26px;
    background-color: limegreen;
    color: white;
    border-radius: 5px;
    padding: 5px;
  
  }
  .rcmessage {
    animation-name: fadein;
    animation-duration: 0.75s;
    margin: 15px;
    font-size: 26px;
    background-color: darkgreen;
    color: white;
    border-radius: 5px;
    padding: 5px;
    filter: blur(5px);
  }
  .help{
    text-decoration: none;
    background: ghostwhite;
    border-radius: 100px;
    border: none;
    font-size: 26pt;
    border-width: 5px;
    color: #23272a;
    align-items: flex-end;
    position: fixed;
    bottom: 0px;
    z-index: 99999999999999 !important;
    right: 0px;
    margin: 10px;
    margin-top: 25px;
  }
  .Timer{
      font-size: 32px !important;
      background-color: white !important;
      color: black !important;
  }
  @keyframes fadein{
    from{
      filter: hue-rotate(360deg) blur(15px);
      opacity: 0;
      width: 0px;
      transform: translate(0px, 250px) rotate(25deg) scale(0.5);
    }
    to{
      opacity: 1;
      width: 100vw;
      color: white;
        }
        
  }
  button:hover {
  transition: .5s;
  transform: scale(0.9);
  filter: brightness(1.3);
  }
  button:active {
  transition: .5s;
  transform: scale(1.1);
  background-color: darkgreen;
  filter: blur(1px);
  }
  input:focus {
  transition: .5s;
  transform: translate(5px) scale(1.1) rotate(0.5deg);
  filter: drop-shadow(-5px -5px darkgreen);
  }
  
  div:hover {
  transition: .5s;
  transform: translate(0px, -2.5px) rotate(0.1deg);
  background-color: lightgreen;
  }
  
  @keyframes startin{
    from{
      opacity: 0;
      width: 0px;
      transform: translate(0px, -200px);
    }
    to{
      opacity: 1;
      }
  }
  
  @keyframes imganim{
    from{
      opacity: 0;
      width: 0px;
      height: 0px;
      filter: hue-rotate(1000deg) blur(50px);
    }
    to{
      opacity: 1;
      }
  }
  @keyframes outanim{
      from{
      opacity: 1;
      width: 250px;
      height: 250px;
      }
    to{
      opacity: 0;
      width: 0px;
      height: 0px;
      filter: hue-rotate(1000deg) blur(50px);
    }
  }