*{
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    box-sizing: border-box;
  
}
.container{
  display: flex;
  justify-content:center;
   flex-flow: column;
   margin-left: 12rem;
  
    }
.img{

 width: 850px;
 height: 450px;  
 display: flex;
 justify-content: center;
 align-items: center; 
 margin:  10px;
}
#text-nsa{
    letter-spacing: 20px; 
    color:#fff;
    font-size: 5rem; 
    text-shadow: 5px 3px white; 
    animation: moveLeft  2s ease-in-out;
} 
#text-nsa:hover{
    color: teal;
}
.two{
width: 850px;
height: 324px;
display: flex;
flex-direction: row;
margin:  10px;
background: rgb(224, 219, 219);
animation: move  2s ease;
}

.box{
width:270px;
height: 324px;
margin: 2rem;
}
.nav{
    text-decoration: none;
    color: rgb(49, 48, 48);
    display: block;
}
.nav:hover{
    text-decoration: line-through;
}
 .btn{
     width: 100px;
     height: 30px;
     border-radius:  5px;
 }
 .btn:hover{
     background: wheat;
     color: tomato;
 }

 @media (max-width:400px){ 
        .container{
          margin: 0;
          padding: 0;
        } 
        .two{
          flex-direction: column;
          height: auto;
        } 
        #text-nsa{
          color: brown;
        }         
 }
 @media (max-width:600px){ 
  .container{
    margin: 0;
    padding: 0;
  }  
    
}
@media (max-width:1200px){ 
  .container{
    margin: 0;
    padding: 0;
  }  
    
}
 
 @keyframes moveLeft {
    0% {
      opacity: 0;
      transform: translateX(-10rem); }
    80% {
      transform: translateX(1rem); }
    100% {
      opacity: 1;
      transform: translate(0); } }
      @keyframes move {
        0% {
          opacity: 0;
          transform: translateX(10rem); }
        80% {
          transform: translateX(1rem); }
        100% {
          opacity: 1;
          transform: translate(0); } }