body {
    margin: 0;
}

#calendar-container {
    z-index: 100;
}

.dummy-sheep {
    background-image: url("../images/sheep_1.png");
    height: 120px;
    width: 120px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
}

.bflogo {
    background-image: url("../images/bf_logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.calendar {
    width: 100vw;
    height: 100vh;
    background-image: url("../images/winterbg2.png");
    background-repeat: repeat;
}

.frontside {
    font-size: 3rem;
    /*margin-top: 20px;*/
    text-shadow: 0 0 10px #000000, 0 0 5px #000000;
    color: lawngreen;
}

.backside  {
    width: 100%;
    height: 100%;
    display: none;
    background-size: contain;
}

.big-container {
    display: flex;
    justify-content: center;
    height: 100%;
    align-items: center;
}

.door.opened {
    background-image: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: rgba(230,230,230, 0.5);

}

.sheep_1 {
    background-image: url("../images/sheep_1.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.sheep_2 {
    background-image: url("../images/sheep_2.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.door {
    height: 120px;
    width: 120px;
    float: left;
    margin-bottom: 20px;
    margin-right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.door:first-child {
    margin-left: 15px;
}

.door:nth-child(8n+1) {
    margin-left: 15px;
    clear:both;
}

#calendar-container::after {
    content: "";
    display: block;
    clear: both;
}

footer {
    position: absolute;
    bottom: 0;
    right: 0;
    margin-right: 0;
    background-color: rgba(230,230,230, 0.8);
    padding: 10px 15px;
}

footer a {
    color: #000000;

}

.door-container {
}

.icon-unioncoins {
    background-image: url("../images/icons/unionpoints.png");
    background-repeat: no-repeat;
    background-position: center;
}

.icon-diamonds {
    background-image: url("../images/icons/diamonds.png");
    background-repeat: no-repeat;
    background-position: center;
}

.icon-wintersaplings {
    background-image: url("../images/icons/wintersaplings.png");
    background-repeat: no-repeat;
    background-position: center;
}

.icon-seaweedhumusxl {
    background-image: url("../images/icons/seaweedhumusxl.png");
    background-repeat: no-repeat;
    background-position: center;
}

.icon-seaweedfertxl {
    background-image: url("../images/icons/seaweedfertxl.png");
    background-repeat: no-repeat;
    background-position: center;
}

.icon-organiccoins {
    background-image: url("../images/icons/organiccoins.png");
    background-repeat: no-repeat;
    background-position: center;
}

.icon-seaweedfeedxl {
    background-image: url("../images/icons/seaweedfeedxl.png");
    background-repeat: no-repeat;
    background-position: center;
}

.icon-goldenapple {
    background-image: url("../images/icons/goldenapple.png");
    background-repeat: no-repeat;
    background-position: center;
}

.icon-seaweedfeed {
    background-image: url("../images/icons/seaweedfeed.png");
    background-repeat: no-repeat;
    background-position: center;
}

.icon-horseshoe {
    background-image: url("../images/icons/horseshoe.png");
    background-repeat: no-repeat;
    background-position: center;
}

.icon-goldenhorseshoe {
    background-image: url("../images/icons/goldenhorseshoe.png");
    background-repeat: no-repeat;
    background-position: center;
}

.icon-ccp {
    background-image: url("../images/icons/ccp.png");
    background-repeat: no-repeat;
    background-position: center;
}

.icon-skin {
    background-image: url("../images/icons/skin.png");
    background-repeat: no-repeat;
    background-position: center;
}

.icon-seaweedfert {
    background-image: url("../images/icons/seaweedfert.png");
    background-repeat: no-repeat;
    background-position: center;
}

.icon-seaweedhumus {
    background-image: url("../images/icons/seaweedhumus.png");
    background-repeat: no-repeat;
    background-position: center;
}

.icon-wofchip {
    background-image: url("../images/icons/wofchip.png");
    background-repeat: no-repeat;
    background-position: center;
}

.icon-gold {
    background-image: url("../images/icons/gold.png");
    background-repeat: no-repeat;
    background-position: center;
}

.icon-deco {
    background-image: url("../images/icons/deco.png");
    background-repeat: no-repeat;
    background-position: center;
}

.icon-balloonchip {
    background-image: url("../images/icons/balloonchip.png");
    background-repeat: no-repeat;
    background-position: center;
}

.icon-buildcoin {
    background-image: url("../images/icons/buildcoin.png");
    background-repeat: no-repeat;
    background-position: center;
}

.icon-mysterybox {
    background-image: url("../images/icons/mysterybox.png");
    background-repeat: no-repeat;
    background-position: center;
}

.icon-silverdiamondcrate {
    background-image: url("../images/icons/silverdiamondcrate.png");
    background-repeat: no-repeat;
    background-position: center;
}

.icon-researchcoinstables {
    background-image: url("../images/icons/organiccoinsstables.png");
    background-repeat: no-repeat;
    background-position: center;
}

.icon-summerapples {
    background-image: url("../images/icons/summerapples.png");
    background-repeat: no-repeat;
    background-position: center;
}

.icon-summersaplings {
    background-image: url("../images/icons/summersaplings.png");
    background-repeat: no-repeat;
    background-position: center;
}

.icon-winterapples {
    background-image: url("../images/icons/winterapple.png");
    background-repeat: no-repeat;
    background-position: center;
}
.door.today {
    /* Start the shake animation and make the animation last for 0.5 seconds */
     animation: shake 2s; 
  
    /* When the animation is finished, start again */
    animation-iteration-count: infinite;
  }
  
  @keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
  }
  
  .snow {
    position: absolute;
    width: 100%;
    height: 100vh;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 50' style='enable-background:new 0 0 50 50%3B' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st1%7Bopacity:0.3%3Bfill:%23FFFFFF%3B%7D.st3%7Bopacity:0.1%3Bfill:%23FFFFFF%3B%7D%3C/style%3E%3Ccircle class='st1' cx='5' cy='8' r='1'/%3E%3Ccircle class='st1' cx='38' cy='3' r='1'/%3E%3Ccircle class='st1' cx='12' cy='4' r='1'/%3E%3Ccircle class='st1' cx='16' cy='16' r='1'/%3E%3Ccircle class='st1' cx='47' cy='46' r='1'/%3E%3Ccircle class='st1' cx='32' cy='10' r='1'/%3E%3Ccircle class='st1' cx='3' cy='46' r='1'/%3E%3Ccircle class='st1' cx='45' cy='13' r='1'/%3E%3Ccircle class='st1' cx='10' cy='28' r='1'/%3E%3Ccircle class='st1' cx='22' cy='35' r='1'/%3E%3Ccircle class='st1' cx='3' cy='21' r='1'/%3E%3Ccircle class='st1' cx='26' cy='20' r='1'/%3E%3Ccircle class='st1' cx='30' cy='45' r='1'/%3E%3Ccircle class='st1' cx='15' cy='45' r='1'/%3E%3Ccircle class='st1' cx='34' cy='36' r='1'/%3E%3Ccircle class='st1' cx='41' cy='32' r='1'/%3E%3C/svg%3E");
    background-position: 0px 0px;
    animation: animatedBackground 10s linear infinite;
  }
  
  .snow div {
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 50' style='enable-background:new 0 0 50 50%3B' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st1%7Bopacity:0.7%3Bfill:%23FFFFFF%3B%7D.st3%7Bopacity:0.1%3Bfill:%23FFFFFF%3B%7D%3C/style%3E%3Ccircle class='st3' cx='4' cy='14' r='1'/%3E%3Ccircle class='st3' cx='43' cy='3' r='1'/%3E%3Ccircle class='st3' cx='31' cy='30' r='2'/%3E%3Ccircle class='st3' cx='19' cy='23' r='1'/%3E%3Ccircle class='st3' cx='37' cy='22' r='1'/%3E%3Ccircle class='st3' cx='43' cy='16' r='1'/%3E%3Ccircle class='st3' cx='8' cy='45' r='1'/%3E%3Ccircle class='st3' cx='29' cy='39' r='1'/%3E%3Ccircle class='st3' cx='13' cy='37' r='1'/%3E%3Ccircle class='st3' cx='47' cy='32' r='1'/%3E%3Ccircle class='st3' cx='15' cy='4' r='2'/%3E%3Ccircle class='st3' cx='9' cy='27' r='1'/%3E%3Ccircle class='st3' cx='30' cy='9' r='1'/%3E%3Ccircle class='st3' cx='25' cy='15' r='1'/%3E%3Ccircle class='st3' cx='21' cy='45' r='2'/%3E%3Ccircle class='st3' cx='42' cy='45' r='1'/%3E%3C/svg%3E");
    background-position: 0px 0px;
    animation: animatedBackground 15s linear infinite;
  }

  .mirrored {
    /* flip background vertically */
    -webkit-transform:scaleX(-1);
    -moz-transform:scaleX(-1);
    -ms-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    }
        
        /* undo the vertical flip for all child elements */
    .mirrored * {
    -webkit-transform:scaleX(-1);
    -moz-transform:scaleX(-1);
    -ms-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    }
  
  @keyframes animatedBackground {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 0px 300px;
    }
  }

  .bounce2 {
    animation: bounce2 2s ease 1;
  }
  @keyframes bounce2 {
      0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
      40% {transform: translateY(-30px);}
      60% {transform: translateY(-15px);}
  }

  .bounce1 {
    animation: bounce 2s ease 1;
  }
  @keyframes bounce {
      70% { transform:translateY(0%); }
      80% { transform:translateY(-15%); }
      90% { transform:translateY(0%); }
      95% { transform:translateY(-7%); }
      97% { transform:translateY(0%); }
      99% { transform:translateY(-3%); }
      100% { transform:translateY(0); }
  }