@font-face {
  font-family: 'BabelStoneCoelbren';
  src: url('fonts/BabelStoneCoelbren.woff2') format('woff2'),
       url('fonts/BabelStoneCoelbren.ttf') format('truetype');
}

body {
  color: #cccccc;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 300;
  letter-spacing: 0.02em;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8); 
  background-color: #050505;
  background-image: url("https://www.transparenttextures.com/patterns/black-paper.png");
  background-attachment: fixed;
  margin: 0;
}

.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 95%;
    margin: 0 auto;
    background: transparent;
    margin: 60px auto 0px auto;
}

h2 .coelbren {
    font-family: 'BabelStoneCoelbren';
    text-align: center;
    letter-spacing: 15px;
    font-size: 0.7rem;
    color: #ffffff;
    display: block;
    margin-top: -59px;
    margin-left: 53px;
    opacity: 0.25;
}



.logo-window {
    width: 100%;
    max-width: 450px; /* Limits the logo size on desktop */
    height: 85px;    /* ADJUST THIS: The height of the visible text */
    margin: 0 auto;
    overflow: hidden; /* This "clips" anything outside the 180px height */
    display: flex;
    margin-bottom: 20px;
    align-items: center; /* Centers the text vertically in the window */
    justify-content: center;
}

.logo-img {
    width: 100%;
    height: auto;
    display: block;
    
    /* Optimized for your specific 'BecauseBrute' off-white image */
    /*filter: invert(28%) sepia(85%) saturate(2421%) hue-rotate(358deg) brightness(95%) contrast(105%);*/
    /*filter: invert(55%) sepia(33%) saturate(770%) hue-rotate(357deg) brightness(.77) contrast(27);
    
    transition: filter 0.3s ease;*/
    /* If the image has baked-in empty space, we can "nudge" it: */
    margin-left: 13px; 
}