@font-face {
  font-family: 'Source Sans Pro';
  src: url('./fonts/SourceSansPro-Light.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
table {
      width: 100%;
      max-width: 900px;
      margin: auto;
      border-collapse: collapse;
      background: white;
      border-radius: 10px;
      overflow: hidden;
      font-family: 'Source Sans Pro';
      font-size: 1.5em;
      font-weight: 400;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    .rankmain{
      position: relative;
      width: 100%;
      text-align: center;
      font-family: Arial, Helvetica, sans-serif;
    }
    th, td {
      padding: 12px 15px;
      text-align: left;
    }
    th {
      background: #fdbf12;
      color: white;
    }
    tr:nth-child(even) {
      background: #f9f9f9;
    }
    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
    }
    .medal {
      font-size: 1.2em;
    }
    #onoo,#total{
      text-align: right;
    }

    @media (max-width:508px) {
      #avatar{
        display: none;
      }
      table{
        font-size: 1.1em;
      }
      
    }
    @media (max-width:608px) {
      #avatar{
        display: none;
      }
      table{
        font-size: 1.2em;
      }
      
    }