body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  background: #222;
}

header, footer {
  background: #000;
  color: #fff;
  padding: 1rem;
  text-align: center; /* optional, to center inline items */
}

main {
    background: #222;
    color: #fee;
}

nav a {
	color: #ccf;
	font-weight: 800;
    margin-right: 1rem;
    text-decoration: none;
}

.container {
  max-width: 960px;  /* or 800px if you want narrower */
  margin: auto;    /* centers it */
  padding: 1rem;     /* keeps content from touching edges */
  text-align: center; /* optional, to center inline items */
}

.grid-layout {
  display: grid;
  grid-template-columns: 2fr 1fr; /* two columns, left bigger than right */
  gap: 20px; /* space between columns */
  max-width: 960px;
  margin: 0 auto;
}

.image800 {
     width: 100%;
     max-width: 800px;
 }
 
.image250 {
     width:100%;
     max-width:250px;
 }
 
/* Set your aspect ratio */
.video-container {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-bottom: 56.25%; /* creates a 16:9 aspect ratio */
}

.video-container iframe,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  margin: auto;
}

/* And set the max-width of the parent element */
.video-wrap {
  width: 100%;
  max-width: 560px;
  margin: auto;
}