:root{
	font-size: 6.25em; /* 1rem = 100px */
	--gap: .2rem;

	--color-base-a: #50889d;
	--color-base-b: #e827a0;


	
}

body{
	font-size: .16rem; 
	font-family: system-ui, sans-serif;
	margin: 0;
	padding: var(--gap);
	

	background: linear-gradient(180deg, var(--color-base-a), transparent 30%, transparent 70% ,var(--color-base-a) ),linear-gradient(135deg, var(--color-base-a), var(--color-base-b)) var(--color-base-a);
	background-attachment: fixed;

}


img{
	width: 100%;
	max-width: 3rem;
}

main{
	max-width: 5rem;
	margin: auto;
}

input[type="button"],button{
	font-size: inherit;
	padding: .1rem .2rem;
	border: none;
	border-radius: .05rem;
	background: linear-gradient(rgb(255 255 255 / .2)), linear-gradient(135deg, var(--color-base-a), var(--color-base-b));
	color: #333;
	cursor: pointer;
	margin: var(--gap) auto;
	display: block;
	width: fit-content
}

dialog{
	display: none;
}

dialog[open]{
	border: none;
	border-radius: .1rem;
	padding: 0;
	max-width: 80vw;
	aspect-ratio: 1;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	place-items: center;
	color:#fff;
	font-family: monospace;
	outline: none !important;
	
	box-shadow: 
		0 0 5vmin rgb(from var(--color-base-a) r g b / .5),
		0 0 0 100vmax rgb(0 0 0 / .5)
	;

	*{
		grid-row: 1;
		grid-column: 1;
		position: relative;
	}
	
	canvas{

		display: block;
		width: 100%;
		height: 100%;
	}
}

li button{
	display: inline-block;
	margin:none;
	font-size: .14rem;
	padding: .05rem .1rem;
}

.calendar{
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: .05rem;
	width: 100%;
	span{
		grid-column: span 2;
		text-align: right;
	}
	*{
		margin:0;
		padding: .5em 0;
		width: 100%;
		height: 100%;
	}
}