/*Logo at the top*/
.logo{
    --opacity: .5;
    color: whitesmoke;
    text-shadow: 5px 5px 10px #000000;
    margin: 0px 30px;
    background-color:rgb(0, 255, 136);
    border-radius: 25px 60px 40px;
    font-size: 5em;
    text-transform: capitalize;
    width: 90%;
    text-align: center;
    
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
  /* Instead use this non-standard one: */
    word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;

    text-transform: uppercase;
     animation-name: logo;
     animation-duration: 30s;
     animation-iteration-count: infinite;
     animation-direction: alternate-reverse;
  }
 
  @keyframes logo {
   0%   {background-color: rgb(250, 0, 0);}
   20%  {background-color: rgb(250, 160, 0);}
   40%  {background-color: rgb(170, 100, 50);}
   60% {background-color: rgb(0, 250, 40);}
   80% {background-color: rgb(80, 130, 250);}
   100% {background-color: rgb(130, 0, 250);}
 }
 
.logo a{
   color: whitesmoke;
   cursor: pointer;
   text-decoration: none;
 }

 header{
  display:flex;
    flex-wrap: wrap;
    flex-direction:row;
    align-items: center;
    justify-content:center;
 }

 @media only screen and (max-width: 600px){
  .logo{
    font-size: 3em;
  }
 }