html {
	background-color: #222222;
}
.wf {
	transition: opacity .5s;
	opacity: 0;
}
html.wf-ready .wf,
html.wf-timedout .wf {
	opacity: 1;
}
.wrap {
	margin: 0 auto;
	max-width: 70rem;
}
h1 {
	margin: 3rem 0 0;
	color: #FFFFFF;
}
.clock {
	box-sizing: border-box;
	display: grid;
	grid-template-areas: ".      . hour-up   .     minute-up"
        "season . hour      colon minute"
        ".      . hour      colon minute"
        "day    . hour      colon minute"
        ".      . hour-down .     minute-down";
	max-width: 22rem;
	color: #FFFFFF;
}
#clock-season {
	grid-area: season;
	font-size: 1.8rem;
}
#clock-hour,
#clock-colon,
#clock-minute,
#clock-day {
	font-family: "Share Tech Mono", monospace;
	font-weight: 400;
	font-style: normal;
	font-optical-sizing: auto;
}
#clock-day {
	grid-area: day;
	margin: -.33rem -.17rem -.45rem -.16rem;
	color: #BBBBBB;
	font-size: 1.85rem;
}
#clock-hour,
#clock-colon,
#clock-minute {
	margin: -1.04rem -1.25rem -1.37rem -1.25rem;
	text-align: center;
	font-size: 5.7rem;
}
#clock-hour {
	grid-area: hour;
}
#clock-colon {
	grid-area: colon;
	margin-top: -1.5rem;
}
#clock-minute {
	grid-area: minute;
}
.clock-button {
	position: relative;
	outline: none;
	border: none;
	background: none;
	padding: 0;
	height: 2rem;
	color: inherit;
	font: inherit;
}
.clock-button::after {
	position: absolute;
	right: 10%;
	left: 10%;
	height: .4rem;
	content: "";
}
.clock-button:hover::after {
	background-color: #FFFFFF;
}
.clock-button-up::after {
	clip-path: polygon(0 100%, 100% 100%, 50% 0);
}
.clock-button-down::after {
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}
#clock-hour-up {
	grid-area: hour-up;
}
#clock-hour-down {
	grid-area: hour-down;
}
#clock-minute-up {
	grid-area: minute-up;
}
#clock-minute-down {
	grid-area: minute-down;
}
.periods {
	box-sizing: border-box;
	display: grid;
	grid-template-areas: "period";
	overflow: hidden;
}
.period {
	display: grid;
	grid-area: period;
	transform: translateX(20rem);
	transition: transform .7s ease-out;
	visibility: hidden;
	gap: 1rem;
}
.period-previous {
	transform: translateX(0);
	transition: none;
	visibility: visible;
	z-index: 99;
}
.period-now {
	transform: translateX(0);
	visibility: visible;
	z-index: 100;
}
.weather {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-radius: .7rem;
	padding: .7rem;
	gap: .5rem;
}
.period-daytime .weather-sunny {
	background-color: #F6D580;
}
.period-daytime .weather-rainy {
	background-color: #6CBAD8;
}
.period-night .weather-sunny {
	background-color: #497E93;
}
.period-night .weather-rainy {
	background-color: #454F53;
}
.period h3 {
	grid-column: 1 / 3;
	margin: 0;
}
.period-daytime h3 {
	color: #2C1005;
}
.period-night h3 {
	color: #DAEEF6;
}
.item {
	border: .3rem solid #E1DBC9;
	border-radius: .5rem;
	background-color: #FDF5E2;
	text-align: center;
}
.item-image {
	display: block;
	width: 3rem;
	height: 3rem;
	background-size: cover;
	margin: 0 auto;
}

.item-flower .item-image {
	background-image: url(sprite_flowers.png);
}
.item-insect .item-image {
	background-image: url(sprite_insects.png);
}
.item-shell .item-image {
	background-image: url(sprite_shells.png);
}
@media screen and (min-width: 940px) {
	.period {
		grid-template-columns: 1fr 1fr;
	}
}