@import url('https://fonts.googleapis.com/css2?family=Science+Gothic:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Iceland&display=swap');

body {
  margin: 0;
  margin-top: 10px;
}

* {
  box-sizing: border-box;
}

flex {
  display: flex;
}

/*TABLES*/
table {
  font-family: "Iceland", sans-serif;
  border-collapse: collapse;
  width: 100%;
  margin-top: 10px;
}

td, th {
  border: 1px solid black;
  text-align: left;
  padding: 8px;
}

th {
  background: linear-gradient(rgba(226, 20, 60, 1) 0%, rgba(242, 78, 78, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
  color: white;
}

tr {
  color: white;
}

tr a {
  color: white;
  text-decoration: underline;
}

tr:nth-child(even) {
  color: black;
  background: radial-gradient(circle, #8BC34A 0%, #8BC34A 100%);
}

tr:nth-child(even) a {
  color: black;
  text-decoration: underline;
}

/*FONTS*/
h3, summary {
  background: linear-gradient(90deg,rgba(226, 20, 60, 1) 0%, rgba(242, 78, 78, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
  font-family: "Iceland", sans-serif;
  color: white;
  font-size: x-large;
  margin-top: 10px;
  margin-bottom: 0;
  padding-left: 15px;
}

p {
  background: linear-gradient(#03050a96, transparent);
  font-family: "Science Gothic", sans-serif;
  color: white;
  margin: 0;
  font-size: small;
}

a {
  text-decoration: none;
}

details {
  text-align: center;
  image-rendering: pixelated;
}

linkbutton {
  font-family: "Science Gothic", sans-serif;
  background: linear-gradient(180deg,rgba(56, 193, 225, 1) 0%, rgba(129, 230, 252, 1) 49%, rgba(56, 193, 225, 1) 50%, rgba(47, 181, 212, 1) 100%);
  color: black;
  padding: 5px 10px;
  border: 2px solid #38C1E1;
  border-radius: 5px;
}

linkbutton:hover {
  filter: sepia(1) hue-rotate(180deg) saturate(4);
  animation-name: rainbowlogo;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes rainbowlogo {
  0% {
    filter: sepia(1) hue-rotate(0deg) saturate(4);
  }
  100% {
    filter: sepia(1) hue-rotate(360deg) saturate(4);
  }
}

/*MOBILE*/
@media screen and (max-width: 600px) {
  body {
    overflow: hidden;
  }
}