:root {
  --page-background: #1f1f1f;
  --text-color: #f0f0f0;
  --input-backround: #b0b0b0;
  --icon-backround-color: #7686A0;
  --gray-main: #606060;
  --gray-darker: #565656;
  --disabled-gray: #252525;
  --accent-color-dark: #233f27;
  --accent-color-text: #a0c0a0;
  --accent-color-dim: #608060;
  --accent-color: #309050;
  --accent-color-bright: #2e9f50;
}

body {
  font-family: sans-serif, Arial;
  background-color: var(--page-background);
  color: var(--text-color);
}

.vertical-scroll {
  height: 100%;
  overflow-y: scroll;
}

h1 {
  color: var(--accent-color-text);
}

h2, h3, h4 {
  color: var(--accent-color-text);
  margin-top: 30;
  margin-bottom: 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

.table-container {
  overflow-x: auto;
  margin-left: 94px;
}

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

tr:nth-child(2) {
  background-color: var(--icon-backround-color) !important;
}

tr {
  background-color: var(--gray-main);
}

.temp, .clouds, .rain, .wind, .radiation, .atmo {
  background-color: var(--gray-darker) !important;
}

th {
  background-color: var(--accent-color) !important;
}

.static {
  background-color: var(--gray-main);
  position: absolute;
  width: 85px;
  left: 0;
}

.image-head {
    height: 105px;
}

input, select {
  background-color: var(--input-backround);
  color: black;
  border-radius: 6px;
  padding: 2px;
  font-size: large;
}

button {
  background-color: var(--accent-color-bright);
  color: var(--text-color);
  border-radius: 6px;
  padding: 5px;
  height: 35px;
  padding-inline: 8px;
}

button:disabled,
button[disabled] {
  color: var(--disabled-gray);
  background-color: var(--gray-main);
}

.top-ui {
  display: flex;
}
.top-column {
  padding: 2px;
  padding-right: 20px;
}

footer {
  display: flex;
  justify-content: space-around;
  padding: 20px;
  font-size: 14px;
}

.column {
  display: flex;
  justify-content: center;
}

.footer-column {
  width: 30%;
  justify-content: center;
  text-align: center;
}

.footer-title {
  color: var(--accent-color-dim);
  margin-bottom: 0px;
}

.footer-text {
  color: var(--gray-main);
}

@media (max-width: 500px) {
  .footer {
      flex-direction: column;
      text-align: center;
  }
  .footer-column {
      margin-bottom: 10px;
      width: auto;
  }
  .top-ui {
      flex-direction: column;
  }
  .top-column {
      margin-bottom: 10px;
      width: auto;
  }
}

.tooltip-trigger {
  border-bottom: 1px dotted white;
  width: max-content;
}

.tooltip {
  position: relative;
  display: inline-block;
  justify-content: center;
}

.tooltip .tooltiptext {
  visibility: hidden;
  background-color: #233f27;
  color: white;
  text-align: left;
  border-radius: 6px;
  padding: 5px;
  position: relative;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.logo {
  float: none;
  position: absolute;
  top: 50%;
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spin {
  from {rotate: 0deg;}
  to {rotate: 360deg;}
}

.light {
  background-color: #5272ad !important;
}

.medium {
  background-color: #34548f !important;
}

.heavy {
  background-color: #20407b !important;
}

.warm {
  background-color: #976727 !important;
}

.mild {
  background-color: #81785b !important;
}

.hot {
  background-color: #782818 !important;
}

.cold {
  background-color: #707898 !important;
}

.arctic {
  background-color: #74a1cf !important;
}

.clear-sky {
  background-color: #408d83 !important;
}

.broken-clouds {
  background-color: #157162 !important;
}

.overcast {
  background-color: #1b4d46 !important;
}

.night {
  background-color: #2f2f2f !important;
}

.vheavy {
  background-color: #61207b !important;
}

.warn {
  background-color: #a72d2d !important;
}

.accent-green {
  background-color: var(--accent-color);
}