html {
    font-family: "Roboto", sans-serif;
  
}
  main {
    margin-top: 89px;
    background: url(im.about-tr/chocolate-img.png);
    background-size: cover;
    background-position: 50%;
    border-top: 1px solid #979797;
    padding: 5px 10px;

   
  }
  .roska-historia {
    display: flex;
    flex-flow: column;
    color: #969696;
    width: 700px;
    opacity: 0.7;
  
    
  }

  .ros-hist-h{
    display: flex;
    background-color: #000000;
    letter-spacing: 0.13em;
    opacity: 0.8;
    text-align: center;
    padding: 20px;
    margin: 10px 0;
  }

  .ros-hist-p{
    display: flex;
    background-color: #000000;
    font-style: italic;
    line-height: 2;
    font-size: 18px;
    padding: 20px;
  }
 
 
  @media (max-width: 768px) {
    main { 
        display: flex;
        padding: 5px 15px; 
      }
   
    
    .ros-hist-h{
    justify-content: center;
    border:2px solid #969696;
    padding: 10px;
    font-size: 10px;
      }
    .ros-hist-p{
        justify-content: center;
        font-size: 12px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius:20px ;
        padding: 10px;
          }
}