CSS drawing - Pogoda wraz z jej animacją i prosty view odnośnie pogody CSS, SASS

Byłabym zachwycona otrzymać wskazówki co mogłabym napisać lepiej :) Za wszystkie uwagi serdecznie dziękuje <3
Edit:
https://codepen.io/zuzjk/pen/bGwRqEE?editors=1100

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<div class="frame">
	<div class="center">
		<div class="card">
			<div class="weather-landscape">
				<div class="drop"></div>
				<div class="drop"></div>
				<div class="drop"></div>
				<div class="drop"></div>
				<div class="drop"></div>
				<div class="drop"></div>
				<div class="drop"></div>
				<div class="drop"></div>
				<div class="drop"></div>
				<div class="drop"></div>
				<div class="drop"></div>
				<div class="drop"></div>
				<div class="drop"></div>
				<div class="drop"></div>
				<div class="drop"></div>
				<div class="drop"></div>
				<div class="drop"></div>
				<div class="drop"></div>
				<div class="drop"></div>
				<div class="drop"></div>
				<div class="drop"></div>
				<div class="drop"></div>
				<div class="drop"></div>
				<div class="drop"></div>
				<div class="drop"></div>
				<div class="moon">
					<div class="dots dots-1"></div>
					<div class="dots dots-2"></div>
					<div class="dots dots-3"></div>
					<div class="dots dots-4"></div>
					<div class="dots dots-5"></div>
					<div class="dots dots-6"></div>
					<div class="dots dots-7"></div>
					<div class="dots dots-8"></div>
					<div class="dots dots-9"></div>
					<div class="dots dots-10"></div>
				</div>
				<div>
					<div class="hill"></div>
					<div class="hill "></div>
					<div class="hill"></div>
					<div class="hill"></div>
					<div class="hill"></div>
				</div>
			</div>
			<div class="weather-details">
				<p class="temperature">12°</p>
				<p>
					<span>Wind: E 7 km/h</span><br>
					<span>Humidity: 87%</span>
				</p>
				<p>
					<time>TUE</time> 21° / 9°<br>
					<time>WED</time> 23° / 10°
				</p>
			</div>
		</div>
	</div>
</div>

$navy : #1A2238;
$yellow: #F6EDBD;
$shadowMoon:#8D8C7D;
$hillColor:#303C5D;
@mixin round($width){
	width:$width;
	height:$width;
	border-radius:50%;
}

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
	box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
	overflow: hidden;
  background: #fff;
  color: #333;
	font-family: 'Open Sans', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.center {
	height:100%;
}
.card{
	height:100%;
}
.weather-landscape{
	height:80%;
	background-color: $navy;
	position:relative;
	overflow:hidden;
}
.drop{
  position: absolute;
	top: -50px;
  width: 10px;
  height:10px;
  transform:rotate(-37deg);
  background-color:rgb(158, 202, 255);
  border-radius:100% 0% 60% 40% / 60% 0% 100% 40% ;
	animation: rain linear infinite;
	z-index:9;
	@for $i from 1 through 25{
		&:nth-child(#{$i}){
		left:random(390) + px;
			animation-delay: random(20)/10  +s;
			animation-duration: random(5)/10 +0.9 +s;
				transform:scale(random(10)/10+.5)rotate(-37deg);
			}
	}
}
.moon{
	@include round(75px);
	box-shadow: 0 0 15px 5px $shadowMoon;
	background-color:$yellow;
	position:relative;
	top:250px;
	left:70px;
	overflow:hidden;
	animation: moonRise 1s forwards;
}
.dots{
	@include round(12px);
	background-color:darken($yellow,10%);
	position:absolute;
	@for $i from 1 through 10{
		&-#{$i}{
			top:random(70)+px;
			left:random(70)+px;
			transform:scale(random(20)/20+0.5);
		}
	}
}
.hill{
	width: 300px;
	height:150px;
	background-color:red;
	border-radius: 50%;
	position:absolute;
		&:nth-child(1){
		left:-2%;
		bottom:-5%;
	}
			&:nth-child(2){
		left:62%;
		bottom:-5%;
	}
	&:nth-child(3){
		left:-42%;
		bottom:-25%;

	}
	&:nth-child(4){
			left:22%;
			border-radius: 100%/100%;
			bottom:-11%;
	}
	&:nth-child(5){
		left:75%;
		bottom:-23%;
	}
		&:nth-child(-n+2){
		background-color:darken($hillColor,5%);
	} 
	&:nth-child(n+3){
		background-color:$hillColor;
	} 
}
.weather-details{
	height:20%;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.temperature{
	font-size:2.3em;
}
@keyframes rain{
100%{
		transform:translate(-40px,370px)rotate(-37deg);
	}
}
@keyframes moonRise{
100%{
		transform:translateY(-200px);
	}
}

A weź może wrzuć gdzieś działającą wersję. Przekopiowałem to na http://jsfiddle.net ale za bardzo nie działało.
Jeśli oczekujesz od ludzi opinii, to chociaż postaraj się im umożliwić zapoznanie się z tym, co masz do ocenienia. Raczej nikomu nie będzie się chciało tego gdzieś umieszczać i kombinować, dlaczego nie działa.

Po co istnieją elementy: center i card?

Używasz:: .weather-details{display: flex; ale w sumie niewiele z tego wynika, bo "kartka" nie jest responsywna. Jeśli to ma być po prostu tabela z danymi, do dałabym zwykłe <table>, jeśli jest flex, to kombinowałabym, jak elementy mają reagować na zmianę szerokości ekranu.

Elementy z div-a zawierającego krajobraz, też mogłyby mieć wymiary podane procentowo i skalować się zależnie od rozmiarów kontenera, a sam kontener mógłby mieć wtedy width:100%; max-width: 400px; W takim wypadku potrzebowałabyś jeszcze elementu pilnującego proporcji wymiarów kontenera: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp

Różnica w rozmiarach kropel bliższych i dalszych mogłaby być trochę większa. Zauważyłam, że one się trochę różnią rozmiarem, dopiero jak chciałam napisać, że mogłyby się różnić rozmiarem.

A ogóle to całkiem to efektowne :)

Całkiem ładne. Z drugiej strony - czemu na zwykłych divach, a nie na SVG, które lepiej się nadaje do tego typu rzeczy?
Przy tak prostych kształtach może nie ma to aż takiego znaczenia, ale w SVG możesz dość łatwo robić bardzo customowe kształty, jakie powie ci wyobraźnia (gwiazdki? drzewka? bez problemu) . A na divach, żeby coś zrobić złożonego, trzeba uciekać się do jakichś dziwnych sztuczek.