body{
  background-color: lightblue;
}

.main-box{

  border-width:2px;
          border-style:solid;
          border-image: url("https://file.garden/aFtlHJgzHRVcsEfa/Untitled298_20260807203209.png") 25 fill stretch;
  
  
  background-image:url("https://file.garden/aFtlHJgzHRVcsEfa/b900cbd6b14951eb226c734e6f47a145.jpg");

  
  
background-size :cover;
  background-position: center center;
  background-repeat: no-repeat;
  
width:800px;
  height:1000px;

  
    margin: 0;

}



.top-banner{
  background-image:url("https://file.garden/aFtlHJgzHRVcsEfa/Untitled296_20260808004351.png");

  position:absolute ;
  top:0px;
  background-position:center;
  background-size:100%;

  width:800px;
  height:500px;
}

.top-bar{
  margin-top: 250px;
  background-size:100%;
}


.mid-box{
  background-color:white;
width: 280px;
  height:200px;
  
  margin-top: -70px;

  border:3px solid black;
  
}

.side-box{
    background-color:white;
width: 150px;
  height:500px;
  
  margin-top: -500px;
  margin-left:-470px;

  border:3px solid black;
}



.vistor-box{
    background-color:white;
width: 280px;
  height:100px;
  
  margin-top: 10px;


  overflow: auto;
  border: 3px solid black;
  
  
}

.button-box{
    background-color:white;
width: 280px;
  height:180px;
  
  margin-top: 10px;

  border: 3px solid black;

  overflow: auto;
}


.oc-pic{
  margin-left: 280px;
  margin-top:-680px;
}



.floating { 
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }
}

h3{
  text-align: center;
                                                                                                                            font-family: 'HunnyPot', sans-serif;
                                                
                                                
}

.update-logs{
  background-color:aqua;
  width:100%;
}


.mini{
  margin-left: -66px;
  margin-top:-40px;
}


.about{
  margin-top:-610px;
  margin-left:-470px;
  
}

.lore{
  margin-top: 40px;
  margin-left: -470px;
}

.gallary{

  margin-left:-470px;
  margin-top:50px;
}


button{
  
  /* Step 1: Set the image background */
  
  background-size: cover;        /* Scales image to fill the button */
  background-position: center;   /* Centers the image */
  background-repeat: no-repeat;  /* Prevents image tiling */

  /* Step 2: Set matching button dimensions */
  width: 300px;                  
  height:50px;                  

  /* Step 3: Remove default browser styling */
  border: none;                  
  background-color: transparent; 
  
background-position:center;
          


transition:width, 0.4s ease-in-out;

  
  background-image:url("https://file.garden/aFtlHJgzHRVcsEfa/Untitled301_20260808125209.png");
}

a{
  color:white;
  font-family: HunnyPot;
}

.side-pic{
  margin-top:280px;
  width:110px;
}


.page{
  width:270px;
  margin-left:-100px;
  margin-top:-21px;
}

button:hover{
  width:200px;
}