body {
  background: url(images/kepestortenelem/front.jpg);
  background-color: #2f9ef8;
  background-size: cover;
}

/* title graphic */
.title {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* .title img {
  width: 90%;
  height: auto;
} */
/* mobile first grid layout */
.grid-1 {
  display: grid;
  width: 100%;
  max-width: 900px;
  margin: 2% auto;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-gap: 25px;
  grid-template-areas:
    't        t       t'
    'd1      d2     d3'
    'd4       d5    d6'
    'd7       d8    d9'
    'd10       d11      d12'
    'd13      d14     d15'
    'd16      d17      d18'
    'd19       d20     d21'
    'd22      d23     d24'
    'd25       d26     d27'
    'd28       d29     d30'
    'd31       d32      d33'
    'd34      d35     d36'
    'd37      d38      d39'
    'd40       d41     d42'
    'd43      d44     d45'
    'd46      d47     d48'
    'd49      d50     t';
}

/* media query */
@media only screen and (min-width: 500px) {
  .grid-1 {
    grid-template-columns: 150px 150px 150px 150px 150px 150px;
    /* grid-template-columns: repeat(6, 1fr); */
    grid-template-rows: 150px 150px 150px 150px 150px 150px 150px 150px 150px 150px;
    grid-template-areas:
      't     t     t     d1      d2      d3'
      't     t     t     d4      d5     d6'
      't     t     t     d7     d8      d9'
      'd10    d11    d12   d13     d14     d15'
      'd16   d17   d18   d19     d20      d21'
      'd22    d23    d24   d25     d26     d27'
      'd28   d29   d30   d31     d32      d33'
      'd34    d35    d36   d37     d38     d39'
      'd40   d41   d42   d43     d44      d45'
      'd46   d47   d48   d49     d50      d51'	
;
  }
}

/* individual items */
.title {
  grid-area: t;
}

.day-1 {
  grid-area: d1;
}

.day-1 .back {
  background: url(images/kepestortenelem/1974.jpg);
}

.day-2 {
  grid-area: d2;
}

.day-2 .back {
  background: url(images/kepestortenelem/1975.jpg);
}

.day-3 {
  grid-area: d3;
}

.day-3 .back {
  background: url(images/kepestortenelem/1976.jpg);
}

.day-4 {
  grid-area: d4;
}

.day-4 .back {
  background: url(images/kepestortenelem/1977.jpg);
}

.day-5 {
  grid-area: d5;
}

.day-5 .back {
  background: url(images/kepestortenelem/1978.jpg);
}

.day-6 {
  grid-area: d6;
}

.day-6 .back {
  background: url(images/kepestortenelem/1979.jpg);
}

.day-7 {
  grid-area: d7;
}

.day-7 .back {
  background: url(images/kepestortenelem/1980.jpg);
}

.day-8 {
  grid-area: d8;
}

.day-8 .back {
  background: url(images/kepestortenelem/1981.jpg);
}

.day-9 {
  grid-area: d9;
}

.day-9 .back {
  background: url(images/kepestortenelem/1982.jpg);
}

.day-10 {
  grid-area: d10;
}

.day-10 .back {
  background: url(images/kepestortenelem/1983.jpg);
}

.day-11 {
  grid-area: d11;
}

.day-11 .back {
  background: url(images/kepestortenelem/1984.jpg);
}

.day-12 {
  grid-area: d12;
}

.day-12 .back {
  background: url(images/kepestortenelem/1985.jpg);
}

.day-13 {
  grid-area: d13;
}

.day-13 .back {
  background: url(images/kepestortenelem/1986.jpg);
}

.day-14 {
  grid-area: d14;
}

.day-14 .back {
  background: url(images/kepestortenelem/1987.jpg);
}

.day-15 {
  grid-area: d15;
}

.day-15 .back {
  background: url(images/kepestortenelem/1988.jpg);
}

.day-16 {
  grid-area: d16;
}

.day-16 .back {
  background: url(images/kepestortenelem/1989.jpg);
}

.day-17 {
  grid-area: d17;
}

.day-17 .back {
  background: url(images/kepestortenelem/1990.jpg);
}

.day-18 {
  grid-area: d18;
}

.day-18 .back {
  background: url(images/kepestortenelem/1991.jpg);
}

.day-19 {
  grid-area: d19;
}

.day-19 .back {
  background: url(images/kepestortenelem/1992.jpg);
}

.day-20 {
  grid-area: d20;
}

.day-20 .back {
  background: url(images/kepestortenelem/1993.jpg);
}

.day-21 {
  grid-area: d21;
}

.day-21 .back {
  background: url(images/kepestortenelem/1994.jpg);
}

.day-22 {
  grid-area: d22;
}

.day-22 .back {
  background: url(images/kepestortenelem/1995.jpg);
}

.day-23 {
  grid-area: d23;
}

.day-23 .back {
  background: url(images/kepestortenelem/1996.jpg);
}

.day-24 {
  grid-area: d24;
}

.day-24 .back {
  background: url(images/kepestortenelem/1997.jpg);
}

.day-25 {
  grid-area: d25;
}

.day-25 .back {
  background: url(images/kepestortenelem/1998.jpg);
}

.day-26 {
  grid-area: d26;
}

.day-26 .back {
  background: url(images/kepestortenelem/1999.jpg);
}

.day-27 {
  grid-area: d27;
}

.day-27 .back {
  background: url(images/kepestortenelem/2000.jpg);
}

.day-28 {
  grid-area: d28;
}

.day-28 .back {
  background: url(images/kepestortenelem/2001.jpg);
}

.day-29 {
  grid-area: d29;
}

.day-29 .back {
  background: url(images/kepestortenelem/2002.jpg);
}

.day-30 {
  grid-area: d30;
}

.day-30 .back {
  background: url(images/kepestortenelem/2003.jpg);
}

.day-31 {
  grid-area: d31;
}

.day-31 .back {
  background: url(images/kepestortenelem/2004.jpg);
}

.day-32 {
  grid-area: d32;
}

.day-32 .back {
  background: url(images/kepestortenelem/2005.jpg);
}

.day-33 {
  grid-area: d33;
}

.day-33 .back {
  background: url(images/kepestortenelem/2006.jpg);
}

.day-34 {
  grid-area: d34;
}

.day-34 .back {
  background: url(images/kepestortenelem/2007.jpg);
}

.day-35 {
  grid-area: d35;
}

.day-35 .back {
  background: url(images/kepestortenelem/2008.jpg);
}

.day-36 {
  grid-area: d36;
}

.day-36 .back {
  background: url(images/kepestortenelem/2009.jpg);
}

.day-37 {
  grid-area: d37;
}

.day-37 .back {
  background: url(images/kepestortenelem/2010.jpg);
}

.day-38 {
  grid-area: d38;
}

.day-38 .back {
  background: url(images/kepestortenelem/2011.jpg);
}

.day-39 {
  grid-area: d39;
}

.day-39 .back {
  background: url(images/kepestortenelem/2012.jpg);
}

.day-40 {
  grid-area: d40;
}

.day-40 .back {
  background: url(images/kepestortenelem/2013.jpg);
}

.day-41 {
  grid-area: d41;
}

.day-41 .back {
  background: url(images/kepestortenelem/2014.jpg);
}

.day-42 {
  grid-area: d42;
}

.day-42 .back {
  background: url(images/kepestortenelem/2015.jpg);
}

.day-43 {
  grid-area: d43;
}

.day-43 .back {
  background: url(images/kepestortenelem/2016.jpg);
}

.day-44 {
  grid-area: d44;
}

.day-44 .back {
  background: url(images/kepestortenelem/2017.jpg);
}

.day-45 {
  grid-area: d45;
}

.day-45 .back {
  background: url(images/kepestortenelem/2018.jpg);
}

.day-46 {
  grid-area: d46;
}

.day-46 .back {
  background: url(images/kepestortenelem/2019.jpg);
}

.day-47 {
  grid-area: d47;
}

.day-47 .back {
  background: url(images/kepestortenelem/2020.png);
}

.day-48 {
  grid-area: d48;
}

.day-48 .back {
  background: url(images/kepestortenelem/2021.png);
}

.day-49 {
  grid-area: d49;
}

.day-49 .back {
  background: url(images/kepestortenelem/2022.jpg);
}

.day-50 {
  grid-area: d50;
}

.day-50 .back {
  background: url(images/kepestortenelem/2023.jpg);
}

/* door styles */
.grid-1 input {
  display: none;
}

label {
  perspective: 1000px;
  transform-style: preserve-3d;
  cursor: pointer;
  display: flex;
  min-height: 100%;
  width: 100%;
  height: 120px;
}

.front {
  background-color: rgba(98, 170, 230, 0.8);
}

.door {
  width: 100%;
  transform-style: preserve-3d;
  transition: all 300ms;
  border: 2px dashed transparent;
  border-radius: 10px;
}

.door div {
  position: absolute;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* typography */
  font-family: 'Kalam', cursive;
  color: #385052;
  font-size: 2em;
  font-weight: bold;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2);
}

.door .back {
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: rgba(98, 170, 230, 0.5);
  transform: rotateY(180deg);
}

label:hover .door {
  border-color: #385052;
}

:checked+.door.flip {
  transform: rotateY(180deg);
}

/* footer styles */
footer {
  text-align: center;
  padding: 2em 0;
}

footer a {
  color: #2e313d;
}

footer a:hover {
  text-decoration: none;
}

/* Modal */
#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {
  opacity: 0.7;
}

/* The Modal (background) */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 50px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9);
  /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  /* width: 80%; */
  /* max-width: 700px; */
  height: 90%;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content,
#caption {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0);
  }

  to {
    -webkit-transform: scale(1);
  }
}

@keyframes zoom {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
  .modal-content {
    width: 100%;
  }
}