/* === SCSS COLOUR VARIABLES === */
/* SCSS RESPONSIVE TITLE TYPE @MIXIN */
/* =============================== */
body {
  background-color: #266c8e;
  background-image: url("https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/brighton-images/snow.png");
  background-position: center center;
  background-repeat: repeat, repeat;
  background-size: 120vw;
  font-family: "Montserrat", Verdana;
}

/* === MOBILE-FIRST GRID LAYOUT === */
.calendar-grid {
  width:70%;
  margin:1% auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  grid-gap: 10px;
  min-width:500px;
}

.calendar-grid::before {
  content: '';
  width: 0;
  padding-bottom: 100%;
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}

.calendar-grid > *:first-child {
    grid-row: 1 / 3;
    grid-column: 1 / 3;
    height: auto;
    background-color: white;
}

.day6 {
grid-row: 4/6;
grid-column: 2/4;
}

.day17 {
grid-row: 6/8;
grid-column: 1/3;
}

.day11 {
grid-row: 10/12;
grid-column: 2/4;
}   

@media only screen and (min-width: 800px) {
  .calendar-grid {
    grid-template-columns: repeat(5, 1fr);    
  }
  
.day6 {
grid-row: 1/3;
grid-column: 4/6;
}

.day17 {
grid-row: 6/8;
grid-column: 2/4;
}

.day11 {
grid-row: 3/5;
grid-column: 1/3;
} 
}

/* MEDIA QUERY -- DESKTOP LAYOUT */
@media only screen and (min-width: 1000px) {
  body {
    background-image:url("https://raw.githubusercontent.com/AnwenW/advent-calendar/master/images/brighton-images/snow.png");
    background-position: center top;
    background-repeat: no-repeat, repeat;
    background-size: 125vw;
  }

  .calendar-grid {
    grid-template-columns: repeat(6, 1fr);    
  }
  
  .day6 {
    grid-row: 1/3;
    grid-column: 5/7;
  }
  
    .day17 {
    grid-row: 5/7;
    grid-column: 5/7;
    }

    .day11 {
    grid-row: 3/5;
    grid-column: 2/4;
    }    
}
/* === INDIVIDUAL GRID ITEMS ===  */
.title {
  color: #0a5656;
  text-align:center;
}

.title-lines-container {
  background: #ffffff;
}

.title-line1 {
  font-family: "Oleo Script Swash Caps", Courier;
  font-size: 45px;
  margin: 0;
  padding:15px;
}
@media (min-width: 1500px) {
  .title-line1 {
    font-size: 60px;
  }
}

.title-line2 {
  font-family: "BioRhyme", Courier;
 font-size: min(4vw,5vw);
  line-height: 1.1em;
  margin: 0;
  padding:15px;
}
@media (min-width: 1466.6666666667px) {
  .title-line2 {
    font-size: 44px;
  }
}

.bigger-text {
  font-size: 40px;
}

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

.day1 {
}
.day1 .front {
  background: url(./imgs/1-front.jpg);
}  
.day1 .back {
  background: url(./imgs/1-back.jpg);
}

.day2 {
}
.day2 .front {
  background: url(./imgs/2-front.jpg);
}  
.day2 .back {
  background: url(./imgs/2-back.jpg);
}

.day3 {
}
.day3 .front {
  background: url(./imgs/3-front.jpg);
}  
.day3 .back {
  background: url(./imgs/3-back.jpg);
}

.day4 {
}
.day4 .front {
  background: url(./imgs/4-front.jpg);
}  
.day4 .back {
  background: url(./imgs/4-back.jpg);
}

.day5 {
}
.day5 .front {
  background: url(./imgs/5-front.jpg);
}  
.day5 .back {
  background: url(./imgs/5-back.jpg);
}

.day6 {
}
.day6 .front {
  background: url(./imgs/6-front.jpg);
}  
.day6 .back {
  background: url(./imgs/6-back.jpg);
}
.day7 {
}
.day7 .front {
  background: url(./imgs/7-front.jpg);
}  
.day7 .back {
  background: url(./imgs/7-back.jpg);
}


.day8 .front {
  background: url(./imgs/8-front.jpg);
}  
.day8 .back {
  background: url(./imgs/8-back.jpg);
}

.day9 {
}
.day9 .front {
  background: url(./imgs/9-front.jpg);
}  
.day9 .back {
  background: url(./imgs/9-back.jpg);
}

.day10 {
}
.day10 .front {
  background: url(./imgs/10-front.jpg);
}  
.day10 .back {
  background: url(./imgs/10-back.jpg);
}

.day11 .front {
  background: url(./imgs/11-front.jpg);
}  
.day11 .back {
  background: url(./imgs/11-back.jpg);
}

.day12 {
}
.day12 .front {
  background: url(./imgs/12-front.jpg);
}  
.day12 .back {
  background: url(./imgs/12-back.jpg);
}

.day13 {
}
.day13 .front {
  background: url(./imgs/13-front.jpg);
}  
.day13 .back {
  background: url(./imgs/13-back.jpg);
}

.day14 {
}
.day14 .front {
  background: url(./imgs/14-front.jpg);
}  
.day14 .back {
  background: url(./imgs/14-back.jpg);
}
.day15 {
}
.day15 .front {
  background: url(./imgs/15-front.jpg);
}  
.day15 .back {
  background: url(./imgs/15-back.jpg);
}

.day16 {
}
.day16 .front {
  background: url(./imgs/16-front.jpg);
}  
.day16 .back {
  background: url(./imgs/16-back.jpg);
}
.day17 {
}
.day17 .front {
  background: url(./imgs/17-front.jpg);
}  
.day17 .back {
  background: url(./imgs/17-back.jpg);
}
.day18 {
}
.day18 .front {
  background: url(./imgs/18-front.jpg);
}  
.day18 .back {
  background: url(./imgs/18-back.jpg);
}
.day19 {
}
.day19 .front {
  background: url(./imgs/19-front.jpg);
}  
.day19 .back {
  background: url(./imgs/19-back.jpg);
}

.day20 {
}
.day20 .front {
  background: url(./imgs/20-front.jpg);
}  
.day20 .back {
  background: url(./imgs/20-back.jpg);
}

.day21 .front {
  background: url(./imgs/21-front.jpg);
}  
.day21 .back {
  background: url(./imgs/21-back.jpg);
}

.day22 {
}
.day22 .front {
  background: url(./imgs/22-front.jpg);
}  
.day22 .back {
  background: url(./imgs/22-back.jpg);
}

.day23 {
}
.day23 .front {
  background: url(./imgs/23-front.jpg);
}  
.day23 .back {
  background: url(./imgs/23-back.jpg);
}

.day24 {
}
.day24 .front {
  background: url(./imgs/24-front.jpg);
}  
.day24 .back {
  background: url(./imgs/24-back.jpg);
}

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

.door {
  width: 100%;
  height: 100%;
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: all 300ms;
  cursor: pointer;
  min-height: 110px;
  font-family: "BioRhyme", serif;
  font-size: 58px;
  color: #ffffff;
}

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

.door .front {
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

.door .back {
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  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;
  width: 76%;
  max-width: 600px;
  min-height: 200px;
  letter-spacing: 0.5px;
  line-height: 1.4em;
}
.modalContent p {
  font-size: 0.9em;
}

.dailyTitle {

}

.dailyDate {
  font-family: "BioRhyme", Courier;
  color: #135270;
}

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

.dailyLink {
  text-decoration: none;
  color: #ffffff;
  font-weight: bold;
  line-height: 2.3em;
}
.dailyLink:hover {
}

/* ===  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;
  }
}
@media only screen and (max-width: 690px) {
  .door {
    font-size: 46px;
  }
}