/*----- style.css -----*/
/* Default styles for desktop */

/* overlay */
.overlayb {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff7e6;
  opacity: 0.5;
  z-index: 9999;
}

.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff7e6;
  padding: 20px;
  font-family: arial, sans-serif;
  border-radius: 10px;
  text-align: center;
}

/* footer */

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    padding: 10px 0; /* Optional: padding for the footer */
    width: 42%; /* Adjusted for desktop */
    z-index: 4;
    opacity: 0.8;
    left: 29%;
}


.overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 150%;
    background-color: #fff7e6;
    opacity: 0.9;
    z-index: 3;
}


/* hider */

.hide3 {
    opacity:1;
  border-radius: 0px;
  text-align: center;
  position: absolute;
  margin: 0 auto;
  padding: 10px 10px;
  opacity: 0.95;
}

.hide2 {
    opacity:1;
  border-radius: 0px;
  text-align: center;
  position: absolute;
  margin: 0 auto;
  padding: 10px 10px;
}

.localisatie{
    width: 90%;
    height: auto;
    position: absolute;
    top: 2%;
    left: 6%;
    background-repeat:no-repeat;
    z-index: 4;
    }

.aboutme{
    width: 100%;
    height: auto;
    position: absolute;
    top: 2%;
    left: 0%;
    background-repeat:no-repeat;
    z-index: 4;
    }

.aboutmeES{
    width: 100%;
    height: auto;
    position: absolute;
    top: 2%;
    left: 0%;
    background-repeat:no-repeat;
    z-index: 4;
    }
/* GIF */
img.gif {
    width: 70%; /* Adjusted for desktop */
    height: auto;
    position: absolute; /* Position absolute for desktop layout */
    top: 0.1%; /* Adjusted for positioning */
    left: 12%; /* Adjusted for positioning */
    z-index: 1;
    opacity: 0.7;

}

/* SVG */
#text {
    width: 84%; /* Adjusted for desktop */
    height: auto;
    position: absolute; /* Position absolute for desktop layout */
    top: -13%; /* Adjusted for positioning */
    left: 8%; /* Adjusted for positioning */
    z-index: 2;
}


/* Map */
#map {
    width: 15%; /* Adjusted for desktop */
    height: auto;
    position: absolute; /* Position fixed for desktop layout */
    top: 44vw; /* Adjusted for positioning */
    left: 42vw; /* Adjusted for positioning */
    opacity: 0.8;
    z-index: 2;
}

/* Media query for smaller screens (e.g., smartphones) */
@media screen and (max-width: 768px) {
    /* GIF for smartphones */
    img.gif {
        display: block; /* Displayed on smartphones */
        width: 100%; /* Adjusted for smaller screens */
        position: absolute; /* Position relative to move within its container */
        top: 340px; /* Reset top positioning */
        left: -10px; /* Reset left positioning */
    }

    /* SVG for smartphones */
    #text {
        width: 100%; /* Adjusted width for smartphones */
        height: auto;
        position: absolute; /* Position relative to move within its container */
        left: 0px; /* Reset left positioning */
        top: 10px;
    }

    /* Map for smartphones */
    #map {
        width: 30%; /* Adjusted width for smartphones */
        margin: 5px auto; /* Centered and spaced from other elements */
        left: 150px; /* Adjusted left position for centering */
        top: 290px;
        position: relative; /* Position relative to move within its container */
    }
    
     /* credit for smartphones */
    #credit {
        width: 60%; /* Adjusted width for smartphones */
        margin: 5px auto; /* Centered and spaced from other elements */
        left: 90px; /* Adjusted left position for centering */
        top: 860px;
        position: relative; /* Position relative to move within its container */
        opacity: 0.7;
    }
}