:root{
	--red:#f44336;
	--green:#04aa6d;
}
::-webkit-scrollbar{
	display:none;
}
*{
	box-sizing:border-box;
	outline:none;
	transition:.25s;
}
@font-face{
	font-family:UbuntuSans;
	src:url(fonts/UbuntuSans-Regular.ttf);
}
@font-face{
	font-family:UbuntuSansBold;
	src:url(fonts/UbuntuSans-SemiBold.ttf);
}
body{
	>#modal{
		>#frame{
			>#content{
				>#relation-types{
					display:flex;
					gap:.5rem;
					margin-bottom:.5rem;
				}
				>.split-frame{
					>div{
						font-size:.8em;
						height:12em;
					}
					>div:before{
						background-color:white;
						border-bottom:1px solid black;
						content:attr(before);
						display:block;
						font-family:UbuntuSansBold;
						font-size:1.2em;
						margin-bottom:.25rem;
						position:sticky;
						top:0;
						z-index:1;
					}
					>#events{
						>div{
							>.delete{
								border:none!important;
								color:var(--red);
								opacity:0;
								position:absolute;
								right:.5rem;
								top:0;
							}
							>.delete:hover{
								background:none;
								border:none!important;
							}
							position:relative;
						}
						>div:hover{
							>.delete{
								opacity:1;
							}
						}
						>div:has(>.delete:hover){
							>.hover-move{
								background:#eee;
								border:1px solid var(--red)!important;
								color:var(--red);
							}
						}
					}
					>#prospective-relations,
					>#event{
						>div{
							>*{
								>input{
									background:transparent;
									border:none;
									padding:0;
								}
								border-radius:1em;
								border:2px inset grey;
								color:black;
								cursor:text;
								margin:0 1rem;
								padding:0 0 0 1em;
								width:calc(100% - 2rem);
							}
						}
					}
					>#event{
						>div:before{
							content:attr(before)':';
							display:block;
							font-family:UbuntuSansBold;
							font-size:.8em;
							margin:.25rem 0;
						}
					}
					border-bottom:1px solid black;
				}
				>input{
					border-radius:1rem;
					border:1px solid black;
					padding:0 1rem;
					font-size:1em;
					width:30ch;
				}
				margin:.5em 0;
			}
			>#description{
				font-size:.75em;
			}
			>#actions{
				>div{
					color:initial;
					flex:1;
					padding:.25rem 1rem;
					text-align:center;
				}
				>div:hover{
					border-color:transparent;
				}
				>#cancel:hover{
					background-color:var(--red);
				}
				>#save:hover{
					background-color:var(--green);
				}
				display:flex;
				gap:.5rem;
				justify-content:center;
				margin-top:.5rem;
			}
			background:white;
			border-radius:2rem;
			border:.2rem solid black;
			box-shadow:0 0 1rem -.5rem black;
			font-size:1.2em;
			left:50%;
			padding:1rem 2rem .5rem;
			position:fixed;
			top:40%;
			translate:-50%-50%;
			z-index:3;
		}
		backdrop-filter:brightness(.5);
		height:100vh;
		left:0;
		position:fixed;
		top:0;
		width:100vw;
		z-index:2;
	}
	>#top-bar,
	>#bottom-bar{
		>div{
			>#editing{
				>.switch{
					>input{
						height:0;
						opacity:0;
						width:0;
					}
					>input:checked+.slider{
						background-color:#33f;
					}
					>input:checked+.slider:before{
						transform:translateX(1rem);
					}
					>.slider{
						background-color:#ccc;
						border-radius:1rem;
						bottom:0;
						cursor:pointer;
						left:0;
						position:absolute;
						right:0;
						top:0;
						transition:.4s;
					}
					>.slider:before{
						aspect-ratio:1;
						background-color:white;
						border-radius:50%;
						bottom:4px;
						content:'';
						height:1rem;
						left:4px;
						position:absolute;
						transition:.4s;
					}
					display:block;
					height:1.5rem;
					position:relative;
					width:2.5rem;
				}
				display:flex;
				gap:.5rem;
			}
			display:flex;
			font-size:1.25em;
			gap:.5rem;
		}
		background:white;
		border-bottom:.4rem solid #00496f;
		display:flex;
		gap:1rem;
		justify-content:space-between;
		padding:.5rem;
		position:sticky;
		top:0;
		z-index:1;
	}
	>#bottom-bar{
		border-bottom:none;
		border-top:.4rem solid #00496f;
		bottom:0;
	}
	>#banner{
		>div{
			padding:.25rem 5vw;
		}
		>#name{
			>div{
				display:inline-block;
			}
			>#given:empty:before,
			>#family:empty:before{
				content:'['attr(id)']';
			}
			>.edit{
				position:absolute;
				top:.5rem;
				right:initial;
				margin-left:.5rem;
			}
			font-size:2.5em;
		}
		background:white;
		border-bottom:1px solid #aaa;
		padding:1rem 0;
	}
	>#content{
		>.content-column{
			>div{
				>.content{
					>.relation-type:not(:first-child){
						margin-top:.5rem;
					}
				}
				>.content:empty:before{
					content:'There are no records.';
					display:block;
				}
				background:white;
				border-radius:.5rem;
				border:1px solid #aaa;
				margin-top:1rem;
				padding:1.4rem 1rem 2rem;
				position:relative;
			}
			>div:before{
				content:attr(id);
				font-family:UbuntuSansBold;
				font-size:1.2em;
				position:relative;
				top:-.6rem;
			}
			>div:empty{
				padding-bottom:2rem;
			}
			flex:1;
		}
		display:flex;
		flex:1;
		gap:1rem;
		margin:0 auto 4rem;
		width:90vw;
	}
	background:#eee;
	display:flex;
	flex-direction:column;
	font-family:UbuntuSans;
	margin:0;
	height:100vh;
	overscroll-behavior:none;
}
details{
	>summary{
		cursor:pointer;
		font-family:UbuntuSansBold;
		user-select:none;
	}
	>div{
		margin-left:1.5rem;
	}
}
details:has(summary:only-child){
	>summary{
		list-style:none;
	}
	pointer-events:none;
}
div[onclick]{
	border-radius:.5rem;
	border:1px solid transparent;
	color:#33f;
	cursor:pointer;
	transition:.25s;
	user-select:none;
}
div[onclick]:hover,
.button:hover,
.button-obvious{
	background:#eee;
	border:1px solid #aaa!important;
}
.button-obvious{
	color:initial!important;
	opacity:.5;
}
.button-obvious:hover{
	opacity:1;
}
div:has(.edit){
	>.edit{
		position:absolute;
		top:-.2rem;
		right:0;
		font-size:initial;
	}
	>.edit:before{
		content:'edit';
	}
	position:relative;
}
input,
textarea{
	font-family:UbuntuSans!important;
}
strong{
	font-family:UbuntuSansBold;
	user-select:none;
}
subtle{
	opacity:.5;
}
.button{
	*{
		cursor:pointer;
	}
	border-radius:.5rem;
	border:1px solid transparent;
	cursor:pointer;
	font-family:UbuntuSansBold;
	padding:.2rem.4rem;
	transition:.25s;
	user-select:none;
}
.hidden{
	opacity:0;
	pointer-events:none;
}
.hidden:before{
	content:''!important;
}
.hover-green{
	position:relative;
}
.hover-green:hover,
.hovered-green{
	color:var(--green)!important;
}
.hover-green:hover:before,
.hover-green:hover:after,
.hover-red:hover:before,
.hover-red:hover:after{
	animation:swing .25s linear alternate infinite;
	background-color:var(--green);
	border-radius:.12em;
	content:'';
	height:.12em;
	left:.18em;
	position:absolute;
	top:50%;
	translate:0 -50%;
	width:.9em;
}
.hover-green:hover:after{
	rotate:90deg;
}
.hover-move{
	padding-left:1rem;
	padding-right:1rem;
}
.hover-move:hover{
	padding-left:1.5rem;
	padding-right:.5rem;
}
.hovered-move{
	animation:move-right .25s forwards;
	font-family:UbuntuSansBold;
}
.hover-red{
	position:relative;
}
.hover-red:hover{
	color:var(--red)!important;
}
.hover-red:hover:before,
.hover-red:hover:after{
	background-color:var(--red);
	left:.15em;
	rotate:45deg;
	width:1em;
}
.hover-red:hover:after{
	rotate:135deg;
}
.split-frame{
	>div{
		flex:1;
		overflow-y:scroll;
	}
	display:flex;
	gap:.5rem;
}
@keyframes move-right{
	0%{
		padding-left:1rem;
		padding-right:1rem;
	}
	100%{
		padding-left:1.5rem;
		padding-right:.5rem;
	}
}
@keyframes swing{
	0%{
		transform:rotate(8deg);
	}
	100%{
		transform:rotate(-8deg);
	}
}