/* Set box-sizing property to border-box for all elements to include padding and border in total width and height */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Set font and background colour for body */
body {
	font-family: 'Poppins', sans-serif;
	background-color: #ffffff;
}

/* Sets font colour, padding, and display properties for header */
.header {
	color: #000000;
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Set maximum width, margin, display, flex-wrap, justify-content, align-items, and padding properties for container */
.container {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding: 50px;
}

/* Set position, width, and margin properties for video-box */
.video-box {
	position: relative;
	width: 90%;
	margin: 20px;
}

/* Set width property for video */
video {
	width: 100%;
    margin-bottom: 10px; /* so that the caption doesn't overlap */
}

/* Set position, padding, font colour, font size, font weight, and text-align properties for caption */
.caption {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 10px;
	color: #000000;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
    height: 10px; /* set the height to avoid overlapping with the video */
}

/* Set height, display, justify-content, and align-items properties for nav */
nav {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /* Set list-style, margin, padding, and display properties for nav ul */
  nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
  }
  
  /* Set display, padding, colour, text-decoration, font-size, font-weight, text-transform, and transition properties for nav ul a */
  nav ul a {
    display: block;
    padding: 0 20px;
    color: #333;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.2s ease-in-out;
  }
  
  /* Set background colour and font colour properties for nav ul a:hover */
  nav ul a:hover {
    background-color: #333;
    color: #f5f5f5;
  }