@font-face {
    font-family: 'Now';
    src: url('Now-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Now';
    src: url('Now-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Light.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

div.top-header{
  height:100px;
  background-color: black;
  background-image: url("first-cc.jpg");
  background-size: cover;
}
div.main-content{
  max-width: 50em;
  margin: auto;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 50px;
  padding-bottom: 50px;
}
div.main-content{
  font-family: 'Roboto', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Now', sans-serif;
}
h1::after {
  content: url('title_decor.svg');
  position: absolute;
  z-index: -1;
  display: block;
  margin-top: -10px;
  transform: scale(0.5);
  transform-origin: top left;
}
.top-header {
    height: 100px; /* Fixed height for the banner */
    width: 100%; /* Full width */
    background-color: #f5f5f5; /* Optional: Add a background color */
    display: flex; /* Flexbox to easily align items */
    align-items: center; /* Vertically center items in the banner */
    padding-left: 10px; /* Optional: Padding to give space on the left */
}

/* Style the logo */
.logo-link {
    display: block; /* Make the anchor block-level for easier styling */
    height: 100%; /* The anchor takes up the full height of the banner */
}

/* Ensure the logo scales down to fit within the banner's height */
.logo {
    height: 100px; /* Scale the logo to fit the banner height */
    width: auto; /* Maintain aspect ratio */
    max-height: 100%; /* Ensure the logo doesn’t exceed the banner height */
}

/* Hide "top" and "previous" spans */
#sitenav div span.navlink:nth-child(2){
  display:none;
}