* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
margin:10px !important;
}

/* Container to hold the three parts */
.container {
   display: flex;
   justify-content: space-between;
   margin-top:95px;
   margin-bottom:400px;
   width:90vw;
   max-width:1400px;
}

#top {
   position:absolute;
   top:10px;
   width:100%;
}

.center {
   text-align: center;
   font-size:18px;
}

table{
  /*background-color: white;*/
  /*opacity:0.9;*/
  /* use background instead of opacity, so images will show without opacity */
  background: rgba(255, 255, 255, 0.8);
  /*https://getcssscan.com/css-box-shadow-examples*/
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
  }

/* Styling for each table part */
.table-part {
   width: 30%;
}

/* Table styling */
table {
   width: 100%;
   border-collapse: collapse;
}

th, td {
   padding: 10px;
   text-align: left;
   border: 1px solid #ddd;
}

th {
background-color: #dddddd;
}

tr:nth-child(even) {
background: rgba(233, 233, 233, 0.6);
}

tr:nth-child(odd) {
background: rgba(255, 255, 255, 0.6);
}

/* Flag image styling */
.flag {
   width: 20px;
   height: 15px;
}

tr:hover {
background-color: #dddddd;
}

/* Media query for small screens */
@media screen and (max-width: 1024px) {
   /* Display the tables as a single table on small screens */
   .container {
      flex-direction: column;
   }

   .table-part {
      width: 100%;
   }
   
   /* Optionally hide the part titles (Part 1, Part 2, Part 3) on small screens */
   .table-part h2 {
      display: none;
   }
}