@import url("./assets/css/rain.css");
@import url("./assets/css/curtain.css");
@import url("./assets/css/bubbles.css");
@import url("./assets/css/wave_text.css");
@import url("./assets/css/profile_card.css");
@import url("./assets/css/footer.css");
@import url("./assets/css/book.css");

:root {
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #124265; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #2487ce; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --contrast-color: #ffffff;
  --light-blue: #f6fafd; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* Ocean gradient from deep blue to light blue */
  background: linear-gradient(to bottom, #66ccff, #0099cc, #006699, #003366);
  min-height: 100vh;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
}

.light-background {
  --background-color: var(--light-blue);
}

.bg-blue {
  background-color: #e3f2fd;
}

.bg-dark-blue {
  background-color: var(--accent-color);
  color: var(--default-color);
}

#viewDiv {
  height: 100%;
  width: 100%;
  min-height: 85vh;
}

@media (min-width: 1600px) {
  .container-xxl {
    max-width: 1560px;
  }
}

.my-video-box{
  height: 100vh;
  width: 100vw;
  position: absolute;
  top:0;
}

.my-video{
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: opacity 1s ease-out;
}

/* Fade-in effect for the content */
.content {
  opacity: 0;
  transition: opacity 1s ease-in;
}

/* Show content after fade-in */
.content.show {
  opacity: 1;
}