div.calendar-day{
	width: 80px; position: relative;
}

div.calendar-day--container{
	width: 100%; display: flex; flex-direction: column;
	box-shadow: 0 1px 4px hsl(0,0%,50%);
    border: solid 1px hsl(0,0%,100%);
    border-radius: 3px; overflow: hidden;
}

div.calendar-day--top{
	background: hsl(210,10%,95%);
    background: linear-gradient(180deg, hsl(210,10%,95%), hsl(210,10%,80%));
    text-align: center;
    color: hsl(210,10%,10%);
    text-shadow: hsl(210,10%,100%) 0 1px 1px;  
    position:relative; padding: 16px 2px 8px 2px
}

div.calendar-day--bottom{
	display: block; padding: 4px 2px 6px 2px;
    text-align: center;
    background: hsl(210,95%,25%);
    background: linear-gradient(180deg, hsl(210,80%,40%), hsl(210,100%,20%)); 
    border-top:1px solid hsl(210,100%,20%);
}

div.calendar-day--day{
    font-size: 12px;
}

div.calendar-day--date{
    font-weight: bold; font-size: 32px; line-height: 1;
}

div.calendar-day--month{
    font-weight: bold; font-size: 12px;
    color: hsl(210,0%,100%);
    text-shadow: hsl(210,100%,20%) 0 1px 1px;
}

div.calendar-day--spiral{
    position:absolute;
    top: -7px; 
    width: 4px;
    height: 16px;
    background:hsl(0,0%,80%);
    background: linear-gradient(180deg, hsl(0,0%,60%), hsl(0,0%,95%), hsl(0,0%,60%)); 
    z-index: 2;
    border-radius: 2px;
}

div.calendar-day--hole{
    position:absolute;
    position:absolute;
    top:4px;  
    width: 8px;
    height: 8px;
    background: hsl(210,10%,10%);
    z-index: 1;
    border-radius: 4px;
    box-shadow: 0 1px 1px hsl(210,10%,100%);
}