div#container {max-width:1200px; margin:0 auto; padding:1rem;}
div#container div.year {margin:2rem 0; padding:2rem 1rem; background-color:rgba(30,144,255,0.75); border:1px solid #000; border-radius:.25rem;}
div#container div.year .name {text-align:center; font-weight:600;}

div#container div.year h2.name span.quality.e {color:gold;}
div#container div.year h2.name span.quality.b {color:royalblue;}
div#container div.year h2.name span.quality.r {color:limegreen;}

/* xs */
@media screen and (max-width:575px) {
	div#container div.year h2.name span {display:none;}
	div#container div.year h2.name span.quality {display:block;}
}
/* md lg xl */
@media screen and (min-width:576px) {
	div#container div.year h2.name span.quality::after {content:', '; color:initial;}
	div#container div.year h2.name span.quality:last-of-type::after {content:'';}
}

div#container div.year div.month {padding:1rem; margin-top:2rem; background-color:#FFF4; border:1px solid #0004; border-radius:.25rem; box-shadow: 0px 2px 2px rgba(0,0,0,.25);}

div#container div.year div.month div.name {padding:0 0 1.5rem;}
/*div#container div.year div.month div.week {}*/
div#container div.year div.month a.day {display:inline-block; width:14.285%; height:1rem; text-decoration:none; transition:.5s; /*border:1px solid #0002;*/}
div#container div.year div.month a.day {text-align:center; color:#000; /*font-size:2rem;*/ /*background-color:#0001;*/}
div#container div.year div.month a.day {position:relative;}
div#container div.year div.month a.day.today {color:white;}
div#container div.year div.month a.day:hover {z-index:3; transform:scale(1.15); color:dodgerblue;}
div#container div.year div.month a.day.actual::after {content:'⋅';}



/*  Mini-frame  */

div#container div.year div.month a.day div.miniframe {display:none; position:absolute; box-shadow: 0px 0px 8px rgba(0,0,0,.25);}
div#container div.year div.month a.day div.miniframe {background-color:#fff; padding:.5rem; height:10rem; width:18rem; box-sizing:border-box; border:1px solid #0001;}
div#container div.year div.month a.day div.miniframe.tall {height:16rem; width:10rem;}
div#container div.year div.month a.day div.miniframe:before,
div#container div.year div.month a.day div.miniframe::after {position:absolute; content:''; border:.75rem solid #00000001; /*border-radius:50%;*/}

/*  mobile(sm), tablet(md), laptop(lg), desktop(xl)  */
/*@media screen and (min-width:576px) {*/
	/*div#container div.year div.month a.day div.miniframe,*/
	/*
	div#container div.year div.month a.day div.miniframe:hover,
	div#container div.year div.month a.day:hover div.miniframe {display:block;}*/
/*}*/

/* Position: default */
div#container div.year div.month a.day div.miniframe.def {left:20%; top:calc(100% + .75rem);}
div#container div.year div.month a.day div.miniframe.def {animation:fade-in-up 0.25s ease;}
div#container div.year div.month a.day div.miniframe.def:before {left:1.05rem; transform:translateX(-50%); bottom:calc(100% + 2px); border-bottom-color:#999;}
div#container div.year div.month a.day div.miniframe.def::after {left:1.05rem; transform:translateX(-50%); bottom:100%; border-bottom-color:#fff;}

/* Position: horizontally flipped */
div#container div.year div.month a.day div.miniframe.flip-x {right:20%; top:calc(100% + .75rem);}
div#container div.year div.month a.day div.miniframe.flip-x {animation:fade-in-up 0.25s ease;}
div#container div.year div.month a.day div.miniframe.flip-x:before,
div#container div.year div.month a.day div.miniframe.flip-x::after {left:auto; bottom:auto;}
div#container div.year div.month a.day div.miniframe.flip-x:before {right:1.05rem; transform:translateX(50%); bottom:calc(100% + 2px); border-bottom-color:#999;}
div#container div.year div.month a.day div.miniframe.flip-x::after {right:1.05rem; transform:translateX(50%); bottom:100%; border-bottom-color:#fff;}
/*div#container div.year div.month a.day div.miniframe.flip-x:before {content:'flip-x';}*/

/* Position: vertically flipped */
div#container div.year div.month a.day div.miniframe.flip-y {left:20%; bottom:calc(100% + .75rem);}
div#container div.year div.month a.day div.miniframe.flip-y {animation:fade-in-down 0.25s ease;}
div#container div.year div.month a.day div.miniframe.flip-y:before,
div#container div.year div.month a.day div.miniframe.flip-y::after {left:auto; bottom:auto;}
div#container div.year div.month a.day div.miniframe.flip-y:before {left:1.05rem; transform:translateX(-50%); top:calc(100% + 2px); border-top-color:#999;}
div#container div.year div.month a.day div.miniframe.flip-y::after {left:1.05rem; transform:translateX(-50%); top:100%; border-top-color:#fff;}
/*div#container div.year div.month a.day div.miniframe.flip-y:before {content:'flip-y';}*/

/* Position: horizontally flipped and vertically flipped */
div#container div.year div.month a.day div.miniframe.flip-x-y {right:20%; bottom:calc(100% + .75rem);}
div#container div.year div.month a.day div.miniframe.flip-x-y {animation:fade-in-down 0.25s ease;}
div#container div.year div.month a.day div.miniframe.flip-x-y:before,
div#container div.year div.month a.day div.miniframe.flip-x-y::after {left:auto; bottom:auto;}
div#container div.year div.month a.day div.miniframe.flip-x-y:before {right:1.05rem; transform:translateX(50%); top:calc(100% + 2px); border-top-color:#999;}
div#container div.year div.month a.day div.miniframe.flip-x-y::after {right:1.05rem; transform:translateX(50%); top:100%; border-top-color:#fff;}
/*div#container div.year div.month a.day div.miniframe.flip-x-y:before {content:'flip-x-y';}*/

div#container div.year div.month a.day div.miniframe div.mfbox {width:100%; height:100%; position:relative; border:1px solid #000; padding:0;}
div#container div.year div.month a.day div.miniframe div.mfbox div.section {width:50%; height:100%; float:left; text-align:left; padding:.5rem;}
div#container div.year div.month a.day div.miniframe.tall div.mfbox div.section {width:100%; height:50%; float:none;}
div#container div.year div.month a.day div.miniframe div.mfbox div.section div.date {font-size:4rem;}
/*
div#container div.year div.month a.day div.miniframe div.mfbox div.preview,
div#container div.year div.month a.day div.miniframe div.mfbox div.desc {display:inline-block; height:100%; width:100%; box-sizing:border-box; border:.5px solid #000;}
div#container div.year div.month a.day div.miniframe div.mfbox div.desc {text-align:left; overflow:hidden; padding:.5rem;}*/


@keyframes fade-in-up {
	from 	{opacity:0; transform:translateY(2rem);}
	to 		{opacity:1; transform:translateY(0);}
}

@keyframes fade-in-down {
	from 	{opacity:0; transform:translateY(-2rem);}
	to 		{opacity:1; transform:translateY(0);}
}