html,body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  background-image:radial-gradient(#94ddff,blue);
  overflow:hidden;
}

.ice-line{
  background:white;
  width:100px;
  height:5px;
  position:absolute;
  bottom:10px;
  left:20px;
}

.ice-lake{
  background:linear-gradient(lightcyan,lightblue);
  width:100%;
  height:250px;
  bottom:0;
  position:absolute;
  box-shadow:0px 0px 20px grey;
}

.mountain-range{
  position:absolute;
	border-bottom: 600px solid beige;
  border-left: 400px solid transparent;
	border-right: 400px solid transparent;
  top:0;
  left:0;
}

.mountain-range:before{
  content:'';
  position:absolute;
	border-bottom: 100px solid white;
  border-left: 70px solid transparent;
	border-right: 70px solid transparent;
  top:0;
  left:-70px;
}

.mountain-range:nth-child(1){
  opacity:0;
  animation:move-left 14s linear;
}

.mountain-range:nth-child(2){
  left:200px;
  animation:move-left 12s linear;
  opacity:0;
  top:10px;
}

.mountain-range:nth-child(3){
  left:500px;
  animation:move-left 10s linear;
  opacity:0;
}

.mountain-range:nth-child(4){
  left:-50%;
  animation:move-left 20s 2s infinite linear;
  top:20px;
}

.mountain-range:nth-child(5){
  left:-100%;
  animation:move-left 20s 4s infinite linear;
}

.mountain-range:nth-child(6){
  left:-150%;
  animation:move-left 20s 6s infinite linear;
}

.mountain-range:nth-child(7){
  left:-170%;
  animation:move-left 20s 8s infinite linear;
}



#ice-cottage{
  position:fixed;
  width:100vw;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
}


#penguin{
  position:relative;
  /*animation:body-swerve 3s linear infinite alternate;*/
  /*animation:rightfoot 0.4s linear infinite alternate;*/
  box-sizing: content-box;
  background:black;
  height:280px;
  width:200px;
  border: none;
  border-radius: 50% / 60% 60% 20% 20%;
  text-overflow: clip;
  z-index:2;
  box-shadow: 0px 5px 20px rgba(0,0,0,0.5);
}

#ice{
  border-radius:50%;
  position:relative;
  top:-40px;
  width:300px;
  height:100px;
  background:#d6faff;
  z-index:1;
  box-shadow: 0px 5px 20px darkgrey;
}


#eyes::before{
  content:'';
  animation:blink 5s 4s linear infinite;
  position:absolute;
  width:30px;
  height:30px;
  background:black;
  border-radius:50%;
  top:80px;
  left:120px;
}

#eyes::after{
  content:'';
  animation:blink 5s 4s linear infinite;
  position:absolute;
  width:30px;
  height:30px;
  background:black;
  border-radius:50%;
  top:80px;
  right:120px;
}

#beak{
  position:absolute;
  width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 30px solid orange;
  top:105px;
  left:80px;
  border-radius:50%;
}

#wings::before{
  content:'';
  position:absolute;
  background:black;
  border-radius:50%;
  top:100px;
  right:180px;
  transform: rotate(10deg); 
  width:40px;
  height:100px;
}

#wings::after{
  content:'';
  animation:wave 6s infinite;
  transform-origin:50%;
  position:absolute;
  background:black;
  border-radius:50%;
  top:100px;
  left:180px;
  transform: rotate(-10deg); 
  width:40px;
  height:100px;
  z-index:-1;
}

#belly{
  margin-left:20px;
  margin-top:20px;
  /*animation:body-swerve 3s linear alternate infinite;*/
  height:80%;
  width:80%;
  background:radial-gradient(white,whitesmoke);
  border-radius:20%;
   border: none;
  border-radius: 50% / 60% 60% 40% 40%;
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  color: rgba(0,0,0,1);
  text-overflow: clip;
  z-index:5;
}

#feet::before{
  content:'';
 /* animation:rightfoot 0.3s linear infinite alternate-reverse;*/
  position:absolute;
  border-radius:50%;
  width:40%;
  height:50px;
  background:linear-gradient(orange,darkorange);
  box-shadow: 0px 5px 20px rgba(0,0,0,0.5);
}

#feet::after{
  content:'';
 /* animation:rightfoot 0.2s linear infinite alternate;*/
  position:absolute;
  border-radius:50%;
  width:40%;
  height:50px;
  left:120px;
  background:linear-gradient(orange,darkorange);
    box-shadow: 0px 5px 20px rgba(0,0,0,0.5);
}



@keyframes body-swerve{
  0%{
    /*transform: translateY(0);*/ 
   
  }25%{
    /*transform: translateY(10px);*/
   border-radius: 50% / 40% 90% 20% 20%;
  
  }50%{
    /*transform: translateY(10px);*/
   border-radius: 50% / 40% 90% 20% 20%;
  
  }75%{
    /*transform: translateY(10px);*/
   border-radius: 50% / 60% 60% 20% 20%;
    
  }100%{
    /*transform: translateY(10px);*/
   border-radius: 50% / 60% 60% 20% 20%;
  }
}

@keyframes rightfoot{
  0%{
    transform: translateY(0);
  }100%{
    transform: translateY(10px);
  }
}

@keyframes wave{
  0%{
    transform:translateX(0px);
  }10%{
    transform: translateX(0px)    rotate(-160deg);     
  }15%{
    transform:translateY(-20px)  rotate(-160deg);  
  }30%{
    transform: translateY(-20px) rotate(-160deg);
  }32%{
    transform: translateY(-20px)  rotate(-140deg);
  }34%{
    transform: translateY(-20px)  rotate(-160deg);
  }36%{
    transform: translateY(-20px)  rotate(-140deg);
  }38%{
    transform: translateY(-20px)  rotate(-160deg);
  }40%{
    transform: translateY(-20px)  rotate(-140deg);
  }50%{
    transform: rotate(-20deg);
  }80%{
    transform: rotate(-20deg);
  
  }100%{
    transform: rotate(-10deg);
  }
}

@keyframes move-left{
  0%{
    opacity:1;
  }
  
  100%{
    left: 100%;
    opacity:1;
  }
}



@keyframes blink {
  0%{ 
    height:30px;
  }3% {
    height:0px;
    transform:translateY(12px); 
  }6% { 
   height:30px; 
    transform:translateY(0px); 
  }100%{
    height:30px;    
  }
}


#rob-icon{
  position:absolute;
  width:50px;
  height:50px;
  background:radial-gradient(#109be9,#155dca);
  bottom:0;
  right:0;
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  color:white;
  font-size:30px;
  text-decoration:none;
  margin:5px;
  font-family:cursive;
  box-shadow:2px 2px 2px grey;
}

#gabby-icon:hover{
  background:#0c83bb;
  transition:background 1s;

}