.clock-page {
	width: 100%;
	height: 100%;
	transition: 0.5s;
	font-family: 'Roboto';
}

.clock-page.night {
	color: #fff;
}

.clock-page .inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 100%;
	width: 100%;
	justify-content: space-between;
}

.clock-page .inner .digital {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 37vw;
	height: 100%;
}

.clock-page .inner .digital .dayOfWeek {
	font-size: calc(var(--percentage-width) * 6.15);
	font-weight: bold;
}

.clock-page .inner .digital .timeOfDay {
	font-size: calc(var(--percentage-width) * 6.15);
	font-weight: normal;
	margin-bottom: 1.3%;
}

.clock-page .inner .digital .digitalClock {
	font-size: calc(var(--percentage-width) * 11.2);
	font-weight: bold;
}

.clock-page .inner .digital .date {
	font-size: calc(var(--percentage-width) * 3.28);
	font-weight: normal;
}

.clock-page .inner .analog {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 30vw;
	height: 100%;
}

.clock-page .inner .analog .clocky {
	width: calc(var(--percentage-width)* 30);
	height: calc(var(--percentage-width)* 30);
}

.clock-page .inner .birthdays-and-weather {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	max-width: 30vw;
	margin-right: 1vw;
}

.clock-page .inner .birthdays-and-weather .birthdays {
	margin-top: 5vh;
	font-size: 4vh;
}

.clock-page .inner .birthdays-and-weather .birthdays .birthday-title {
	font-weight: 500;
	margin-top: 2vh;
}

.clock-page .inner .birthdays-and-weather .birthdays .birthday-list {
	margin-bottom: 3vh;
}

.clock-page .inner .birthdays-and-weather .birthdays .birthday-list i{
	margin-right: 0.5vw;
}

.clock-page .inner .birthdays-and-weather .birthdays .birthday{
    display: flex;
    flex-direction: row;
    /* align-items: center; */
	margin-top: 1vh;
}

#birthdays-tomorrow {
	font-size: 3vh;
}

#birthdays-tomorrow .birthday {
	margin-top: 0;
}

#birthdays-today .birthday{
	font-size: 4vh;
}


.clock-page .inner .weather {
	display: flex;
	flex-direction: column;
	width: 20vw;
	justify-content: flex-end;
	align-items: center;
	margin-bottom: 7.5vh;
}

.clock-page .inner .weather .location {
	font-size: calc(var(--percentage-width) * 1.3);
	padding-bottom: 2%;
}

.clock-page .inner .weather .temperature {
	font-size: calc(var(--percentage-width) * 2.45);
	font-weight: bold;
	width: 100%;
	margin-bottom: -1%;
}

.clock-page .inner .weather .image {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.clock-page .inner .weather .image img {
	width: calc(var(--percentage-width) * 10);
}

.clock-page .inner .weather .image .description {
	margin-top: 2%;
	font-size: calc(var(--percentage-width) * 1.72);
	font-weight: normal;
}