* {
   /* Activate this to see a red border around ALL elements */
   /* border: 1px solid red; */ 
}

@font-face {
  font-family: 'Directive Four';
  src: url('fonts/Directive Four.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/Directive Four.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/Directive Four.ttf')  format('truetype'); /* Safari, Android, iOS */
  font-weight: normal;
  font-style: normal;
  font-size: 16px;
}

html, body {
  background-color:#000000;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Directive Four', 'Arial', sans-serif; /* primary, fallback, style */
  overflow-x: hidden; /* Prevent horizontal scroll */
  overscroll-behavior: none;
}

/* Top-level container for all elements */
.datapad-container {
  display: flex; /* Establishes a flex container */
  flex-direction: column; /* Stacks items vertically */
  justify-content: center; /* Centers content vertically within the container */
  min-height: 100vh; /* Uses viewport height units */
  /* height: 100vh; Example: container fills the full viewport height */
}

/* Container that places elements vertically */
.datapad-stack_vert {
  display: flex; /* Establishes a flex container */
  flex-direction: column; /* Stacks items vertically */
  justify-content: center; /* Centers content vertically within the container */
  align-items: center; /* Centers content horizontally within the container */
  margin: 0;
  padding: 0;
  line-height: 0; /* removes padding from divs */
}

/* Container that places elements horizontally */
.datapad-stack_horz {
  display: flex; /* Establishes a flex container */
  justify-content: center; /* Centers content vertically within the container */
  align-items: center; /* Centers content horizontally within the container */
  margin: 0;
  padding: 0;
  line-height: 0; /* removes padding from divs */
  /* z-index: 3;  Higher z-index places it on top */
}

.layer {
    position: absolute; /* Allows precise positioning within the container */
    top: 0;  /* Positions the top edge at the top of the container */
    left: 0;  /* Positions the left edge at the left of the container */
}

/* Container for the entirety of the main header area on all pages */
/* Needed for overlay items (aka Back button) in the Comms header area */
.header-full_container {
  position: relative;
  width: 360px;
  height: 46px;
}

/* Container for the entirety of the date buttons area */
.events-dates_container {
  position: relative;
  width: 360px;
  height: 31px;
}

/* Container for the events list area */
.events-list_container {
  position: relative;
  width: 322px;
  height: 491px;
}

/* Container for the entirety of the main datapad content area */
.body-full_container {
  position: relative;
  width: 322px;
  height: 514px; /* Required: sets the visible height of the container */
  overflow-y: auto; /* Adds a vertical scrollbar only when content overflows */
  overflow-x: hidden; /* Never adds a hoizontal scrollbar only when content overflows */
  -webkit-overflow-scrolling: touch; /* Provides smooth, native-feeling scrolling on iOS */
}

/* Container for the entirety of the datapad events content area */
.body-events_container {
  position: relative;
  width: 322px;
  height: 491px; /* Required: sets the visible height of the container */
  overflow-y: auto; /* Adds a vertical scrollbar only when content overflows */
  overflow-x: hidden; /* Never adds a hoizontal scrollbar only when content overflows */
  -webkit-overflow-scrolling: touch; /* Provides smooth, native-feeling scrolling on iOS */
}

/* Container for the entirety of the datapad comms chat area */
.body-comms_chat_container {
  position: relative;
  width: 322px;
  height: 429px; /* Required: sets the visible height of the container */
  overflow-y: auto; /* Adds a vertical scrollbar only when content overflows */
  overflow-x: hidden; /* Never adds a hoizontal scrollbar only when content overflows */
  -webkit-overflow-scrolling: touch; /* Provides smooth, native-feeling scrolling on iOS */
}

/* Attributes for the lowest layer in the main datapad content area */
/* Bottom layer locked-position JPG frame graphics */
.body-layer_1 {
  position: -webkit-sticky; /* For Safari support */
  position: sticky;
  top: 0; /* The element will stick to the top edge of its parent when it reaches this offset */
  z-index: 1; /* Higher z-index places it on top */
}

/* Attributes for the highest layer in the main datapad content area */
/* Top layer locked position PNG frame graphics */
.body-layer_4_top {
  position: -webkit-sticky; /* For Safari support */
  position: sticky;
  top: 0; /* The element will stick to the top edge of its parent when it reaches this offset */
  z-index: 4; /* Higher z-index places it on top */
  pointer-events: none; /* Allows clicks to pass through this element */
}

/* Attributes for the highest layer in the main datapad content area */
/* Top layer locked position PNG frame graphics */
.body-layer_4_bottom {
  position: -webkit-sticky; /* For Safari support */
  position: sticky; 
  align-items: flex-start;
  bottom: 0; /* The element will stick to the bottom edge of its parent when it reaches this offset */
  z-index: 4; /* Higher z-index places it on top */
  pointer-events: none; /* Allows clicks to pass through this element */
}

.body-layer_2 {
  z-index: 2; /* Higher z-index places it on top */
}

.body-layer_3 {
  z-index: 3; /* Higher z-index places it on top */
}

/* Define the keyframes for the fade-in effect */
@keyframes fadeInOut {
  0% {opacity: 0;}
  25% {opacity: 1;}
  75% {opacity: 1;}
  100% {opacity: 0;}
}

/* Define the keyframes for the fade-in effect */
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

/* Attributes for the main startup logo */
.body-startup_overlay {
  z-index: 2; /* Higher z-index places it on top */
  opacity: 0; /* Ensures the element is hidden before the delay starts */
  animation-name: fadeInOut;
  animation-duration: 5s; /* Duration of the fade effect */
  animation-delay: 1s; /* Delay before the animation begins (e.g., 1 second) */
  animation-fill-mode: forwards; /* Important: Retains the final state (opacity: 0) */
  animation-timing-function: ease;   /* Optional: Add a timing function (e.g., ease-out) */
}

/* Attributes for the comms list - WITH ANIMATION */
.body-comms_list {
  /* animation delay must be set upon call */
  z-index: 2; /* Higher z-index places it on top */
  padding-bottom: 4px;
  line-height: 1.25; /* required to avoid text lines wrapping upon itself */
  opacity: 0; /* Ensures the element is hidden before the delay starts */
  animation-name: fadeIn;
  animation-duration: 1s; /* Duration of the fade effect */
  animation-fill-mode: forwards; /* Important: Retains the final state (opacity: 0) */
  animation-timing-function: ease;   /* Optional: Add a timing function (e.g., ease-out) */
}

/* Attributes for the comms list - NO ANIMATION */
.body-comms_list-2 {
  /* top & animation delay must be set upon call */
  z-index: 2; /* Higher z-index places it on top */
  padding-top: 4px;
  line-height: 1.25; /* required to avoid wrapping upon itself */
}

/* Attributes for the comms chat - WITH ANIMATION */
.body-comms_chat {
  /* color & animation delay must be set upon call */
  z-index: 2; /* Higher z-index places it on top */
  width: 300px;
  padding-left: 10px;
  line-height: 1.25; /* required to avoid text lines wrapping upon itself */
  opacity: 0; /* Ensures the element is hidden before the delay starts */
  animation-name: fadeIn;
  animation-duration: 1s; /* Duration of the fade effect */
  animation-fill-mode: forwards; /* Important: Retains the final state (opacity: 0) */
  animation-timing-function: ease;   /* Optional: Add a timing function (e.g., ease-out) */
}

/* Attributes for the comms chat - NO ANIMATION */
.body-comms_chat-2 {
  /* color & animation delay must be set upon call */
  z-index: 2; /* Higher z-index places it on top */
  width: 300px;
  padding-left: 10px;
  line-height: 1.25; /* required to avoid wrapping upon itself */
}

/* Attributes for separator images in the comms chat */
.chat_sepatator {
	padding-top: 4px;
	padding-bottom: 4px;
}

/* Attributes for the categories row */
.categories (
  position: absolute; /* Allows precise positioning within the container */
  top: 0;
  left: 0;
  z-index: 4; /* Higher z-index places it on top */
}