@font-face {
    font-family: 'Proto Grotesk';
    src: local('☺️'),
        url('https://static.istories.media/public/fonts/Proto Grotesk-Regular-Web.woff2') format('woff2'),
        url('https://static.istories.media/public/fonts/Proto Grotesk-Regular-Web.woff') format('woff'),
        url('https://static.istories.media/public/fonts/Proto Grotesk-Regular-Web.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Proto Grotesk';
    src: local('☺️'),
        url('https://static.istories.media/public/fonts/Proto Grotesk-Bold-Web.woff2') format('woff2'),
        url('https://static.istories.media/public/fonts/Proto Grotesk-Bold-Web.woff') format('woff'),
        url('https://static.istories.media/public/fonts/Proto Grotesk-Bold-Web.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
  }

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
  }
  
  th, td {
    text-align: left;
    padding: 8px;
   
  }

  th {
    background-color: #99372E;
    color: white;
    
  }
  
  .copyright {
    font: normal 2vw "Proto Grotesk";
}
  

  tr:nth-child(even){background-color: #f2f2f2}
  
  @media screen and (min-width: 420px) {
    th {
        font: normal 2.5vw "Proto Grotesk";
        
      }
      td {
        font: normal 2vw "Proto Grotesk";
      }
  }
  @media screen and (max-width: 420px) {
    th {
        font: normal 4vw "Proto Grotesk";
        
      }
      td {
        font: normal 3vw "Proto Grotesk";
      }
  }