/* Import Roboto font */
  @import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');

  html, body {
    height: 100%;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    color: #f2f2f2;
    line-height: 1.7;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    position: relative;
    overflow-x: hidden;
  }

  /* Background wrapper with blur and filter overlay */
  #background-wrapper {
    position: fixed;
    inset: 0; /* shorthand for top/right/bottom/left:0 */
    background: url(/images/sc-bg.png) center center / cover no-repeat fixed;
    z-index: -2;
  }
  #background-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4); /* dark translucent overlay */
    backdrop-filter: blur(5px) saturate(120%);
    -webkit-backdrop-filter: blur(5px) saturate(120%);
    z-index: -1;
  }

  #name {
    position: relative;
    max-width: 900px;
    margin: 1rem auto 1rem auto;
    text-align: center;
    z-index: 5;
    width: 100%;
  }

  #name img {
    display: block;
    margin: 0 auto 0 auto;
    max-width: 800px;
    width: 100%; /* responsive */
    height: auto;
  }

  .title-split {
    display: flex;
    justify-content: space-between;
    max-width: 750px;
    width: 100%;
    margin: 0 auto -1rem auto;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    font-size: clamp(1.5rem, 5vw, 3rem);
    gap: 0.5rem;
    box-sizing: border-box;
  }

  .navigation {
    margin-top: 0;
    gap: 0.25rem;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 900px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 1rem;
    box-sizing: border-box;
  }

  .navigation a {
    font-size: clamp(1rem, 4vw, 1.8rem);
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    font-style: italic;
  }

  .nav-dash {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @media (max-width: 767.98px) {
    .navigation {
      flex-wrap: nowrap !important;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding-left: 1rem;
      padding-right: 1rem;
    }

    .nav-dash {
      display: none;
    }

    .navigation a {
      white-space: nowrap;
    }
    
    #background-wrapper {
      background:url(/images/sc-bg-mobile.png)no-repeat fixed;
    background-position: 35% top !important; /* crop from top */
    background-size: cover !important; 
  }
  }
  
.external-links a{
  color: #fff;
  }