*{  
    font-family: 'Unbounded', cursive;
    color: rgb(1, 0, 69);
    
    background-color: rgba(255, 255, 255, 0);
    margin: 0; padding: 0;
}
.mainland{
    margin: .5%;padding: 1%;
    color: rgb(255, 234, 0);
    background-color: rgba(0, 0, 0, 0.407);
    border-color: coral; 
    border: 1px;
    padding-bottom: .1%;
    border-spacing: 13%;
    align-content: center;
    

}
.center {
    display: block;
    margin-left: 1%;
    margin-right: 2%;
    width: 8%;
    align-items: left;
  }
  .sandbox{ 
    display: block;
    margin-left: 1%;
  }
  body{
    background-image: url(https://i.giphy.com/media/3q3SUqPnxZGQpMNcjc/giphy.webp) ; width: 100%; height: 100%;
    background-size: cover;

  }
 
  .buttons{
    text-align: left;
  }
  .lower{
    text-align: left;
  }
  ul{
    line-height: 1em;
    padding-top: .5%;
    background-color: rgba(168, 38, 212, 0.585);
    font-size: large;
    
  }
  .ul.color{
    background-color: rgba(0, 0, 0, 0.37);
    padding: 3%;
    
  }
  .slides {
    
    background-color: rgba(45, 3, 3, 0);
    
    position: relative;
    animation-name: slide;
    animation-duration: 12s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
  }
  @keyframes slide {
    0%   { left:0px; top:0px;}
    25%  { left:200px; top:0px; transform: rotate(180deg);}
    50%  { left:0px; top:0px;transform: rotate(0deg);}
    75%  { left:200px; top:0px;transform: rotate(180deg)}
    100% { left:0px; top:0px;}
    
  }
  .main.title {
    
    background-color: rgb(126, 3, 28);
    position: relative;
    animation-name: slidezz;
    animation-duration: 12.2s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
  }
  @keyframes slidezz {
    0%   { left:0px; top:0px;}
    25%  { left:200px; top:0px;}
    50%  { left:0px; top:0px;}
    75%  { left:200px; top:0px;}
    100% { left:0px; top:0px;}
  }
  .container {
    float: right;
    
    
    position: relative;
    animation-name: contained;
    animation-duration: 6s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }
  @keyframes contained {
    0%   { left:0px; top:0px;}
    25%  { left:0px; top:50px;font-size: x-small;}
    50%  { left:0px; top:0px;}
    75%  { left:200px; top:0px;font-size: x-large;}
    100% { left:0px; top:0px; }
    
  }
  .two.columns{
    padding-right: 4%;
    padding-bottom: 3%;
  }

  .widescale{
    width: 20%;
  }
  .footers{
    width: auto; height: 15%;
    line-height: 13%;
    color: yellow;
  }
  .four.columns{
    padding: 4%;
    
  }
  .twelve.columns{
    padding: -5%;
    padding-top: 4%;
    padding-right: -10%;
    padding-left: 5%;
    width: 50%;
    height: 70%;
    
    transition-duration: .5s;
  }
  .twelve.columns:hover{
    padding: -5%;
    padding-top: 8%;
    padding-bottom: 4%;
    padding-left: 5%;
    padding-right: -10%;
    width: 50%;
    color: rgba(137, 43, 226, 0.11);
  }
  
  
  .footers{
    font-size: small;
   
  }
  .footers:hover{
    color: brown;
   
  }
  .ul{
    transition-duration: 1s;
  }
 
  .ul:hover{
    background-color: rgb(92, 1, 33);
  }
  .button{
    background-color: red;
  }
  .button1:hover{
    background-color: red;
  }
  .button1{
    transition-duration: 1s;
    width: 186px;
    height: 38px;

  }
  .button2:hover{
    background-color: rgb(255, 225, 0);
  }
  .button2{
    transition-duration: 1s;
    width: 260px;
    height: 38px;

  }
  .button3:hover{
    background-color: rgb(255, 0, 0);
  }
  .button3{
    transition-duration: 1s;
    width: 189px;
    height: 38px;

  }
  .button4:hover{
    background-color: rgb(255, 221, 0);
  }
  .button4{
    transition-duration: 1s;
    width: 267px;
    height: 38px;

  }