body {
  background-image: url("space3.png");
  background-size: cover;
  color: black;
  font-family: verdana;
  cursor: url("path-to-image.png");
}

@font-face {
  font-family: 'LucyRosePERSONAL-Regular';
  src: url('/LucyRosePERSONAL-Regular.otf');
}

h1 {
  
  background-color: transparent;
  color: white;
  font-family: 'LucyRosePERSONAL-Regular';
  border-image: url(border1.png) 80 round;
  height: 22px;
  width: 600px;
  margin-left: 400px;

  padding: 15px;
}

/* Work in Progress */
.button-container {
  display: flex;
  background-color: transparent;
}


/* Work in Progress */
.button {
  display: flex;
  margin-right: 10px; 
  padding: 20px; 
  background-color: transparent; 
  text-decoration: none; 
  border: none; 
  border-radius: 10px; 
}

/* Work in Progres. Reduces margin from last button  */
.button:last-child {
  margin-right: 0; 
}

/* Work in Progress */
#ABOUTButton {
  background-color: transparent;
  position: relative;
  border: none;
  cursor: pointer;
  padding: 0;
  left: 920px;
}


#ABOUTButton img {
  display: block;
}


/* Moving wrapper I found */
.hwrap {
  overflow: hidden;
  background: #eee;
  left: 400px;
}
 
/* The ticker for the wrapper */
.hmove { 
  display: flex;
  border-image: url(border1.png) 30 round;
}

/* puts items in long horizontal row*/
.hitem {
  flex-shrink: 0;
  width: 50%;
  box-sizing: content-box;
  border-image: url(border.png) 30 round;
  padding: 10px;
  text-align: center;
}
 
/* (D) ANIMATION - MOVE ITEMS FROM RIGHT TO LEFT */
/* 4 ITEMS -400%, CHANGE THIS IF YOU ADD/REMOVE ITEMS */
@keyframes tickerh {
  0% { transform: translate3d(100%, 0, 0); }
  100% { transform: translate3d(-500%, 0, 0); }
}
.hmove { animation: tickerh linear 50s infinite; }
.hmove:hover { animation-play-state: paused; }


/* text */
p {
  position: static; 
  color: white;
}

.div p {
  position: static; 
  color: white;
}


/*---------------------------------------------------------*/

.updateBox {
  background-color: orange;
  width: 60px;
  left: 450px;
}

/*-------------- Container Properties. needs more tampering --------------------------------*/

.container {
  margin: auto;
  display: inline-block;
  position: relative;
  width: 1000px;
  height: auto;
  align-content: center;
  justify-items: center;
  border-radius: 25px;
  color: white;
  border: 2px solid #73AD21;
}
 
/* p in the container */ 
.container p {
  margin: 10px; 
  padding: 10px; 
  text-align: center; 
}

/*-----------------------------------------------------------------------------*/

.scroll-box {
  height:370px;
  width: 810px;
  overflow-y: scroll;
  background-color: yellow;
  border-image: url(border1.png);
}

.scroll-box::-webkit-scrollbar {
  width: 20px;
}

.scroll-box::-webkit-scrollbar-track {
  background-color: blue+;
}

.scroll-box::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 5px;
}

.sidenav {
  height: 70%;
  width: 1px;
  position: absolute;
  z-index: auto;
  top: 10px;
  left: 0;
  background-image: url(bck.png);
  overflow-x: hidden;
  padding-top: 20px;
  border-image: url(border1.png) 20px;
}

.sidenav a {
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.main {
  margin-left: 160px; /* Same as the width of the sidenav */
  font-size: 28px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.tcoon {
  align-items: center; 
}

.sidebar {
  position: fixed;  /* Fixes the sidebar to stay in place while scrolling */
  right: 0;         /* Positions the sidebar on the right side */
  top: 0;           /* Positions the sidebar at the top */
  width: 200px;     /* Sets the width of the sidebar */
  height: 100%;     /* Sets the height to cover the full page height */
  background-color: #4f1519; /* Background color of the sidebar */
  background-image: url(bck.png);
  padding-top: 20px; /* Padding at the top of the sidebar */
  box-shadow: -2px 0 5px rgba(0,0,0,0.5); /* Adds a shadow for better visual separation */
  display: flex;    /* Uses flexbox layout */
  flex-direction: column; /* Arranges children elements in a column */
}

.sidebar a {
  display: block;  /* Makes the links block elements */
  color: white;    /* Sets the link text color to white */
  padding: 10px 15px; /* Padding inside the links */
  text-decoration: none; /* Removes the underline from links */
}

.sidebar a:hover {
  background-color: #575757;
}

.content {
  margin-right: 220px; 
  padding: 20px;
}


/* to experiment further */
.footer {
  background-color: #333; 
  color: white; 
  text-align: center; 
  padding: 10px 0; 
  position: absolute;
  bottom: 0; 
  width: 100%; 
}


/*----- about -------------*/
.image-container {
    position: relative;
    width: 568px;  /* Adjust the width as needed */
    height: 686px; /* Adjust the height as needed */
}

.image {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: opacity 1s ease-in-out;
}

.image2 {
    opacity: 0;
}

.image-container:hover .image1 {
    opacity: 0;
}

.image-container:hover .image2 {
    opacity: 1;
}


/* Gallery style */
.gallery img {
    width: 15%;
    height: 15%;
    cursor: pointer;
    margin: 20px;
}

/* The Modal (background) */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.9);
}

/* Modal Content */
.modal-content {
    position: relative;
    margin: auto;
    padding: 0;
    width: 80%;
    max-width: 700px;
}

/* The Close Button */
.close {
    position: absolute;
    top: 10px;
    right: 25px;
    color: green;
    font-size: 35px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Caption text */
.caption-container {
    text-align: center;
    padding: 2px 16px;
    color: white;
}

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* Hide the images by default */
.mySlides {
    display: none;
}

/* Add a pointer when hovering over the gallery images */
.gallery img:hover {
  
    opacity: 0.7;

}

/* improved slide content container */
.slide-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
}

/* Image container styling */
.image-container {
    flex: 1;
    max-width: 60%; /* Adjust this value as needed */
}

.image-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* Description container styling */
.description-container {
    flex: 1; /* Allow the description to take up remaining space */
    margin-left: 20px; /* Space between image and description */
    box-sizing: border-box;
    overflow: visible; /* Ensure no scrollbar */
    max-width: 35%; /* Allow more space for the description */
}

/* Description text box */
.description {
    color: #f2f2f2;
    font-size: 16px;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 16px;
    border-radius: 5px;
    overflow: visible; /* Ensure no scrollbar */
}

/* media Queries */ 

@media screen and (max-width: 768px) {
  
    .slide-content {
        flex-direction: column;
    }

    .image-container,
    .description-container {
        max-width: 100%;
        margin-left: 0;
    }

    .description-container {
        margin-top: 20px;
    }
}