* {
    box-sizing: border-box;
      background-color: black;
    }
    a { color: white; }
    
    .canvas {
      display: block;
      margin-left: auto;
      margin-right: auto;
      border-style: groove;
      cursor: pointer;
      border-radius: 10px;
    }
  .texto_abajo{
    background-color: hsla(0, 0%, 0%, 0);
  }
  .texto_abajo:hover{
    color: yellow;
    
  }
    /* Style the header */
  .header {
    grid-area: header;
    /*display: block;*/
    border-color:rgb(46, 9, 211);
    background: linear-gradient(129deg, #003366 0%, #002566 100%);
    padding: 10px;
    border-radius: 10px;
    left: -100%;
    position: relative;
    border-style: outset;
    
  
  }
  
  #logo {
    max-width:100%;
    max-height:100%;
    display: block;
    background-color:  hsla(0, 0%, 0%, 0);
    filter: drop-shadow(11px 7px 4px #000);
}

#logo:hover{
  transform: scale(1.05, 1.05);
}
   
    /* The grid container */
  .grid-container {
    display: grid;
    
   
    grid-template-areas: 
      'header header header header user user'
      'left left center center right right' 
      'left left center center right right'
      'left left center center right right'
      'medal1 medal1 medal2 medal2 medal3 medal3'
      'footer footer footer footer footer footer';
      grid-column-gap: 10px; 
      grid-row-gap: 10px;
      /*grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));*/
      grid-template-columns: auto auto auto;
      
  } 
  
  .left,
  .center,
  .right
  {
    display: block;
    /*padding: 10px;*/
    padding:inherit;
    
  }
  
  .left {
    grid-area: left;
    opacity: 0.0;
  }
  
  /* Style the middle column */
  .center {
    grid-area: center;
    
  }
  
  /* Style the right column */
  .right {
    grid-area: right;
    opacity: 0.0;
  }

  
  .buttonDiv{
    background-color:  green;
    margin-left: auto;
    margin-right: auto;
    border-style: groove;
    border-radius: 8px;
    display: block;
  }

  .moregamesdiv{
    position: relative;
    left: -100%;
    background-color:  hsla(0, 0%, 0%, 0);
    display: none;

  }

  .moregames{
    background-color:  hsla(0, 0%, 0%, 0);
    display: block;
    width:100%;
    height:100%;
  }
  

  .panelDiv{
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    background-color:  #003366;
    border-style: groove;
    border-radius: 6px;
  }
  
  /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
  @media (max-width: 600px) {
    .grid-container  {
      grid-template-areas: 
        'header header header header user   user'
        'center center center center center center' 
        'medal1 medal1 medal1 medal1 medal1 medal1'
        'medal2 medal2 medal2 medal2 medal2 medal2'
        'medal3 medal3 medal3 medal3 medal3 medal3'
        'left   left   left   left   left   left' 
        'right  right  right  right  right  right'
        'footer footer footer footer footer footer'; 
        /*grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));*/
        grid-template-columns: auto;
      }
     
      
      
  }
  
  .user {
    grid-area: user;
    /*display: block;*/
    color: #ddd;
    text-align: center;
    background: linear-gradient(129deg, #003366 0%, #002566 100%);
    padding: 10px;
    border-radius: 10px;
    position: relative;
    left: 100%;
    border-style: outset;
    border-color:rgb(46, 9, 211);
    }
  
  /* Style the footer */
  .footer {
    grid-area: footer;
    background: linear-gradient(129deg, #003366 0%, #002566 100%);
    border-color:rgb(46, 9, 211);
    /*padding: 10px;*/
    border-radius: 10px;
    text-align: center;
    position: relative;
    left: 100%;
    border-style: outset;
    height: min-content;
    }
  
  .azul{
    background-color:  hsla(0, 0%, 0%, 0);
    color:"white";
  }

  .medal1,
  .medal2,
  .medal3{
    display: block;
    opacity: 0.0;
  }
  .medal1{
    grid-area: medal1;
  }
  .medal2{
    grid-area: medal2;
  }
  .medal3{
    grid-area: medal3;
  }

  table {
    overflow:hidden;
    border:solid rgb(190, 165, 165) 1px;
    border-radius:10px;
    width: auto ;
    background-color: #ddd;
  }
  
  /*
  th{
    background-color: rgb(31, 30, 30);
  }
  */
  .thitem{
    background-color: rgb(31, 30, 30);
    text-align: left;
  }

  .thitemuser{
    /*background-color: rgb(31, 30, 30);*/
    text-align: left;
    background-color: rgb(18, 75, 62);
    opacity: 1;
  }
  
  .thtitulo{
    background-color: rgb(35, 60, 83);
    text-align: left;
  }
  .thmetit{
    background-color: rgb(35, 60, 83);
    text-align: center;
  }
  .thmeitem{
    background-color: rgb(31, 30, 30);
    text-align: center;
  }

  table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    color: white;
  }
  
  td, th {
    border: 1px solid #dddddd;
    padding: 8px;
  }
  
  tr:nth-child(even) {
    background-color: #dddddd;
  }
  .titulo{
    color : white;
    background-color: #406666;
  }

  #flecha_logo{
    background-color: hsla(0, 0%, 0%, 0);
    border: 0px;
    
  }
  
  #flecha_logo:hover{
    transform: scale(1.1, 1.1);
    
  }

  #mbronze{
    scale: 100%;
  }
  #mplata{
    scale: 100%;
  }
  #moro{
    scale: 100%;
  }
  #mt20{
    scale: 100%;
  }
  #mt10{
    scale: 100%;
  }
  #mt3{
    scale: 100%;
  }
  #mpl10{
    scale: 100%;
  }
  #mpl50{
    scale: 100%;
  }
  #mpl100{
    scale: 100%;
  }