/* 1. Register the font */
/* --- MAIN FAMILY: Liar --- */
/* Normal */
@font-face {
    font-family: 'Liar';
    src: url('fonts/Liar-Normal.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* Normal Slanted */
@font-face {
    font-family: 'Liar';
    src: url('fonts/Liar-NormalSlanted.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
}

/* Bold */
@font-face {
    font-family: 'Liar';
    src: url('fonts/Liar-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

/* Bold Slanted */
@font-face {
    font-family: 'Liar';
    src: url('fonts/Liar-BoldSlanted.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
}

/* --- SPECIAL STYLE: Liar Halftone --- */

@font-face {
    font-family: 'Liar-Halftone';
    src: url('fonts/Liar-Halftone.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* --- MAIN FAMILY: Avenir Next --- */

@font-face {
    font-family: 'Avenir Next';
    src: url('fonts/AvenirNext-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* montserrat-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/montserrat-v31-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/montserrat-v31-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/montserrat-v31-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/montserrat-v31-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

body {
    background-color: #000000; /* Light grey background */
}

h1 {
    color: rgb(255, 255, 255);
    font-family: 'Liar', serif;
    font-weight: normal;
    font-style: normal;
    text-align: center;
    font-size: 50px;
}

h2 {
    color: rgb(85, 204, 255);
    font-family: 'Liar-Halftone', serif;
    font-weight: normal;
    font-style: normal;
    text-align: center;
    font-size: 30px;

}

h3 {
    font-size: 20px;
    text-align: center;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif; 
    font-weight: 700;

}


p {
    font-size: 20px;
    text-align: left;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif; 
    font-weight: 300;
   
}

/* small text */
.p2 { 
    font-size: 14px;
    text-align: center;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif; 
    font-weight: 300;
}


.fix-gap {
    /* This is exactly 40% of whatever the current font size is */
    /* This pushes the next letter to the right */
    margin-right: 0.4em; 
   
}

.container {
    width: 100%;           /* Take up full width */
    max-width: 800px;      /* But don't get wider than 800px on big monitors */
    margin: 0 auto;        /* Center the box on the screen */
    padding: 0 20px;       /* Adds 20px of "air" on the left/right so text doesn't touch the edge */
    box-sizing: border-box; /* Makes sure the padding doesn't push the box off-screen */
}

/* This forces long words to break instead of pushing the screen wide */
p, h1, h2, h3 {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.scroll-container {
  overflow: hidden;       /* Hides text when it goes off-screen */
  white-space: nowrap;    /* Prevents the text from wrapping to a new line */
  background: #000;       /* Optional: background color */
  padding: 1px 0;
}

.scrolling-text {
  display: inline-block;
  padding-left: 100%;     /* Starts the text just off the right edge */
  animation: scroll-left 15s linear infinite; /* 15s is the speed */

}

/* The actual movement logic */
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Responsive Video Wrapper */
.video-wrapper {
    width: 100%;           /* Fills the 800px container */
    aspect-ratio: 16 / 9;  /* Keeps the classic YouTube shape */
    margin: 20px 0;       /* Adds space above and below the video */
}

.video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;          /* Removes the default border */
}

.image-center {
    display: flex;
    justify-content: center; /* Centers the image horizontally */
    align-items: center;
    padding: 10px 0;         /* Adds some breathing room above/below */
}

.image-center img {
    max-width: 50%;         /* Ensures it doesn't break your 800px container */
    height: auto;            /* Keeps the proportions correct */
}