@import url(reset.css);

:root {
    /* 2.1 Colours */
    --white-c: #ffffff;
    --lightgray-c:#E2E2E2;
    --medgray-c:#A2A2A2;
    --gray-c:#707070;
    --darkgray-c:#464545;
    --blue:#06aed5;
    --darkblue:#086788;
    --yellow:#f0c808;
    --cream:#fff1d0;
    --red:#dd1c1a;
    --green:#B0D300;


    /* 2.2 Font Sizes */
    --size-0:.4rem;
    --size-1:.8rem; /* 12 pt */
    --size-2:1rem; /* 14 pt */
    --size-3:1.2rem; /* 18 pt */
    --size-4:1.4rem; /* 22 pt */
    --size-5:1.8rem; /*24 pt */
}

body {
    margin: 0;
    padding: 0;
    overflow: hidden; /* Hide overflow to prevent scrolling */
}
header {
    background-color:#2c3e50;; /* Set background color for the header */
    color: white; /* Set text color */
    position: fixed; /* Fixed position */
    top: 0; /* Stick to the top */
    left: 0; /* Stick to the left */
    right: 0; /* Stick to the right */
    text-align: center; /* Center-align text */
    padding: 20px 0; /* Add padding for spacing */
    z-index: 2;
}

h1 {
    margin: 0; /* Remove default margin */
}


.index-bg {
   background-color: black;
   width: 200vh;
   height: 100vw;
}
.index-image {
    position: absolute;
    top: 50%; /* Position from top */
    left: 35%; /* Position from left */
    transform: translateY(-50%); /* Center vertically */
    width: 100vh; /* Set the width of the image */
    height: auto; /* Maintain aspect ratio */
    z-index: 1; /* Ensure image is above other content */
    opacity: 0; /* Initially hide the image */
    animation: floatAnimation 5s infinite alternate ease-in-out, fadeIn 5s forwards; /* Apply both animations */
}

@keyframes floatAnimation {
    0% {
        transform: translate(-50%, -50%) translateY(0);
    }
    100% {
        transform: translate(-50%, -50%) translateY(-20px);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
h1 {
    z-index: 2;
    font-size: 8vh;
    opacity: 0;
    animation: fadeIn 5s forwards;
    /* Gradient background for text */
    background-image: linear-gradient(45deg, #FFA500, #FFD700);
    -webkit-background-clip: text; /* For Safari */
    background-clip: text;
    color: transparent; /* Make the text transparent */
}


@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

nav {
    position: absolute; /* Set nav as absolute */
    bottom: 6vh; /* Adjust bottom position */
    right: 5vw; /* Adjust left position */
    color: white; /* Set nav text color */
    z-index: 2; /* Ensure nav appears above the image */
    font-size: 6vh;
    text-align: center;
    opacity: 0; /* Initially hide the nav */
    animation: fadeIn 7s forwards; /* Apply fade-in animation */
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
  /* Define transition for smooth scrolling */
  html {
    scroll-behavior: smooth;
}

/* Add hover effect on navigation links */
nav ul li a {
    transition: color 0.3s ease;
}

nav ul li a:hover {
    color: #ff5733; /* Change color to desired hover color */
}

nav li {
    list-style: none; /* Remove list bullets */
    margin-bottom: 10px; /* Add spacing between list items */
    padding: 10px;
}
nav li a {
    color: transparent; /* Make the text transparent */
    text-decoration: none; /* Remove underline */
    /* Gradient background for text */
    background-image: linear-gradient(45deg, #FF0000, #FFFF00); /* Red to Yellow gradient */
    -webkit-background-clip: text; /* For Safari */
    background-clip: text;
    font-family: 'Playfair Display', serif;
}

.bg-image img{
    width: 100vw;
}
.slideshow-container {
   /* Adjust the maximum width as needed */
    margin: 0 auto; /* Center the container */
    display: flex;
    flex-direction: column;
  align-items: center;
}
.slide {
    background-color: #06aed5;
    display: block;
}
.slide img {
    width: 500px; /* Keep the image size */
    height: 500px;
    position: absolute;
    top: 28%;
    left: 25%;
}
.text {
  position: absolute;
  top: 28%;
  right: 23%;
  max-width: 350px;
  }
h3{
    color:white;
    font-family: 'Libre Baskerville', serif;

}
  .prev,
  .next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: hwb(0 0% 100% / 0.502); /* Adjust as needed */
      border: none;
      color:white;
      padding: 20px;
      cursor: pointer;
      font-size: 18px;
      z-index: 999; /* Ensure buttons appear on top of other content */
  }

  .prev {
      left: 20%;
  }

  .next {
      right: 20%;
  }
  .pages-nav {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background-color: black;
    height: 100vh;
    padding: 10px;
}

.pages-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pages-nav li {
    margin-bottom: 10px;
}

.pages-nav li a {
    text-decoration: none;
    color:white;
    font-size: 18px;
}
footer {
    background-color: #333; /* Set background color */
    color: white; /* Set text color */
    text-align: center; /* Center-align text */
    padding: 20px 0; /* Add padding for spacing */
    position: fixed; /* Fixed position */
    bottom: 0; /* Stick to the bottom */
    left: 0; /* Stick to the left */
    right: 0; /* Stick to the right */
    z-index: 2;
}

footer {
    background-color: #333; /* Set background color */
    color: white; /* Set text color */
    text-align: center; /* Center-align text */
    padding: 20px 0; /* Add padding for spacing */
    position: fixed; /* Fixed position */
    bottom: 0; /* Stick to the bottom */
    left: 0; /* Stick to the left */
    right: 0; /* Stick to the right */
    z-index: 2;
}

footer button {
    background-color:red; /* Transparent background */
    border: none; /* Remove default border */
    color: inherit; /* Inherit text color */
    cursor: pointer; /* Show pointer cursor on hover */
}

.footer-text p {
    margin: 5px 0; /* Add spacing between paragraphs */
}


/* CSS for Tablet View */
@media only screen and (max-width: 1024px) {
    /* Adjust header */
    header {
      padding: 20px;
    }
  
    /* Adjust h1 font size */
    h1 {
      font-size: 2.5rem;
    }
    .index-bg {
        width: 200vh;
        height: 300vw;
     }
    /* Adjust image size */
    .index-image {
      width: 80%;
      margin: 0 auto;
      display: block;
    }
  
    /* Adjust navigation */
    nav {
        position: absolute; /* Set nav as absolute */
        bottom: 15vh; /* Adjust bottom position */
        right: 5vw; /* Adjust left position */
       
    }
    nav ul {
      flex-direction: column;
      text-align: center;
    }
  
    nav li {
      margin-bottom: 10px;
    }
    nav li a{
        font-size: 2vh;
    }
  
    /* Adjust footer */
    footer {
      text-align: center;
    }


    .bg-image img{
        width: 100vw;
        height: 150vh;
    }
    .slideshow-container {
       /* Adjust the maximum width as needed */
        margin: 0 auto; /* Center the container */
        display: flex;
        flex-direction: column;
      
    }
    .slide img {
        display: block;
        width: 300px; /* Keep the image size */
        height: 300px;
        position: absolute;
        top: 28%;
        left: 10%;
    }
    .text {
      position: absolute;
      top: 28%;
      right: 23%;
      max-width: 350px;
      }
    h3{
        color:white;
        font-family: 'Libre Baskerville', serif;
    
    }
      .prev,
      .next {
          position: absolute;
          top: 80%;
          transform: translateY(-50%);
          background-color: hwb(0 0% 100% / 0.502); /* Adjust as needed */
          border: none;
          color:white;
          padding: 20px;
          cursor: pointer;
          font-size: 18px;
          z-index: 999; /* Ensure buttons appear on top of other content */
      }
    
      .prev {
          left: 40%;
      }
    
      .next {
          right: 40%;
      }
      .pages-nav {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        background-color: black;
        height: 100vh;
        padding: 10px;
    }
    
    .pages-nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .pages-nav li {
        margin-bottom: 10px;
    }
    
    .pages-nav li a {
        text-decoration: none;
        color:white;
        font-size: 18px;
    }
  }
/* mobile view */
  @media only screen and (max-width: 400px){
    .index-bg {
        background-color: black;
        width: 200vh;
        height: 500vw;
     }
     .index-image {
         position: absolute;
         top: 50%; /* Position from top */
         left: 55%; /* Position from left */
         width: 100%; /* Set the width of the image */
         height: 90vh; /* Maintain aspect ratio */
     }
     nav {
        position: absolute; /* Set nav as absolute */
        top: 5vh; /* Adjust bottom position */
        left:5vw; /* Adjust left position */
        color: white; /* Set nav text color */
        z-index: 2; /* Ensure nav appears above the image */
        font-size: 8vh;
        text-align: center;
        opacity: 0; /* Initially hide the nav */
        animation: fadeIn 7s forwards; /* Apply fade-in animation */
    }
    
    nav li {
        list-style: none; /* Remove list bullets */
        margin-bottom: 10px; /* Add spacing between list items */
        padding: 10px;
    }
    .bg-image img{
        width: 100vw;
        height: 150vh;
    }
    .slideshow-container {
       /* Adjust the maximum width as needed */
        margin: 0 auto; /* Center the container */
        display: flex;
        flex-direction: column;
      
    }
    .slide img {
        display: block;
        width: 200px; /* Keep the image size */
        height: 200px;
        position: absolute;
        top: 12%;
        left: 10%;
    }
    .text {
      position: absolute;
      top: 38%;
      right: 23%;
      max-width: 300px;
      font-size: 15px;
      }
    h3{
        color:white;
        font-family: 'Libre Baskerville', serif;
    
    }
      .prev,
      .next {
          position: absolute;
          top: 80%;
          transform: translateY(-50%);
          background-color: hwb(0 0% 100% / 0.502); /* Adjust as needed */
          border: none;
          color:white;
          padding: 20px;
          cursor: pointer;
          font-size: 18px;
          z-index: 999; /* Ensure buttons appear on top of other content */
      }
    
      .prev {
          left: 30%;
      }
    
      .next {
          right: 30%;
      }
      .pages-nav {
        position: absolute;
        top: 50%;
        left: 75%;
        transform: translateY(-50%);
        background-color: black;
        height: 80vh;
        padding: 5px;
        width: 100px;
    }
    .pages-nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .pages-nav li {
        margin-bottom: 10px;
    }
    
    .pages-nav li a {
        text-decoration: none;
        color:white;
        font-size: 10px;
    }
    
  }