:root {
	--gap: 5px;
	--base03: #002b36;
	--base03b: #0B3039;
	--base02: #073642;
	--base02b: #1A434E;
	--base01: #586e75;
	--base00: #657b83;
	--base0: #839496;
	--base1: #93a1a1;
	--base2: #eee8d5;
	--base3: #fdf6e3;
	--yellow: #b58900;
	--orange: #cb4b16;
	--red: #dc322f;
	--magenta: #d33682;
	--violet: #6c71c4;
	--blue: #268bd2;
	--cyan: #2aa198;
	--green: #859900;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	background-color: var(--base03);
	font-family: 'Helvetica Neue', sans-serif;
	width: min-content;
}

.calendar {
	position: relative;
	color: var(--base2);
	background-color: var(--base03);
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	padding: var(--gap);
	width: 1500px;
}

.year {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--gap);
}

.year-name {
	color: var(--white);
	font-size: 2em;
	margin-left: var(--gap);
}

.month {
	position: relative;
	display: flex;
	flex-direction: row;
	gap: var(--gap);
}

.month-name {
	position: absolute;
	bottom: var(--gap);
	left: var(--gap);
	z-index: 2;
}

.day, .empty {
	background-color: var(--base02);
	position: relative;
	height: 80px;
	flex: 1;
}

.day.past::before {
	content: '';
	position: absolute;
	top: calc(-1 * var(--gap)/2);
	left: calc(-1 * var(--gap)/2);
	width: calc(100% + var(--gap));
	height: calc(100% + var(--gap));
	background-color: var(--base03b);
	opacity: .5;
	z-index: 3;
	pointer-events: none;
}

.day.today::before {
	content: '';
	position: absolute;
	top: calc(-1*var(--gap)/2);
	left: calc(-1*var(--gap)/2);
	width: 100%;
	height: 100%;
	border: calc(var(--gap)/2) solid var(--base3);
	pointer-events: none;
}


.day-name {
	position: absolute;
	top: 0;
	left: calc(var(--gap) / 2);
	font-size: .8em;
	cursor: pointer;
}

.empty {
	background-color: var(--base03);
}

.sat, .sun {
	background-color: var(--base02b);
}

.event {
	position: absolute;
	background-color: var(--base02);
	font-size: .7em;
	overflow: hidden;
	line-height: .8;
	white-space: nowrap;
	padding: 1px;
}

.event.overflow {
	display: none;
}

/* .planner { */
/* 	background-color: var(--green); */
/* } */

/* .note { */
/* 	background-color: var(--blue); */
/* } */

/* .holiday { */
/* 	background-color: var(--orange); */
/* } */

.contacts {
	background-color: var(--violet) !important;
}
	

.tooltip {
	position: absolute;
	background-color: var(--base02);
	color: var(--base3);
	font-size: .8em;
	padding: var(--gap);
	border-radius: var(--gap);
	box-shadow: 0 0 5px var(--base03);
	pointer-events: none;
	z-index: 5;
}

#modal {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: var(--base03);
	text-align: center;
	color: var(--base3);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2em;
}