/****************************
  0 = GENERAL
  1 = BACKGROUND  
  2 = CHARACTER
  3 = TEXT
  4 = RESPONSIVE

*****************************/



/****************************
  0 = GENERAL
*****************************/
@import url('https://fonts.googleapis.com/css?family=BioRhyme');

html {
  height: 100%;
}
body {
  height: 100%;
  margin:0px;
  background: linear-gradient(0deg, #415C94, #00002A);
}

/****************************
  1 = BACKGROUND
*****************************/
.logo{
  position:absolute;
  top: 60px; left: 0; right: 0;
  margin: auto;
}


canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  height:100%;
}

.floor{
  width:100%;
  height:20%;
  background:#fff;
  position:absolute;
  bottom:0px;
  margin:auto;
}

#background{
  position:absolute;
  bottom:0px;
  margin:auto;
}

#trees{
  position:absolute;
  bottom:250px;
  left:50%; 
  margin-left:-354px;
}

#house1{
  position:absolute;
  bottom:250px;
  left:29%;
}

#house2{
  position:absolute;
  bottom:250px;
  right:30%;
}

#snowman1{
  position:absolute;
  bottom:180px;
  left:32%;
}

#snowman1-scarf{
  animation: scarf 3s infinite alternate;
}

@keyframes scarf {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-2deg);
  }
}

#snowman2{
  position:absolute;
  bottom:200px;
  right:34%;
}

#snowman2-arm-left, #snowman2-arm-right, #snowman1-arm-right, #snowman1-arm-left, #ears{
  animation: snowmanarm 0.5s infinite alternate;
}

@keyframes snowmanarm {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(1px);
  }
}

#snowman3{
  position:absolute;
  bottom:150px;
  right:32%;
}

#snow {
  background: none;
  font-family: Androgyne;
  background-image: url('../img/s1.png'), url('../img/s2.png'), url('../img/s3.png');
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index:1;
  -webkit-animation: snow 35s linear infinite;
  -moz-animation: snow 35s linear infinite;
  -ms-animation: snow 35s linear infinite;
  animation: snow 35s linear infinite;
  min-height: 300px;
  max-height: 620px;
}

@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
} 

/****************************
  2 = CHARACTER
*****************************/
#character {
  position:absolute;
  left:50%;
  margin-left:-104px;
  bottom:10%;
}

#head {
  animation: head 3s infinite alternate;
}

@keyframes head {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(5px);
  }
}

#arm-right {
  animation: arm 1s infinite alternate;
}

@keyframes arm {
  0% {
    transform: rotate(2deg);
  }
  100% {
    transform: rotate(-1deg);
  }
}

/****************************
  3 = TEXT
*****************************/

.title{
  position: relative;
  /* width:200px; */
  width:400px;
  text-align: center;
  top:5%;
  margin:0 auto;
  padding:20px;
  background:#fff;
  border-radius:5px;
  border-bottom:3px solid #ccc;
}

.title h1{
  font-family: 'BioRhyme', sans-serif;
  font-size:1.5em;
  color:#502E1C;
  text-transform:uppercase;
  margin:0px;
}

.title p {
  font-family: 'BioRhyme', sans-serif;
  font-size:0.9em;
  color:#222;
}

.ornament1{
  background-image:url('../img/ornament1.svg') no-repeat;
}

.ornament2{
  background-image:url('../img/ornament2.svg') no-repeat;
}

/****************************
  4 = RESPONSIVE
*****************************/
@media (max-width: 960px) {
  .floor{height:30%}
  #background{height:70%}
  #trees{display:none;}
  #house1{left:20%;}
  #house2{right:20%;}
  #snowman1{left:22%;}
  #snowman2{right:24%;}
  #snowman3{right:22%;}
}

@media (max-width: 480px) {
  .floor{height:35%}
  #house1{left:10%;}
  #house2{right:10%;}
  #snowman1{left:12%;}
  #snowman2{right:14%;}
  #snowman3{right:12%;} 
}