@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');

*{
	padding: 0; margin: 0;
	font-family: 'Dela Gothic One', cursive;
}

body{
	background-color: #151515;
	color: #FFF;
}

.container{
	width: calc(100%-20px); height: calc(100%-20px);
	margin: 20px; 
}

.week{
	width: 100%;
}

.week div.title{
	position: relative;
	width: 100%; text-align: center;
	color: white;
}

.calendars{
	display: inline-block; justify-content: center;
	margin-top: 20px; width: 100%;
}

.calendar{
	position: relative;
	display: inline-block;
	height: 100px; width: 150px;
	background-color: #3b3b3b;
	border-radius: 15px; 
	text-align: center;
	margin: 10px;
	overflow: hidden;
}

.calendar .title{
	width: 100%; 
	text-align: center; font-size: 15px;
}

.calendar .percentage{
	position: absolute;
	bottom: 55%; transform: translateY(50%);
	width: 100%;
	text-align: center; font-size: 22px;
}

.calendar .hour{
	position: absolute;
	bottom: 25%;
	width: 100%;
	text-align: center; font-size: 14px;
}

.calendar .line{ width: 100%; height: fit-content; overflow: hidden; }
.calendar .line1{ z-index: 15; opacity: 0.5; }
.calendar .line2{ z-index: 10; opacity: 0.7; }
.calendar .line3{ z-index: 5; }

.calendar .wave{
	content: '';
	position: absolute;
	left: 0;
	width: 200%; height: 15%;
	transform: translateY(15%);

	background: #64c8ae;
	-webkit-mask-size: cover;
}
.calendar .wave1{ -webkit-mask-image: url('1.png'); }
.calendar .wave2{ -webkit-mask-image: url('2.png'); animation: waveanim 12s linear infinite; }
.calendar .wave3{ -webkit-mask-image: url('3.png'); animation: waveanim 18s linear infinite; }

@keyframes waveanim{
	0%    { transform: translateX(0)    translateY(15%); }
	25%   { transform: translateX(-25%) translateY(15%); }
	50%   { transform: translateX(-50%) translateY(15%); }
	75%   { transform: translateX(-25%) translateY(15%); }
	100%  { transform: translateX(0)    translateY(15%); }
}


.percentage .text {
  text-align: center;
  font-weight: 700;
  font-size: 18px;
}

.calendar .hour{

}