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

html,
body {
  font-size: 62.5%;
  background: rgb(255, 255, 255);
}

h1 {
  font-size: 1.8rem;
  color: rgb(20, 56, 127);
  padding: 0.2rem;
  font-family: "Poppins", cursive;
}

h2 {
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-weight: normal;
  font-size: 1.2rem;
  color: rgb(255, 255, 255);
  margin-bottom: 2rem;
  margin-top: 1rem;
  width: 100%;
}

h3 {
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-weight: bold;
  font-size: 2.4rem;
  color: rgb(20, 56, 127);
  background: rgba(255, 255, 255, 0.9);
  padding: 0.1rem;
  width: 100%;
}

h4 {
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-weight: normal;
  font-size: 1rem;
  color: rgb(20, 56, 127);
  margin-bottom: 2rem;
  width: 100%;
}

p {
  font-size: 1.2rem;
  color: rgb(20, 56, 127);
}

a {
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-weight: normal;
  font-size: 1.4rem;
  color: rgb(20, 56, 127);
  margin-right: 1rem; /* Add some space between the links */
  margin-bottom: 0; /* Remove bottom margin */
  display: inline-block; /* Keep inline-block to allow margin adjustments */
  padding: 1rem;
}

/*HEADER*/
#main-head {
  margin: 5% 5%;
  margin-bottom: 1%;
  min-height: 8vh;
}

.logo {
  display: flex;
  flex-flow: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.logo_img {
  width: 40pt;
  height: auto;
  margin-right: 0.5rem;
}

.links {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}

.footer {
  display: flex;
  width: 100%;
  margin: auto;
  min-height: 5vh;
  padding: 0rem 5rem;
  align-items: center;
  flex-wrap: wrap;
}
.soc-list {
  display: flex;
  flex: 1 1 30rem;
  justify-content: flex-end;
  align-items: center;
  list-style: none;
}
/*CSS GRID*/
.main-head {
  padding: 1rem;
}

/* --- GRID FOR DASHBOARD BOXES --- */
.boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2rem;
  justify-items: center;
  align-items: stretch;
  margin: 0 auto;
  padding: 1rem;
  max-width: 95%;
}

.box {
  aspect-ratio: 1 / 1; /* always square */
  width: 100%; /* grid decides width */
  max-width: 180px; /* optional */

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  border-radius: 20px;
  color: white;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* BOXES backgrounds */
.box1 {
  background: url("../assets/land.jpeg") center/cover no-repeat;
} /* Temperature */
.box2 {
  background: url("../assets/outdoor_hum.png") center/cover no-repeat;
} /* Relative humidity*/
.box3 {
  background: url("../assets/rain_today.png") center/cover no-repeat;
} /* Rain today */
.box4 {
  background: url("../assets/winddir.png") center/cover no-repeat;
} /* wind speed */
.box5 {
  background: url("../assets/wind_gust.png") center/cover no-repeat;
} /* Wind gust */
.box6 {
  background: url("../assets/wind_dir.png") center/cover no-repeat;
} /* Wind direction */
.box7 {
  background: url("../assets/tlak.png") center/cover no-repeat;
} /* Extra pressure (or duplicate if you want) */
.box8 {
  background: url("../assets/dew_point.png") center/cover no-repeat;
} /* Dew point */
.box9 {
  background: url("../assets/sun_light.png") center/cover no-repeat;
} /* Solar radiation */
.box10 {
  background: url("../assets/uv_index.png") center/cover no-repeat;
} /* UV index */
.box11 {
  background: url("../assets/home_temp.png") center/cover no-repeat;
} /* Indoor temperature */
.box12 {
  background: url("../assets/indoor_hum.png") center/cover no-repeat;
} /* Indoor humidity */

footer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  min-height: 5vh;
  margin: 0% 5%;
}

.footer-wrapper {
  background: #ffffff;
}

/* MEDIA QUERY */
@media screen and (max-width: 438px) {
  html {
    font-size: 50%;
  }

  h1 {
    font-size: 2.5rem;
  }
  h2 {
    font-size: 1rem;
    margin-bottom: 1rem;
  }

  h3 {
    font-size: 2.6rem;
  }
  .logo {
    display: flex;
    flex-flow: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }

  .logo_img {
    width: 30px;
    height: auto;
    margin-right: 0.5rem;
  }
}

@media screen and (min-width: 755px) {
  .boxes {
    padding: 3rem 15rem; /* more space around */
    max-width: 1000px; /* keeps grid centered */
  }
  h3 {
    font-size: 2.3rem;
  }
}