html, body {
    margin: 0;
    padding: 0;
}

:root {
  --color: #99bbff;
  --color2: #000;
  --color3: #ffa500;
}

body {
  --gold: #FAC57D;
  --snow: #F0F4F7;
  justify-content: center;
  align-items:flex-end;
  padding:2em;
  height: 100vh;
  background-color: var(--gold);
  background-image:url("https://images.unsplash.com/photo-1518983835933-984f33c641e0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1167&q=80");
  background-repeat: no-repeat;
  /* background-position-y: 800%; */
  background-size:cover;
}

body.summer{
  background-image:url("https://images.unsplash.com/photo-1519046904884-53103b34b206?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80");
}

.controls {
  order: -1;
  border:solid grey;
  padding: 10px;
  display:flex;
  flex-direction: column;
  background: var(--snow);
  border-radius:10px;
}

.snowman.melted {
  background-image:url("https://static.wixstatic.com/media/e647ea_e77de9a007774657b2d1118ac684caea~mv2.gif");
}

input,
.head,
.controls,
.snowman-body,
.button {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;  
}

/* .snowman {
  border:solid red;
  padding:0;
  margin:0;
} */

body,
.snowman-body,
.eyes {
    display: flex;
}

input {
  margin: 0.25em 0; 
  border: none;
  cursor: pointer;
}

input[type="checkbox"] {
  margin:auto 1.2em;
}

label {
  display:flex;
  align-items: center;
  margin:.25em 0;
}

label > input {
  margin-right:.5em;
}

button {
  padding:.5em 0;
  border-radius:5px;
  margin:.25em;
}

.head {
  margin: 0 auto;
  background: var(--snow);
  height: 10em;
  width: 10em;
  border-radius: 50%;
  position:relative;
  z-index:1;
}

.head.melting,
#hat.melting,
.arm.melting{
  animation: Melt 2s linear;
}

.snowman-body.melting{
  animation: Skew 2s linear;
}

.head.melting .eye{
  animation: Melt2 2s linear;
}

.head.melting .mouth{
  animation: Spin 2s linear;
}

.head.melted,
.arm.melted{
  transform:rotate(95deg) scale(1.2, 1); 
  top:220px
}

#hat.melted{
  transform:rotate(105deg) scale(1.2, 1); 
  top:450px
}
.snowman-body.melted{
  transform:scale(1.2, 1);
}
.head.melted .eye{
  height:3em;
}
.head.melted .mouth{
  animation: Spin 3s linear;
  transform:rotateX(-45deg); 
  height:3em; 
  left:250px;
}

@keyframes Melt {
  0%{transform:rotate(0) scale(1.2, 1)}
  40%{transform:rotate(0) scale(1.2, 1); top:0px}
  100%{transform:rotate(95deg) scale(1.2, 1); top:220px}
}

@keyframes Melt2 {
  0%{height:1em}
  40%{height:3em}
  100%{height:3em}
}

@keyframes Spin {
  from{transform:rotateX(0deg)}
  to{transform:rotateX(-45deg); height:3em; left:250px}
}

@keyframes Skew{
    0%{transform:scale(1, 1)}
  40%{transform:scale(1.2, 1)}
  100%{transform:scale(1.2, 1)}
}

.head.summer {
  background: rgb(244,68,68);
  background: radial-gradient(circle, rgba(244,68,68,1) 0%, rgba(245,216,219,1) 100%);
  background-size: 135%;
  background-position: center;
}


.snowman-body {
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: relative;
  margin-top: -18px;
  background: var(--snow);
  height: 14em;
  width: 14em;
  border-radius: 50%;
  background-size: 135%;
  background-position: center;
}

.snowman-body.summer {
  background-image: url("/imgs/mankini.png");
  background: rgb(244,68,68);
  background: url("/imgs/mankini.png"), radial-gradient(circle, rgba(244,68,68,1) 0%, rgba(245,216,219,1) 100%);
  background-size: 135%;
  background-position: center;
}

.button {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  background-color: var(--color2);
}

.button.summer {
  display:none;
}


.eyes {
  height:50px;
  background-size: 80%;
  background-repeat: no-repeat;
  background-position:top; 
}

.eyes.summer {
  background-image:url("imgs/sunnies.png");
}

.eyes.summer .eye {
  display:none;
}


.eye {
  border-top-left-radius: 75px;
  border-top-right-radius: 75px;
  height: 1em;
  width: 1em;
  background: var(--color);
  margin: 2.2em 2em 0;
}

.pupil {
  border-top-left-radius: 75px;
  border-top-right-radius: 75px;
  height: 0.5em;
  width: 0.5em;
  background: black;
  margin: 0.5em 0.25em;
}


.noseCont {
  width:50%;
  height:20px;
  margin:1.5em 0 0 3em;
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: right;
  
}
.nose {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 40px;
  border-color: transparent transparent transparent var(--color3);
  margin:0 auto;  
}

.mouth {
  height: 0.25em;
  width: 2em;
  background: darkgray;
  border-radius: 50%;
  margin: 2em 4em;
}

.body-container {
  display:flex;
}

.arm {
  height:100px;
  width:100px;
  position:relative;
  bottom:40px;
  background-size: 100%;
  z-index:2;
}

.arm.dressed {
  background-image:url("/imgs/arm.png");
}

#right-arm {
  right:10%;
  transform: scaleX(-1);
}

#left-arm {
  left:10%;

}

#hat {
  width:120px;
  height:85px;
  background-size: 100%;
  background-repeat: no-repeat;
  position:relative;
  z-index:2;
  margin:0 auto;
  top:25px;  
}
#hat.dressed {
  background-image:url("/imgs/hat.png");
}