/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
.bbh-bartle-regular {
  font-family: "BBH Bartle", sans-serif;
  font-weight: 400;
  font-style: normal;
}

body {
  background-color: black;
  color:white;
}

.BIG-container {
  border: 5px dotted red;
  max-width: fit-content;
  width: 1200px;
  display: block;
    margin-left: auto;
    margin-right: auto;
  }
h1 {
  color:white;
  font-family:BBH Bartle;
  font-size: 100px;
  margin:0px;
  }


/* Style the top navigation bar */
nav {
  overflow: hidden;
  background-color:white;

  font-size:10px
}

/* Style the topnav links */
nav a {
  float: left;
  display: block;
  font-family:BBH Bartle;
  color:black;
  text-align: center;
  padding: 14px 25px;
  text-decoration: none;
  width:1000;
}

/* Change color on hover*/
nav a:hover {
  background-color:black;
  color: white;
}

.bigheadcontainer{
  position:relative;
}
.headcontainer {
  background-image: url('HEADERBG.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: 100% 100%;  
  }
  .overlay-image {
  position: absolute;
  top: -84px;      /* Distance from the top of the container */
  left: 500px;      /* Distance from the left of the container */
  width: 244px;     /* Set a custom size for your image */
  height: auto;
  z-index: 10;     /* Ensures the image stays on the top visual layer */
  poiunter-events: none;
  }

.container{
 display: grid;
 grid-template-columns: 33% 66%;
 background-color:black;

}
.box{
  padding:10px;
  margin:10px;
  background-color:grey

}