body {
  margin: 0;
}

.bg {
  position: fixed;
  inset: 0;
  background-image: url('background.jpg');
  background-size: cover;
  z-index: -1;
}

#container {
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  position: absolute;
  
  border: 0.3vh solid white;
  border-radius: 5vh;
  box-shadow: 0 0 3vh white;
  
  width: 45vh;
  height: 70vh;
  
  background: linear-gradient(180deg, rgba(0,0,0,0), white);
  
  text-align: center;
  color: white;
  text-shadow: 0.1vh 0.1vh black;
  font-family: Comics;
}

.wtext {
  font-family: Comics;
  color: white;
  font-size: 6vh;
  text-shadow: 0.2vh 0.2vh black;

  top: 0.5%;
  left: 50%;
  transform: translate(-50%,-0.5%);
  position: absolute;
}

@font-face {
  font-family: Comics;
  src: url('MadernsComic.ttf');
}

.main {
  top: 15%;
  left: 50%;
  transform: translate(-50%,-15%);
  position: absolute;
  
  width: 35vh;
  height: 35vh;
  
  border: 0.3vh solid white;
  box-shadow: 0 0 3vh white;
  border-radius: 5vh;
  
  font-size: 4vh;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  
  cursor: default;
}

.bottom {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translate(-50%,-5%);
  
  width: 28vh;
}

#grid-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5vh;
  
  width: 40vh;
  height: 25vh;
  
  bottom: 2%;
  left: 50%;
  transform: translate(-50%,-2%);
  position: absolute;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  
  font-size: 2vh;
  
  border: 0.3vh solid white;
  border-radius: 2vh;
  box-shadow: 0 0 2vh white;
  
  position: relative;
  
  cursor: default;
}

#temp {
  font-size: 10vh;
}

#wind-s, #wind-d, #humi, #press {
  font-size: 3vh;
}

a {
  font-family: Comics;
  font-size: 2vh;
  color: white;
  
  bottom: 5%;
  left: 50%;
  transform: translate(-50%,-5%);
  position: absolute;
}

a:hover {
  font-size: 2.5vh;
  
  transition: 0.3s ease;
}