html,body{
    margin:0;
    padding:0;
    overflow-x: hidden;
    box-sizing: border-box;
    background: url("images/bg.png") no-repeat center center fixed;
    background-size:cover;

}
.navbar{

    background: #000;
    padding:20px;
    font-size: 22px;
    color:#fff;
    letter-spacing: 2.5px;
}
.navbar ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0;
}
a {
    color:aliceblue;
    text-decoration: none;
}

textarea{
    margin: 2rem;
   width: 50vw;
   height: 20vh;
   resize: none;
   border-radius:10px;
   border: 2px solid #000;
   font-size: 1.2rem;
   padding: 1.5rem;
   align-self: center;
}

.container{
width:100vw;
height:100vh;
display: flex;
justify-content: center;
flex-direction: column;


}
.buttons{
    display: flex;
    justify-content:space-evenly;
    padding: 0 8rem;
    
}
button{
    cursor: pointer;
    font-size: 1.2rem;
    height: 2.5rem;
    outline: none;
    color: #fff ;
    background: #1A1D1A;
    border-radius: 10px;
    padding: 0.5rem 1.8rem;
    box-shadow: 0 0.3rem rgba(225, 226, 228, 0.945);
  }
  button:hover{
    filter: brightness(110%);
  }
  button:active{
    transform: translate(0,0.2rem);
    box-shadow: 0 0.3rem rgba(225, 226, 228, 0.945);
  }
  
.output{
    border: 2px solid #000;
    height: 15vh;
    margin: 3rem 2rem;
    padding: 2.8rem;
    width: 48vw;
    background: #fff;
    border-radius: 10px;
    font-size: 1.6rem;
    align-self: center;
}
::placeholder {
    font-size: 1.2rem;
  }

  .about-div{
      width: 55vw;
      height: 50vh;
      display: flex;
      justify-content: center;
      padding: 30px 20px;
      background: #1A1D1A;
      border: 4px solid #fff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      border-radius: 10px;
  }
  .about-div article{
      font-size: 1.1rem;
      color: #fff;
  }
 span{
   font-size: 1.3rem;
   font-weight: bold;
   font-style: italic;
 }
 span:hover{
   background: #fff;
   color: #1A1D1A;
  
 }
 footer ul{
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  list-style: none;
  padding: 0 1rem;
  margin: 1rem;
}
footer li{
  padding: 0 .5rem;
   font-size: 1.25rem;

}
footer a{
  color:#E7E2E2; 
}

 @media screen and (max-width: 600px) {
  /* html,body{
    overflow-y: hidden;
  }  */
  
  .navbar{
     font-size: 14px;
     letter-spacing: normal;
     padding: 15px;
     
   }
   button{
    font-size: 0.8rem;
    height: 2rem;
    padding: 0.25rem 1rem;
  }
  .buttons{
    justify-content:space-evenly;
    padding: 0;
}  

textarea{
   width: 80vw;
   height: 20vh;
   font-size: 1rem;
   padding: 1rem;
   margin:1rem;
}
.output{
    width: 80vw;
    height: 20vh;
    margin: 1rem;
    padding: 1rem;
    font-size: 1rem;
}
.container{
  width: 100vw;;
}


  .about-div{
    height: 498px;
    width: 90vw;
    padding: 12px 8px;
    font-size: 10px ;
  }
 }