body {
  font-family: 'Noto Sans', sans-serif;
  /*background: linear-gradient(to bottom, #f5f5f5, #e0e0e0);*/


  /*background-image: url('website-bg-3.svg');*/
 /* background-size: cover; Adjust as needed */
  /*background-repeat: no-repeat;  Adjust as needed */
  /*background-position: center center;  Adjust as needed */
 
}
.profile-image {
  width: 100px;
  height: 100px;
  /* Add other styles as needed */
}
.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}


.container {
  overflow: hidden;
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto; /* Two columns for the two images */
  align-items: flex-start; /* Center vertically */
  justify-content: center; /* Center horizontally */
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;

}




.rotate-image{
  width:100%;
  max-width:100%;
  height:auto;
  margin-top: 20px;
  transform-origin: center center;
  -webkit-animation: roll 30s linear infinite;
  animation: roll 30s linear infinite;
  
}

@keyframes roll {
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes roll {
  100% {
    transform: rotate(360deg);
  }
}







/* For desktop screens */
@media only screen and (min-width: 601px) {
  .balloons-container {
    text-align: center; /* Center the red-balloon.svg horizontally */
    margin-top: 360px; /* Adjust the margin-top for desktop view */
  }
  .profile-image {
    width: 100px; /* Adjust the width as needed for desktop */
    height: 100px; /* Adjust the height as needed for desktop */
    margin-left: 20px; /* Adjust the margin-left as needed for desktop */
  }
  /*.flowers-image {
    background-image: url('flowers-SMALL0.svg');  Desktop background image URL flowers2-desk.svg is darker
    background-repeat: no-repeat; 
    width: 100%;  Set the width to fill the container 
    height: 900px;  Set the height as needed 
  }*/
 .table-chairs {
  margin-bottom: 80px;
 }
  .seat-at-table {
    font-size: 2em;
  }
}






@keyframes bobbing {
  0%, 100% {
    transform: translateY(0); /* Starting and ending position */
  }
  50% {
    transform: translateY(-10px); /* Middle position, adjust as needed */
  }
}

.bobbing-animation {
  animation: bobbing 3s ease-in-out infinite; /* Adjust the duration and timing as needed */
  margin-top:20px;
  margin-right: 70px;;
}






#cursor {

  width:90px;
  height:90px;
  transition: all 0.5s ease-out;
  z-index:999;
  position:absolute;
  transition:0.1s;
  transform:translate(-50%,-50%);
  
  pointer-events:none;
  

}





/* Adjustments for mobile screens */
@media only screen and (max-width: 600px) {
  .grid-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    height: auto;
  }

  img {
    width: 12rem;
    height: 10rem;
    object-fit: contain;
    object-position: center;
    /*margin-right: 40px;*/
  }
     /* Add styles to place the balloon to the right of the globe */
     .grid-container {
      flex-direction: row; /* Display images side by side */
      justify-content: center; /* Center horizontally */
      align-items: center; /* Center vertically */
  }

  .rotate-image {
    max-width: 75%;
    margin-left: 20px;
  }

  .bobbing-animation {
   
    max-width: 60%; /* Adjust the size as needed */
    margin-top: -250px; /* Remove margin from the top */
    margin-left: -60px;
    
  }
  #cursor{
    display: none;
  }
 .profile-image {
    width: 60px; /* Adjust the width as needed */
    height: 60px; /* Adjust the height as needed */
    margin-left: 5px; /* Adjust the margin-left as needed */
  }
  .balloons-container {
    text-align: center; /* Center the red-balloon.svg horizontally */
    margin-top: 20px; /* Adjust the margin-top as needed */
  }
  /*.flowers-image {
    background-image: url('flowers0-mobile.svg'); mobile background image URL 
    background-repeat: repeat-x;
    background-size: auto;
    width: 100%; / Set the width to fill the container 
    height: 100px;  Set a fixed height as needed 
  }*/


 
.table-chairs{
  margin-left: 30px;
}

.tree-sofa {
  margin-left:60px;
}

}



.trees-birds{
  margin-top: 90px;
}



.open-shop:hover {
  font-family: 'ArialMT', 'Arial', sans-serif;
  font-size: 32px;
}