/* Set custom font as default. */
body {
    font-family: "Philosopher", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Prefer the headings to be larger. */
h1 {
    font-size: 3.5rem;
}

/* Make the carousel container take up the desired height. */
.carousel {
    height: 78vh;
}

/* Medium size screens: shrink the image a bit to fit
 * the text without scrolling. */
@media (min-width: 544px) and (max-width: 1400px) {
	.carousel {
		height: 67vh;
	}
}

/* Make the inner div and items take up the full container height. */
.carousel > .carousel-inner {
    height: 100%;
}
.carousel > .carousel-inner > .carousel-item {
	height: 100%;
}

/* Style the images. */
.carousel > .carousel-inner > .carousel-item img {
	/* Needs to fill the height. */
	height: 100%;

	/* And be at least the width of the container. */
	min-width: 100%;

	/* Scale the image so the shorter dimension fits, then crop the longer
	 * dimension. */
	object-fit: cover;

	/* Centre of the image in the centre of the container (i.e., trim the
	 * top and bottom equally). */
	object-position: center;

	/* IE and Edge don't support either object-fit or object-position, and
	 * Safari < 10 doesn't support object-position. We have a polyfill, but
	 * need to specify the settings for it. */
	font-family: "object-fit: cover; object-position: center;"
}

/* Custom cropping of particular images: trim the top only. */
.carousel > .carousel-inner > .slide1 img, .carousel > .carousel-inner > .slide2 img {
	object-position: bottom;
	font-family: "object-fit: cover; object-position: bottom;"
}

.carousel-caption {
    /* Place a semi-transparent black bar behind the caption to increase the
     * contrast.  First, a simple one-colour background for any browsers which
     * don't support a gradient... */
    background: rgba(0, 0, 0, 0.5);

    /* And then a version with a gradient at the top for a less jarring merge
     * into the unshaded image. */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.5));

    /* Cover the full width of the carousel with no margin. */
    width: 100%;
    right: 0;
    left: 0;
    bottom: 0;

    /* Make sure the text is above the indicators. */
    padding-bottom: calc(1rem + 6px);
}

/* Move the indicators to the bottom. */
ol.carousel-indicators {
	bottom: 0;
	margin-bottom: 0.5rem;
}

/* Vertically centre the next/previous controls. */
.carousel-control {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 8%;
}

/* Set the size of the arrows. */
.carousel-control > span.fa {
	font-size: 2rem;
}

/* List styling. */
ul {
	display: table;
	margin: -1rem auto 0;
	text-align: left;
}