.dynapuff-dynapuff {
  font-family: "DynaPuff", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    'wdth' 100;
}


body {
  background-image: url('../assets/bg.jpg');
  background-repeat: repeat;
  background-size: cover;
    } 


* {
    cursor: url('https://cdn.cursors-4u.net/css-previews/cute-blue-cloud-cd782d94-css.webp') 0 0, auto;
  
  }


  .img:not(body,body>img) {
  position: relative;     /* Establishes the boundary context for the image */
  width: 100%;            /* Define whatever width fits your layout */
  height: 400px;          /* Define a height so vertical centering is visible */
  border:none  /* Optional: just to see the container box */
}

.imgimg {
  position: absolute;     /* Removes the image from normal document flow */
  top: 55%;               /* Moves the top edge of the image to the vertical center */
  left: 50%;              /* Moves the left edge of the image to the horizontal center */
  transform: translate(-125%, -180%); /* Shifts image back by half its own width and height */
scale: 40%;
}





 iframe {
  border:none;
  width: 100%;
  height: 100%;
} 




/* Container styling */
.navbar ul {
  list-style-type: none; /* Removes bullet points */
  margin: 0;             /* Removes browser default margins */
  padding: 0;            /* Removes browser default padding */
  background-color: rgb(64, 208, 255);/* Adds a background color to the bar */
  display: flex;         /* Activates Flexbox layout to align items horizontally */
  position: absolute;
  left: 33%;
  top: 35%;
   width: 35%;
   justify-content: space-between; /* Spans items evenly across the width */
  align-items: center; 
  font-family: "DynaPuff", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    'wdth' 100;



}

/* Individual list item spacing */
.navbar li {
  /* Optional: gaps can also be managed by justify-content on the parent ul */
  font-family: 'DynaPuff';
  size: 1.0rem;
  text-decoration: none;
  font-family: "DynaPuff";
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    'wdth' 100;

}

/* Link styling inside the list items */
.navbar a {
  display: block;        /* Makes the entire area clickable, not just the text */
  color: white;          /* White text color */
  text-align: center;    /* Centers the text */
  padding: 14px 15px;    /* Adds top/bottom and left/right spacing */
  text-decoration: none; /* Removes the default text underline */
  font-family: sans-serif;
}

/* Hover effect for interactivity */
.navbar a:hover {
  background-color: rgba(248, 248, 248, 0.216);/* Darkens the background when hovered */
}

 .content p a {
  background-color: rgb(73, 185, 230); 
    color: rgb(37, 37, 37);
      text-decoration: none;
    font-family: 'Inter';
     font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    'wdth' 100;
}

.versionnum {
  color: navy;
  background: transparent;
}


.log
{
border:none;
position: absolute;
    bottom: 0;
 right:50%;
 justify-content: center;
 text-align: center;

}

.log>.changelog,.log>.changelog a{
   background-color: rgb(73, 185, 230); 
    color: whitesmoke;
      text-decoration: none;
      font-family: 'Inter';
       font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    'wdth' 100;
}
.content {
    border: 5px rgb(41, 117, 167) dotted;
  position: absolute;
  left: 50%;
  top: 65%;
  width: 40vw;
  height: 40vh;
  /* padding: 50%; */
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color:rgb(37, 37, 37);
}