body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  .topnav {
    overflow: hidden;
    background-color: #333;
  }
  
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  .topnav a.active {
    background-color: #f44336;
    color: white;
  }
  
  .topnav-right {
    float: right;
  }

  * {
    box-sizing: border-box;
  }
  

  .column {
    float: left;
    width: 33.33%;
    padding: 10px;
    height: auto; 

  }
  

  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  

  @media screen and (max-width: 800px) {
    .column {
      width: 100%;
    }
  }


  .button {
    
    border: none;
    color: white;
    padding: auto;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: auto;
    cursor: pointer;
    background-color: #f44336;
  }

  .pre {
    
    word-wrap: break-word;
    text-align: justify;
  }
 
  .heading{
background-color: #f44336;
text-align: center;
padding: 2px;
margin: auto;
border-radius: 10px;

  }

  .headings{
    background-color: #f44336;
   
    margin: auto;
    border-radius: 10px;
    
      }
    


  .sub-heading{
    background-color: grey;
   text-align: center;
    padding: 10px;
    margin: 5px;
    border-radius: 10px;
  }

  input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }
  
  input[type=submit] {
    width: 100%;
    background-color: #f44336;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  input[type=submit]:hover {
    background-color: #f44336;
  }
    span.b {
        display: inline-block;
        width: 180px;
        height: 80px;
        padding: 5px;
     border-radius: 2px;   
        background-color: white; 
      }
      


      @media screen and (min-width: 801px) {
       .heading, .sub-heading {
          font-size: 15px;
        }
        
     
      }
      
      /* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
      @media screen and (max-width: 800px) {
        .heading,  .sub-heading {
          font-size: 12px;
        }
      }

      @media screen and (max-width: 500px) {
        .heading, .sub-heading {
           font-size: 10px;
         }
       }
       @media screen and (max-width: 750px) {
        .topnav-right, a.topnav {
         font-size: 10px;
        }
      }

      @media screen and (min-width: 749px) {
        a.topnav,    .topnav-right  {
          font-size: 15px;
         }
         
      
       }
       @media screen and (max-width: 697px) {
      .responsive {
       text-align: center;
        }
      }
  

      @media all and  (max-width: 777px){
    .pre {
      font-size: 7px;
    }
  }

  @media all and  (max-width: 1200px){
    .pre {
      font-size: 7px;
    }
  }

  @media all and  (max-width: 1400px){
    .pre {
      font-size: 10px;
    }
  }

  @media all and  (max-width: 1010px){
    .pre {
      font-size: 8px;
    }
  }

  @media screen and (min-width: 600px) {
    .pre {
      font-size: 6px;
    }
  }
  @media screen and (max-width: 777px) {
    .pre {
      font-size: 6px;
    }
  }
  @media screen and (min-width: 956px) {
    .pre {
      font-size: 10px;
    }
  }