#changes {
	--bkg: #b9ffcb;
	--bkg: #e3ffea;
	--sticky-colour-gradient: linear-gradient(to bottom, transparent 99%, var(--bkg) 100%);

	--padding-lr: 6vw;

	background: var(--bkg);
	padding-bottom: 100px;
}


#changes > :not(.sticky-bkg) {
	height: fit-content;
}

#changes .title-bar {
	position: relative;

	margin-bottom: 1%;
	margin-top: var(--loc-card-h);
}


#changes .sect-1 {
	--n-weeks: 1;
	--content-width: calc(100vw - var(--padding-lr) * 2);
	--date-square: calc(var(--content-width) / 7);

	width: inherit;
	height: fit-content;
	box-sizing: border-box;

	display: flex;
	flex-direction: column;

	padding: 4vh var(--padding-lr) 2vh var(--padding-lr);
}

#changes .sect-1 .calendar {
	margin-left: auto;
	margin-right: auto;
	margin-top: 2%;
}

#changes .sect-1 .calendar :first-child {
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

#changes .sect-1 .calendar :last-child {
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

#changes .sect-1 .calendar-subtitle {
	width: var(--content-width);
	margin: 0.5% auto 0 auto;

	font-family: Viga;
	font-size: min(1.5vw, 1.5vh);
}

#changes .info-tables {
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;

	padding: 2% calc(var(--padding-lr)/2) 0 calc(var(--padding-lr)/2);
	box-sizing: border-box;
}

#changes .entry {
	width: 45%;

	padding: 0.5% 1%;

	background: white;
	box-shadow: 5px 5px black;
	border: 1px solid rgb(70,70,70);
}


#changes table.summary-table.change {
	--n-grade-cols: 5;
	--col-1-wid: 40%;
}

#changes table svg {
	height: 7vh;
}

#changes table svg:has(use[href="#bbc-full"]) {
	margin-right: 15px;
}

#changes table.summary-table tr :first-child {
	font-size: 2vh;
}

#changes table.summary-table.change tr:first-child :first-child {
	width: var(--col-1-wid);
	text-align: right;
}

#changes table.summary-table.change tr:first-child :not(:first-child) {
	width: calc(calc(100% - var(--col-1-wid)) / var(--n-grade-cols));
}

#changes table.summary-table.change td {
	padding: 0;
}

#changes table.summary-table td[grade] {
	font-family: "Luckiest Guy", serif;
	font-size: 3.5vh;
}

#changes table.summary-table.change tr :nth-child(n + 2) {
	padding: 0 0 5px 5px;
}


#changes table.summary-table.change tr:not(:last-child) {
	border-bottom: var(--period-thin-border);
}

#changes table.summary-table.change tr:first-child {
	border-bottom: 1px solid black;
}

#changes table.summary-table.change tr :nth-child(2) {
	border-left: 1px solid black;
}

#changes table.summary-table.change tr :nth-child(n + 3) {
	border-left: var(--period-thin-border);
}



#changes .pane-2 .contents {
	width: inherit;
	height: inherit;
	padding: 0 var(--padding-lr) 2vh var(--padding-lr);
}

@media screen and (max-width: 1000px) {
	#changes .sect-1 .title-bar .right-items {
		position: static;
		width: 100%;
		text-align: right;
	}
}

@media screen and (max-width: 750px) {
	#changes .info-tables .entry {
		width: 100%;
	}
	
	#changes .info-tables .entry:nth-child(2n) {
		margin-top: 2vh;
	}
	
	#changes .info-tables .entry td {
		font-size: 0.75em !important;
	}

	#changes table svg {
		height: 4vh;
	}
}