@import url("/font/gotham-narrow/gotham-narrow.css");

body {
  background-position: center top;
  background-size: 300% auto;
  background: url('/img/bg.svg') no-repeat top;
  font-family: "GothamNarrow-Medium", sans-serif;
  margin: 0;
  padding: 0;
}

@media only screen and (min-width: 400px) { body {background-size: 200% auto;} }
@media only screen and (min-width: 1000px) { body {background-size: 100% auto;} }

.container {
  margin: 0 auto;
  max-width: 1024px;
  padding: 2em;
}


a.news {
  color: #fff;
}

.app-header {padding-top: 1.5em;}

h1 img {width: 100%;}
.app-footer img {width: 300px;}

.intro {
  color: #fff;
  font-family: "GothamNarrow-Book", sans-serif;
  line-height: 1.4;
  margin: 0 auto;
  max-width: 600px;
  padding: 1em;
  text-align: center;
}

.calendar {
  background: #ebebeb;
  border: 1px solid #d0d0d0;
  counter-reset: day-counter 12;
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  margin: 0 0 2em 0;
  padding:1em;
}

.calendar li:nth-child(20) { counter-reset: day-counter;}
.calendar li { counter-increment: day-counter;}

.calendar li::before {
  color: #fff;
  content: counter(day-counter);
  float: left;
  font-family: "GothamNarrow-Medium", sans-serif;
  left: 1em;
  position: relative;
  top: 1em;
  transition: color 0.8s ease;
  z-index: 999;
}

.calendar li:hover::before,
.calendar li:focus-within::before {
  color: #004f39;
}

.calendar,
.flip-side {
  border-radius: 10px;
}

.day {
  border: 10px solid #ebebeb;
  box-sizing: border-box;
  min-height: 200px;
  min-width: 100%;
}

@media only screen and (min-width: 400px) { .day {min-width: 50%;} }
@media only screen and (min-width: 725px) { .day {min-width: 25%;} }
@media only screen and (min-width: 800px) { .day {min-width: 20%;} }

.day img {
  display: block;
  margin: 0 auto;
  max-height: 80%;
  max-width: 80%;
}

.flip {
  -ms-perspective: 800px;
  -webkit-perspective: 800px;
  cursor: help;
  display: block;
  height: 100%;
  perspective: 800px;
  position: relative;
  width: 100%;
}

.flip-inner {
  -webkit-transform-style: preserve-3d;
  height: 100%;
  position: absolute;
  text-align: center;
  transform-style: preserve-3d;
  transition: -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  width: 100%;
}

.flip:focus-within .flip-inner {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flip:hover .flip-inner {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flip-side {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  height: 100%;
  position: absolute;
  width: 100%;
}

.flip-front {
  background: linear-gradient(#1a795e, #004f39);
}

.day-cover {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  position: relative;
  width: 100%;
}

.flip-back {
  align-items: center;
  background: linear-gradient(#fafafa, #ffffff);
  display: flex;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.day-back {
  color: #004f39;
  display: block;
  outline: none;
  padding: 1em;
  text-align: center;
  text-decoration: none;
  width: 100%;
}

.in2019 {
  display: block;
  font-size: .9em;
  text-transform: uppercase;
}

.d-20191213 .day-back,
.d-20191214 .day-back,
.d-20191221 .day-back,
.d-20191223 .day-back,
.d-20191225 .day-back,
.d-20191226 .day-back,
.d-20200101 .day-back
{
  font-family: "GothamNarrow-Bold", sans-serif;
  font-size: 1.2em;
  text-transform: uppercase;
}

.app-footer { padding: 1em; }
.app-footer img { max-width: 90%; }