/* === SCSS COLOUR VARIABLES === */
/* SCSS RESPONSIVE TITLE TYPE @MIXIN */
/* =============================== */
body {
  background-color: #266c8e;
  background-image: url("https://cdn.discordapp.com/attachments/642218853316952084/650061661272539156/Adobe_Post_20191129_1551180.2784247932563215.png");
  background-position: center center;
  background-repeat: repeat, repeat;
  background-size: 100vw;
  font-family: 'Montserrat', Verdana; }

/* === MOBILE-FIRST GRID LAYOUT === */
.calendar-grid {
  display: grid;
  width: 96%;
  max-width: 900px;
  margin: 2% auto;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-gap: 15px;
  grid-template-areas: "title    title     title" "day23    day20     day12" "day2     day14     day4" "day5     day22     day16" "day1     day7      day9" "day10    day11     day18" "day13    day3      day15" "day6     day17     day8" "day19    day24     day21"; }

/* MEDIA QUERY -- DESKTOP LAYOUT */
@media only screen and (min-width: 1201px) {
  body {
    background-image: url("https://cdn.discordapp.com/attachments/642218853316952084/650061661272539156/Adobe_Post_20191129_1551180.2784247932563215.png");
    background-position: center top;
    background-repeat: repeat, repeat;
    background-size: 45vw; }

  .calendar-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas: "title      title     title     day2      day7      day8" "title      title     title     day4      day11     day12" "title      title     title     day19     day9      day13" "day6       day1      day24     day24     day21     day20" "day17      day18     day24     day24     day5      day22" "day3       day23     day16     day14     day10     day15"; } }
/* === INDIVIDUAL GRID ITEMS ===  */
.title {
  grid-area: title;
  text-align: center;
  color: #4CBF4B; }

.title-lines-container {
  background: #ffffff;
  border-radius: 30px 0;
  border: 5px solid #266c8e;
  transform: rotate(2deg);
  margin: 1.5% 0 0 0; }

.title-line1 {
  font-family: 'Oleo Script Swash Caps', Courier;
  font-size: 45px;
  font-size: 4vw;
  margin: 0;
  padding: 10px 15px 0; }
  @media (max-width: 750px) {
    .title-line1 {
      font-size: 30px; } }
  @media (min-width: 1250px) {
    .title-line1 {
      font-size: 50px; } }

.title-line2 {
  font-family: 'BioRhyme', Courier;
  font-size: 35px;
  font-size: 3vw;
  line-height: 1.1em;
  margin: 0;
  padding: 0 15px 15px; }
  @media (max-width: 700px) {
    .title-line2 {
      font-size: 21px; } }
  @media (min-width: 1466.6666666667px) {
    .title-line2 {
      font-size: 44px; } }

.bigger-text {
  font-size: 40px;
  font-size: 3.5vw; }
  @media (max-width: 742.8571428571px) {
    .bigger-text {
      font-size: 26px; } }
  @media (min-width: 1428.5714285714px) {
    .bigger-text {
      font-size: 50px; } }

.title-intro {
  background: #ffffff;
  padding: 20px 25px;
  border: 1px solid #266c8e;
  border-radius: 0 30px;
  line-height: 1.5em;
  transform: rotate(-1.5deg);
  margin: 5% 2% 2%; }

.title-outro {
  background: #ffffff;
  padding: 10px 15px;
  border: 2px solid #266c8e;
  border-radius: 0 20px;
  line-height: 1.1em;
  margin: 2% 1% 1%; }

.day1 {
  grid-area: day1; }
  .day1 .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/1-beachhut.png); }

.day2 {
  grid-area: day2; }
  .day2 .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/2-openhouses.png); }

.day3 {
  grid-area: day3; }
  .day3 .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/3-choir.png); }

.day4 {
  grid-area: day4; }
  .day4 .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/4-seagull.png); }

.day5 {
  grid-area: day5; }
  .day5 .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/5-wine.png); }

.day6 {
  grid-area: day6; }
  .day6 .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/6-guitar.png); }

.day7 {
  grid-area: day7; }
  .day7 .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/7-gifts.png); }

.day8 {
  grid-area: day8; }
  .day8 .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/8-santadash.png); }

.day9 {
  grid-area: day9; }
  .day9 .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/9-pavilion.png); }

.day10 {
  grid-area: day10; }
  .day10 .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/10-camel.png); }

.day11 {
  grid-area: day11; }
  .day11 .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/11-grimmtales.png); }

.day12 {
  grid-area: day12; }
  .day12 .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/12-ghost.png); }

.day13 {
  grid-area: day13; }
  .day13 .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/13-snowman.png); }

.day14 {
  grid-area: day14; }
  .day14 .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/14-xmastree.png); }

.day15 {
  grid-area: day15; }
  .day15 .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/15-snowflake.png); }

.day16 {
  grid-area: day16; }
  .day16 .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/16-fairy.png); }

.day17 {
  grid-area: day17; }
  .day17 .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/17-skates.png); }

.day18 {
  grid-area: day18; }
  .day18 .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/18-bells.png); }

.day19 {
  grid-area: day19; }
  .day19 .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/19-reindeer.png); }

.day20 {
  grid-area: day20; }
  .day20 .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/20-candle.png); }

.day21 {
  grid-area: day21; }
  .day21 .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/21-lantern.png); }

.day22 {
  grid-area: day22; }
  .day22 .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/22-glitterball.png); }

.day23 {
  grid-area: day23; }
  .day23 .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/23-viking.png); }

.day24 {
  grid-area: day24; }
  .day24 .back {
    background: url(https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/calendar-pngs/24-dove.png); }

/* ===  DOOR STYLES ===  */
.calendar-grid input {
  display: none; }

.door {
  width: 100%;
  height: 100%;
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: all 300ms;
  border: 1.5px dashed #344f63;
  border-radius: 10px;
  cursor: pointer;
  min-height: 110px;
  font-family: 'BioRhyme', serif;
  font-size: 58px;
  color: #ffffff; }
  .door.no-hover {
    border-color: #344f63; }
  .door:not(.no-hover):hover {
    border: 1.5px dashed #ffffff; }

.door div {
  position: absolute;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center; }

.door .front {
  background: rgba(29, 101, 135, 0.3);
  text-shadow: 2px 2px 0 #344f63, 2px -2px 0 #344f63, -2px 2px 0 #344f63, -2px -2px 0 #344f63, 2px 0px 0 #344f63, 0px 2px 0 #344f63, -2px 0px 0 #344f63, 0px -2px 0 #344f63; }

.door .back {
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #135270;
  transform: rotateY(180deg); }

.open {
  transform: rotateY(180deg); }

footer {
  height: 50px;
  padding: 15px 15px 10px;
  text-align: right; }
  footer p {
    margin-top: 25px;
    color: #222222; }

/* ===  MODAL (BACKGROUND) ===  */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  /* Enable scroll if needed */
  background-color: black;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */ }

/* === MODAL CONTENT + BOX ===  */
.modalContent {
  background-color: #ffffff;
  margin: 15% auto;
  padding: 20px 20px 30px;
  border: 4px solid #fe52ff;
  border-radius: 6px;
  width: 76%;
  width: 90%;
  max-width: 800px;
  min-height: 200px;
  letter-spacing: 0.5px;
  line-height: 1.4em; }
  .modalContent p {
    font-size: 0.9em; }

.dailyTitle {
  font-family: 'BioRhyme', Courier;
  color: #135270; }

.dailyDate {
  color: #f50cf7; }

.highlight {
  font-weight: bold;
  color: #f50cf7; }

.dailyLink {
  background-color: #135270;
  padding: 5px 8px;
  border-radius: 6px;
  text-decoration: none;
  color: #ffffff;
  font-weight: bold;
  line-height: 2.3em; }
  .dailyLink:hover {
    background-color: #2883af; }

/* ===  MODAL CLOSE BUTTON (X) ===  */
.close {
  color: #aaa;
  float: right;
  font-size: 48px;
  line-height: 26px;
  font-weight: bold; }
  .close:hover, .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer; }

@media only screen and (max-width: 519px) {
  .title-line1 {
    font-size: 38px;
    font-size: 10vw; } }
  @media only screen and (max-width: 519px) and (max-width: 340px) {
    .title-line1 {
      font-size: 34px; } }
  @media only screen and (max-width: 519px) and (min-width: 520px) {
    .title-line1 {
      font-size: 52px; } }

@media only screen and (max-width: 519px) {
  .title-line2 {
    font-size: 35px;
    font-size: 8vw; } }
  @media only screen and (max-width: 519px) and (max-width: 337.5px) {
    .title-line2 {
      font-size: 27px; } }
  @media only screen and (max-width: 519px) and (min-width: 600px) {
    .title-line2 {
      font-size: 48px; } }

@media only screen and (max-width: 519px) {
  .bigger-text {
    font-size: 40px;
    font-size: 10vw; } }
  @media only screen and (max-width: 519px) and (max-width: 320px) {
    .bigger-text {
      font-size: 32px; } }
  @media only screen and (max-width: 519px) and (min-width: 520px) {
    .bigger-text {
      font-size: 52px; } }

@media only screen and (max-width: 519px) {
  .title-intro {
    padding: 18px 18px; }

  .title-outro {
    padding: 18px 18px; } }
@media only screen and (max-width: 690px) {
  .door {
    font-size: 48px; } }

/*# sourceMappingURL=main.css.map */