@font-face {
    font-family: "Black Ops";
    src: url(../../assets/font/BlackOpsOne-Regular.ttf);
}

.container{
    display: flex;
    flex-direction: column;
    align-items: center;
  
    
}

body{
    text-align: center;
  
    
   
    
}

.background{
  min-width: 800px;
  min-height: 400px;
  position: absolute;
  z-index: -1;
}


h1{
    font-family: Black Ops;
    color: #a4de02;
    font-size: 50px;
   -webkit-text-stroke: 1px black;
     position: absolute;
    left: 350px;
 

}
  

   


button{
    display: inline-block;
    border: 0;
    padding: 1.5rem 2.5rem;
    font-size: 20px;
    font-weight: bold;
    font-family: Black Ops;  
}

.play{
    background: #a4de02;
    border-radius: 50px;
    box-shadow: 
    8px 8px 16px rgba(52, 87, 52, 0.877),
    inset -8px -8px 12px rgb(40, 100, 48),
    inset 8px 8px 12px rgba(83, 207, 100, 0.993);
    width: 200px;
    position: absolute;
    top: 200px;
    left: 400px;
}
.howToPlay{
    background: #acdf87;
    border-radius: 50px;
    box-shadow: 
    8px 8px 16px rgba(52, 87, 52, 0.877),
    inset -8px -8px 12px rgb(40, 100, 48),
    inset 8px 8px 12px rgba(83, 207, 100, 0.993);
    width: 150px;
    align-items: center;
    justify-self: center;
    right: 12px;
    position: absolute;
    top: 280px;
    left: 430px;
}

img{
    width: 250px;
    height: 400px;
    position: absolute;
    top: 250x;
    left: 68px;
}

.play:active {
    animation: bounce 0.3s;
 }

 .howToPlay:active{
    animation: bounce 0.3s;
 }

 .scroll-container{
    height: 150px;
    overflow: hidden;
    position: absolute;
    top: 100px;
    left: 100px;
 
 }

 .scroll-text{
  height: 100%;
  text-align: center;
  color: whitesmoke;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
 
 




  -moz-transform: translateY(100%);
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  
  -moz-animation: my-animation 25s linear infinite;
  -webkit-animation: my-animation 25s linear infinite;
  animation: my-animation 25s linear infinite;
}


@-moz-keyframes my-animation {
  from { -moz-transform: translateY(100%); }
  to { -moz-transform: translateY(-100%); }
}


@-webkit-keyframes my-animation {
  from { -webkit-transform: translateY(100%); }
  to { -webkit-transform: translateY(-100%); }
 }

 @keyframes my-animation {
  from {
    -moz-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  to {
    -moz-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}

 @keyframes bounce {
    0% {
         transform: scale(1);
       }
       25% {
         transform: scale(0.95);
       }
       50% {
         transform: scale(1.1);
       }
       75% {
         transform: scale(0.98);
       }
       100% {
         transform: scale(1);
       }
 }