SOURCE

<div class="window">
  <div class="top"></div>
  <div class="glass">
    <div class="sky">
      <div class="cloud"></div>
      <div class="cloud"></div>
      <div class="cloud"></div>
      <div class="cloud"></div>
      <div class="cloud"></div>
      <div class="cloud"></div>
      <div class="nyan-cat"></div>
    </div>
  </div>
</div>

$windowBorder: 72px;
$animationcloud: 2s;
$bodyColor: silver;
$skyColor: #3FA9F5;
$borderColor: #808080;

body {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	background: $bodyColor;
}

.window {
	position: relative;
	padding: 20px;
	border: 4px solid $borderColor;
	border-radius: $windowBorder / 1.5;
	background-color: #D9D9D9;
	box-shadow: 
		inset 0 0 80px rgba(black, 0.2),
		0 0 0 40px whitesmoke,
		0 0 0 44px $borderColor,
		0 20px 40px 40px rgba(black,0.1);
	
	overflow: hidden;
	
	&:before {
		content:"";
		position: absolute;
		top: -10px;
		left: 0;
		width: 100%;
		height: 20px;
		background: black;
		opacity: 0.2;
		filter: blur(10px);
		pointer-events: none;
		z-index:20;
	}
}

.top {
	position: absolute;
	left: 0;
	top: -90%;
	width: 100%;
	height: 100%;
	border-radius: $windowBorder / 1.5;
	background: whitesmoke;
	box-shadow: 
		0 0 0 4px $borderColor,
		0 0 30px rgba(black,0.4);
	
	transition: 0.6s all ease-in-out;
	cursor: pointer;
	z-index:10;
	
	&.closed{
		top: -5%;
	}
	
	&:before {
		content: "";
		display: block;
		width: 40%;
		height: 8px;
		
		position: absolute;
		bottom: 16px;
		left: 50%;
		transform: translateX(-50%);
		
		border-radius: 4px;
		background-color: $borderColor;
	}
	
	&:after {
		content: "";
		display: block;
		width: 16px;
		height: 8px;
		
		position: absolute;
		bottom: 16px;
		left: 50%;
		transform: translateX(-50%);
		
		border-radius: 4px;
		background-image:
			radial-gradient(#5DF254, darken(#5DF254, 30%));
		animation-name: light;
		animation-duration: 1s;
		animation-timing-function: ease;
		animation-iteration-count: infinite;
	}
}

.glass {
	position: relative;
	width: 200px;
	height: 300px;
	border-radius: $windowBorder;
	box-shadow: 0 0 0 4px $borderColor;
	overflow: hidden;
	
	&:after {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-image:
			radial-gradient(circle farthest-corner at 90% 10%, 				rgba(white,0.4) 0%, transparent 20%);
		box-shadow: inset 0 0 60px rgba(black,0.2);
		border-radius: $windowBorder;
	}
}

.sky {
	position: relative;
	background: $skyColor;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.nyan-cat {
	position: absolute;
	
	top: 40%;
	width: 90px;
	height: 60px;
	background-image: url('https://media.tenor.co/images/b0dacd0bb277315b8582d2d0e07d62a8/tenor.gif');
	background-size: contain;
	background-repeat: no-repeat;
	animation-name: leftToRight;
	animation-duration: 5s;
	animation-delay: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	z-index: -10;
}
.cloud {
	position: relative;
	width: 100px;
	height: 40px;
	background-color: white;
	border-radius: 40px;
	animation-name: leftToRight;
	animation-duration: $animationcloud;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	
	&:before, &:after {
		content: " ";
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-color: white;
		position: absolute;
	}
	
	&:before {
		top: -20px;
		left: 20px;
	}
	
	&:after {
		top: -10px;
		left: 50px;
	}
	
	&:nth-child(1){
		animation-duration: $animationcloud * 4;
	}
	
	&:nth-child(2){
		top: 20%;
		animation-delay: 0.2s;
		animation-duration: $animationcloud * 3;
	}
	
	&:nth-child(3){
		top: 40%;
		animation-duration: $animationcloud * 2;
	}
	
	&:nth-child(4){
		top: 60%;
		animation-duration: $animationcloud * 3;
	}
	
	&:nth-child(5){
		top: 20%;
		transform: scale(3);
		animation-duration: $animationcloud * 2;
		animation-delay: 2s;
	}
	
	&:nth-child(6){
		top: 20%;
		transform: scale(2);
		animation-duration: $animationcloud * 2;
	}
	
}


@keyframes leftToRight {
	0%{
		left: -200%;
	}
	
	100%{
		left: 150%;		
	}
}

@keyframes light {
	0% {
		box-shadow: 0 0 0px #5DF254;
	}
	50% {
		box-shadow: 0 0 20px #5DF254;
	}
	80% {
		box-shadow: 0 0 40px rgba(#5DF254,0.0);
	}
}