@font-face {
font-family: 'Century Gothic Paneuropean';
src: url('/assets/CenturyGothicPaneuropeanLight.ttf') format('ttf');
font-weight: 300;
font-style: normal;
}

@font-face {
font-family: 'Century Gothic Paneuropean';
src: url('/assets/CenturyGothicPaneuropeanRegular.ttf') format('ttf');
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: 'Century Gothic Paneuropean';
src: url('/assets/CenturyGothicPaneuropeanSemiBold.ttf') format('ttf');
font-weight: 600;
font-style: normal;
}

@font-face {
font-family: 'Century Gothic Paneuropean';
src: url('/assets/CenturyGothicPaneuropeanBold.ttf') format('ttf');
font-weight: 700;
font-style: normal;
}

@font-face {
font-family: 'Times New Roman';
src: url('/assets/times.ttf') format('ttf');
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: 'Roboto';
src: url('/assets/roboto/Roboto-Thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}

@font-face {
font-family: 'Roboto';
src: url('/assets/roboto/Roboto-ExtraLight.ttf') format('truetype');
font-weight: 200;
font-style: normal;
}

@font-face {
font-family: 'Roboto';
src: url('/assets/roboto/Roboto-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}

@font-face {
font-family: 'Roboto';
src: url('/assets/roboto/Roboto-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}

body {
background: linear-gradient(90deg, #050505, #151515, #000000);
color: #ffffff;
font-family: sans-serif;
line-height: 1.;
padding-top: 5rem;
}

strong, b, h1, h2, h3, h4, h5, h6 {
font-family: 'Century Gothic Paneuropean', sans-serif;
}

.gradient-text {
background: linear-gradient(0deg, #806000,#ffcf40,#806000,#bf8f00,#806000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text; /* for Firefox */
color: transparent;  /* fallback */
}

.navbar {
padding-top: 1.25rem;
transition: box-shadow 0.2s ease-in-out;
}

.navbar.scroll-shadow {
box-shadow: 0 0.2rem 0.5em rgba(0, 0, 0, 0.5);
}

.navbar-brand,
.nav-link {
color: #ffffff;
}

.navbar-nav .nav-link {
font-size: 1rem;
padding-bottom: 0.75rem;
}

.table-striped tbody tr:nth-of-type(odd) {
background-color: #222222;
}

.table-striped tbody tr:nth-of-type(even) {
background-color: #333333;
}

footer {
background: linear-gradient(90deg, #111111, #222222, #070707);
padding: 2rem;
display: flex;
flex-direction: column;
}

footer img {
width: 5rem;
margin-bottom: 1rem;
}

footer p {
font-family: sans-serif !important;
font-weight: 200 !important;
margin: 0;
padding: 0;
font-size: 1rem;
}

.main-content {
background: linear-gradient(90deg, #151515, #111111, #151515);
box-shadow: 0 0.2rem 0.5em rgba(0, 0, 0, 0.5);
flex-grow: 1;
width: 50rem;
margin: 0 auto;
padding: 3rem;
overflow-y: auto;
min-height: 100vh;
}

.main-content img {
width: 45rem;
height: 100%;
}
h2 {
margin: 0 auto;
color: #ffcf40;
}

h3 {
color: #ffcf40;
}

p {
font-family: 'Times New Roman';
font-size: 1.25rem;
color: rgb(220, 220, 220);
}

ul {
font-family: 'Times New Roman';
color: rgb(220,220,220);
font-size: 1.25rem;
}

#byline {
font-size: 1rem;
font-family: 'Roboto';
font-weight: 300;
color: rgb(179, 179, 179);
}

figcaption {
text-align:left;
font-style: italic;
margin-top:0.5em;
color: rgb(179,179,179);
font-size: 0.75rem;
font-family: 'Roboto';
font-weight: 300;
}

.link {
color: #ffcf40;
background-color: transparent;
}

.link:hover {
color: #bf8f00;
background-color: transparent;
}

html {
scroll-behavior: smooth;
}

h3[id] {
scroll-margin-top: 7rem;
}

h2[id] {
scroll-margin-top: 7rem;
}

#backToTop {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 999;
background-color: #ffcf40;
color: #000;
border: none;
border-radius: 20%;
padding: 0.75rem;
font-size: 1.25rem;
cursor: pointer;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.3);
display: none; /* hidden by default */
transition: opacity 0.3s ease;
}

#backToTop:hover {
background-color: #e0b030;
}

#backToTop i {
font-size: 1.2rem;
}

h1 {
color: #ffcf40;
}

/* === Responsive Breakpoints === */

/* For tablets and smaller laptops */
@media (max-width: 1024px) {
    .main-content {
      width: 100%;
      padding: 2rem 1rem;
    }
  
    h1 {
      font-size: 2.5rem;
    }
  
    .navbar-brand img {
      height: 2.75rem;
    }
  }
  
  /* For mobile devices */
  @media (max-width: 768px) {
    body {
      padding-top: 5rem;
    }
  
    h1 {
      font-size: 2rem;
    }
  
    .main-content {
      padding: 2rem 1rem;
      width: 100%;
    }
  
    footer {
      align-items: center;
      text-align: center;
    }
  
    footer img {
      width: 4rem;
    }
  
    .navbar-brand img {
      height: 2.5rem;
      padding-left: 0;
    }
  
    .navbar-toggler i {
      font-size: 1.25rem;
      color: #ffffff;
    }
  
    .row > div[class*="col-"] {
      margin-bottom: 2rem;
    }
  }
  
  /* Optional tweaks for extra small screens */
  @media (max-width: 576px) {
    h1 {
      font-size: 2rem;
      padding-top: 0;
    }

    body {
      padding-top: 5rem;
      font-size: 1.1rem;
    }
  
    .navbar-nav .nav-link {
      font-size: 0.9
    }

    footer {
      padding: 1rem;
    }

    footer p {
      font-size: 0.75rem;
    }

    footer img {
      width: 3rem;
      margin-bottom: 0.5rem;
    }
  }