table {
    margin: 0 auto;
    text-align: center;
    border-collapse: collapse;
    border: 1px solid #d4d4d4;
  }

  tr:nth-child(even) {
    background: #d4d4d4;
  }

  th, td {
    padding: 10px 30px;
  }

  th {
    border-bottom: 1px solid #d4d4d4;
  }

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
  background-color: #111;
}

.active{
    background-color: #575757;
}

#greeting{
  text-align: center;
}

#explanation{
  text-align: center;
  font-size: 24px;
}

#contact{
  position: fixed;
  text-align: center;
  bottom: 0px;
  width: 100%;
}

.ddt{
  display: flex;
  justify-content: center;
  font-size: 18px;
}

#sform{
  display: flex;
  justify-content: center;
  align-items: center;
}

.resultgrid {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
  height: 90vh;
}

.resultgrid > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

#image img{
  width:100%;
  height:100%;
}

#stats table{
  width: 100%;
  height: 100%;
}

#downlog {
  overflow-y:scroll;
}

#notearea{
  width:90%;
  resize: none;
}

/* Media Queries */
@media screen and (max-width: 600px) {
  .search-container {
      float: none;
  }
  a, input[type=text], .search-container button, input[list] {
      float: none;
      display: block;
      text-align: left;
      width: 100%;
      margin: 0;
      padding: 14px;
  }
  input[type=text], input[list] {
      border: 1px solid #ccc;  
  }
}