@font-face {
  font-family: 'Orbi';
  src: url('orbi_bold.woff2') format('woff2'),
    url('orbi_bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Plex Regular';
  src: url('./IBMPlexSans-Regular.woff2') format('woff2'),
    url('./IBMPlexSans-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Plex Medium';
  src: url('./IBMPlexSans-Medium.woff2') format('woff2'),
    url('./IBMPlexSans-Medium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
/* reset margins and padding */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Ensure the video fills the entire viewport */
#background-video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
object-fit: cover;
overflow: hidden;
z-index: -1;
}
/* Ensure the video fills the entire viewport */
#mobile-background-video {
display: none;
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
object-fit: cover;
overflow: hidden;
z-index: -1;
}

@media (max-width: 768px) {
  #background-video {
    display: none;
  }
  #mobile-background-video {
    display: block;
  }
}


body {
font-size: 18px; /* Base font size */
line-height: 1.6; /* Space between lines */
padding: 20px;
display: flex;
justify-content: center;
font-family: 'Plex Regular', sans-serif;
}

/* Optionally, make the background slightly darker */
/*
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 0;
}
*/

/* Center content over the video */
.content {
z-index: 1;
color: white;
}


/* Container to center the content and limit the width */
.content-wrapper {
max-width: 800px; /* Limit the width for readability */
width: 100%;
padding: 40px; /* Padding for breathing space around the text */
}

/* Heading styles */
h1, h2, h3 {
margin-bottom: 20px;
line-height: 1.2;
}

h1 {
font-size: 48px;
font-family: 'Orbi', serif;
}

h2 {
font-size: 28px;
}

h3 {
font-size: 18px;
}

/* Paragraph styles */
p {
margin-bottom: 20px;
text-align: justify;
}

/* Styling for blockquotes or highlighted text */
blockquote {
font-style: italic;
background-color: #f0f0f0;
padding: 10px;
margin: 20px 0;
border-left: 4px solid #ccc;
}

/* Links */
a {
color: white; /* Blue for links */
text-decoration: none;
font-family: 'Plex Medium', sans-serif;
text-decoration: underline;
}

a:hover {
}

/* Mobile responsiveness */
@media (max-width: 768px) {
body {
padding: 10px;
}

.content-wrapper {
padding: 20px;
}

h1 {
font-size: 28px;
}

h2 {
font-size: 24px;
}

h3 {
font-size: 20px;
}

body, html {
height: 100%;
}

h1 {
  font-size: 4em;
}
}