:root {
	--lighterthanBG: #c2dffd;
	--backgroundColour: #3e76d1;
	--darkerThanBG: #a7c5e6;
	--articleBG: #ffffff;
    --textColour: rgb(24 25 64);
	--mainFont: 'Hind Siliguri','STIX Two Math','Inter','inter','Roboto', sans-serif;
	--paddingAmount: clamp(15px,3vw,40px);
	--darkerThanHighlight: #085a9c;
	--highlightColour: #468cc7;
	--lighterThanHighlight: #549dda;
	--borderRad: 3px;
	--columnWidth: 850px;
	--mainFontSize: clamp(0.9rem, 2vw, 1rem);
}

::selection {
	background: rgb(255, 147, 147);
	color: rgb(13, 46, 88); 
	border-radius: var(--borderRad);
}


/* width */
/* ::-webkit-scrollbar {
	width: 14px;
} */
  
/* Track */
/* ::-webkit-scrollbar-track {
	background: var(--darkerThanBG); 
} */
   
/* Handle */
/* ::-webkit-scrollbar-thumb {
	background: var(--backgroundColour); 
	border-radius: calc(var(--borderRad) + 1px);
	border: 1px solid var(--darkerThanBG); 
	transition: all 0.1s;
} */
  
/* Handle on hover */
/* ::-webkit-scrollbar-thumb:hover {
	background: var(--lighterthanBG); 
	transition: all 0.1s;
} */

html, body {
	margin: 0;
	padding: 0;
	font-family: var(--mainFont);
	background-color: var(--backgroundColour);
	color: var(--textColour);
	width: 100%;
	position: absolute;
	scroll-behavior: smooth;
}

div {
	width: 100%;
	scroll-behavior: smooth;
	box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, hr, p, img, button, input[type="submit"] {
	margin-block-start: 0px;
    margin-block-end: 0px;
}

h1 {
	/* this is done so that it is displayed above the grain texture */
	position: relative;
    z-index: 1;
}

button,input[type="submit"] {
	padding: 5px 20px;
	border:none;
	font-family: var(--mainFont);
	cursor: pointer;
	min-height: 50px;
	min-width: 50px;
	border-radius: var(--borderRad);
    background-color: var(--highlightColour);
    color: var(--textColour);
    font-size: var(--mainFontSize);
    box-shadow: 0px 4px #414963;
	position: relative;
	top: 0px;
	transition: all 0.1s;
}

a {
	cursor: pointer;
}

button:hover,input[type="submit"]:hover {
	--moveAmount: 3px;
	box-shadow: 0px calc(4px - var(--moveAmount)) #414963;
	position: relative;
	top: var(--moveAmount);
	background-color: var(--lighterThanHighlight);
	transition: all 0.1s;
}

p {
	line-height: clamp(1.2rem, 2vw, 1.6rem);
	font-size: var(--mainFontSize);
	/* margin-bottom: var(--paddingAmount); */
	width: 100%;
}

label {
	font-size: var(--mainFontSize);
}

span {
	display: inline-block;
	vertical-align: top;
}

hr {
	height: 1px;
	width: 100%;
	background-color: grey;
	border: 0px;
}

/*these refer to the oED placeholder text in the search bar*/
input::-webkit-input-placeholder {
	color: var(--fadedText);
}
input:-moz-placeholder {
	color: var(--fadedText);
}
input::-moz-placeholder {
	color: var(--fadedText);
}
input:-ms-input-placeholder {
	color: var(--fadedText);
}

/* -------------------------------------------------------------------------------- */

ul {
    width: 100%;
}

h1 {
	text-align: center;
	color: white;
	font-family: 'Abril Fatface';
	font-size: 4em;
	font-weight: 400;
	width: 100%;
    max-width: calc(700px + var(--paddingAmount));
}

h2 {
	font-family: 'Inter';
    font-weight: 800;
	/* make its default a little larger than the  */
    font-size: clamp(1.1rem, 2.5vw, 2rem);
    /* border-bottom: 1px solid var(--lighterThanHighlight); */
	text-decoration: underline;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    text-decoration-color: var(--lighterThanHighlight);
	color: rgb(33 35 115);
	text-align: center;
}

h3 {
	font-family: 'Inter';
	/* font-style: italic; */
	text-transform: capitalize;
	font-size: 1.1em;
	margin-block-end: 0px;
    justify-self: left;
	font-weight: 600;
    border-bottom: 1px solid #c9e8e8;
    background-color: #eaf9f9;
    color: var(--darkerThanHighlight);
    /* padding: 6px 10px; */
	padding: calc(0.25 * var(--paddingAmount)) calc(0.5 * var(--paddingAmount));
    border-radius: var(--borderRad);
	/* this allows for the section headings to float out to the left of the articles when there is space
		and otherwise stay tucked inside when there isn't (e.g. on mobile) */
    /* margin-left: clamp(calc(-1.5 * var(--paddingAmount)), calc(-1 * calc(100vw - 750px)), calc(-0.5 * var(--paddingAmount))); */
	margin-left: calc(-0.5 * var(--paddingAmount));
	display: inline-block;
	margin-top: var(--paddingAmount);
}

.unitGrade {
	margin: 10px;
    font-style: normal;
    color: #089c9c;
    background-color: #dff1d4;
    border-radius: 159px;
    padding: 6px 14px;
}

article, .columnElement, .blogPostContainer {
	background-color: var(--articleBG);
	padding: calc(var(--paddingAmount) * 1.1) var(--paddingAmount);
	max-width: var(--columnWidth);
	/* expand all elements to fill the largest space they can */
	width: 100%;
	border-radius: var(--borderRad);
	/* margin-bottom: clamp(var(--paddingAmount), 2vw, calc(var(--paddingAmount) * 4)); */
	position: relative;
	z-index: 1;
	/* this adds padding at the top when automatically scrolling to an element */
	scroll-margin-top: var(--paddingAmount);
	box-sizing: border-box;
}

.horizontalColumn {
	gap: clamp(5px, 2vw, 20px);
}

.briefSummary { 
	margin-bottom: 0px;
}

img, iframe {
	--imgPadding: 5px;
	max-width: clamp(0px, calc(100% - 1 * var(--imgPadding)), 500px);
	height: auto;
	/* this allows the images to load at a fixed height so that they dont move when the page is loading */
	max-height: 285px;
	/* max-width: 500px; */
	border-radius: var(--borderRad);
    border: 1px solid #e6eff5;
    padding: var(--imgPadding);
	/* margin-bottom: var(--paddingAmount); */
}

img {
	width: auto;
}

iframe {
	aspect-ratio: 560 / 315 !important;
}

a {
	color: var(--darkerThanHighlight);
	transition: all 0.05s;
}

a:hover {
	color: var(--highlightColour);
	transition: all 0.05s;
}

.imgSummary {
	color: #d3dfe2;
    position: relative;
    top: calc(-0.3 * var(--paddingAmount));
	margin-bottom: 0px;
	text-align: center;
} 

.radioInput {
	margin: 0px var(--paddingAmount);
}

#leftSlideoutPanel {
	box-shadow: 1px 1px 20px #004e8347;
}

#leftSlideoutPanel::-webkit-scrollbar{
    display: none;
}

.slideoutMenuItem {
	display: block;
	background-color: #ffffff2b;
    /* padding: 5px 0px; */
    margin: 10px 0px;
    color: var(--textColour);
    text-decoration: none;
    font-size: 24px;
    border-radius: 5px;
    /* box-shadow: 4px 3px 20px #6fc3eb47; */
	/* font-family: 'Cormorant Garamond'; */
}

.centeredContents {
	display: grid;
    place-items: center;
}

.FilterableListItem {
	display: grid;
    place-items: start;
}

.moreButton {
	margin-bottom:  var(--paddingAmount); 
	width: 100%;
    max-width: 250px;
	background-color: #d9f2f9;
	box-shadow: 0px 4px #9acded;
}

.moreButton:hover {
	background-color: #c0e5ef;
	box-shadow: 0px calc(4px - var(--moveAmount)) #468cc7;
}

.articleTagContainer {
	display: flex;
    gap: calc(var(--paddingAmount) / 2);
    flex-wrap: wrap;
}

.articleTag {
	padding: 3px 7px;
    background-color: #d9f2f9;
    border-radius: 5px;
    color: #468cc7;
    cursor: pointer;
	font-size: var(--mainFontSize);
}

/* .uniTopicHeader {
	margin-bottom: 60px;
} */

.uniLinks {
    font-weight: 800;
    font-size: 1.8em;
}

.bumpOnHover {
	transition: all 200ms;
}
.bumpOnHover:hover {
	transform: translate(5px, 0px);
	transition: all 200ms;
}


/* the slideout panel lives in a span so not() here prevents that from being given padding also */
#mainBody > :not(#leftSlideoutPanel, span) {
	padding:clamp(3px,2vw,var(--paddingAmount));
}

/* this feels like a bit of a hack, but this is the only way to get the gap nice and tight on mobile
while also feeling spacious on desktop */
/* the width of 470 is very carefully selected to work along with the dimensions of the masonry layout 
so don't change unless you're changing all of them */
@media screen and (max-width:470px) {
	.JTML_Masonry_Container {
		grid-gap: 3px;
	}

	/* the slideout panel lives in a span so not() here prevents that from being given padding also */
	#mainBody > :not(#leftSlideoutPanel, span) {
		padding: 3px;
	}
}