@import url("https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@400;700&display=swap");

body {
	background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../images/background.jpg") no-repeat fixed center;
	background-size: cover;
}

h1 {
	font-family: "Mountains of Christmas", sans-serif;
}

.unopened {
	background-color: rgba(255, 255, 255, 0);
}

.img-fluid {
	width: 100%;
}

.num {
	top: 20px;
	left: 20px;
}

.calendar {  
  display: grid; 
  grid-template-columns: repeat(4, minmax(40px, 320px));
  gap: 10px 10px; 
  grid-template-areas:
    "day-1 day-2 day-3 day-4"
    "day-5 day-6 day-7 day-8"
    "day-9 day-10 day-11 day-12"
    "day-13 day-14 day-15 day-16"
    "day-17 day-18 day-21 day-21"
    "day-19 day-20 day-21 day-21";
}

#day-1 { grid-area: day-1; }

#day-2 { grid-area: day-2; }

#day-3 { grid-area: day-3; }

#day-4 { grid-area: day-4; }

#day-5 { grid-area: day-5; }

#day-6 { grid-area: day-6; }

#day-7 { grid-area: day-7; }

#day-8 { grid-area: day-8; }

#day-9 { grid-area: day-9; }

#day-10 { grid-area: day-10; }

#day-11 { grid-area: day-11; }

#day-12 { grid-area: day-12; }

#day-13 { grid-area: day-13; }

#day-14 { grid-area: day-14; }

#day-15 { grid-area: day-15; }

#day-16 { grid-area: day-16; }

#day-17 { grid-area: day-17; }

#day-18 { grid-area: day-18; }

#day-19 { grid-area: day-19; }

#day-20 { grid-area: day-20; }

#day-21 { grid-area: day-21; }

.logo {
  width: 100%;
  height: auto;
}