/* style.css */

/* Reset default margins and paddings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Set the background color */
body, html {
    width: 100%;
    height: 100%;
    background-color: #ed9483; /* Background color */
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Game container */
#game {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
}

/* Style for the text box */
.text-box {
    position: absolute; 
    z-index: 5;
    width: 80%;
    max-width: 600px;
    padding: 20px;
    background-color: black;
    color: white;
    font-family: 'Press Start 2P', cursive; /* Optional pixel font */
    font-size: 26px;
    line-height: 38px;
    text-align: center;
    border: 4px solid white;
    box-sizing: border-box;
    box-shadow: 20px 20px 0px #050b3f;
}

/* Remove 'left' and 'top' properties from #text1 */
#text1 {
    margin: 0 auto;
}

.companies {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* Space between images */
    margin-top: 20px;
}

.companies img {
    max-width: 200px;
    height: auto;
    flex: 1 0 18%; /* Five images per row on desktop */
    box-sizing: border-box;
}


/* Existing styles for #world */
#world {
    position: absolute;
    width: 600%; /* World is 4 times the viewport width */
    height: 100%;
    left: 0;
    top: 0;

    /* Background properties */
    background-image: url('assets/background.png'); /* Path to your background image */
    background-size: auto 100%; /* Image height is 100% of #world */
    background-repeat: repeat-x; /* Repeat the image horizontally */
    background-position: left bottom; /* Position the background at the bottom left */
}

/* Updated #ground */
#ground {
    z-index: 2;
    position: absolute;
    width: 400%; /* Ground spans the same width as the world */
    height: 200px; /* Fixed height of 200px */
    left: 0;
    bottom: 0; /* Position at the bottom */

    /* Background properties */
    background-image: url('assets/floor.png'); /* Path to your floor image */
    background-size: auto 100%; /* Image height is 100% of #ground */
    background-repeat: repeat-x; /* Repeat the image horizontally */
    background-position: left bottom; /* Position the background at the bottom left */
}

#character {
    z-index: 6;
    position: absolute;
    width: 240px; /* Set the width to 240px */
    height: 475px; /* Set the height to 475px */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    bottom: 200px; /* Start on top of the ground (200px high) */
    left: calc(50% - 120px); /* Center the character horizontally */
    margin-bottom: -25px; /* ensures character runs on ground */
}

/* Style for background numbers */
.background-number {
    position: absolute;
     font-family: 'Press Start 2P', cursive; /* Optional pixel font */
    font-size: 26px;
    line-height: 48px;
    text-align: center;
    color: #fff;
    text-shadow: 0 5px 0 #000;
    top: 20%; /* Position vertically */
    max-width: 700px;
}

#text1 {
 
}


#text2 {
    left: 35%; /* Position in the second section */
}

#text3 {
    left: 60%; /* Position in the third section */
}

#text4 {
    left: 85%; /* Position in the fourth section */
}

 #text4 a {
    color: #fff;
    text-decoration:none;
    padding: 20px;
    border: 6px dashed #fff;
 }

 #text4 a:hover {
    color: #e6607c;
    background-color: #fff;
    border: 6px solid #fff;
    text-shadow: none;
 }



/* On-screen touch controls */
#controls {
    position: absolute;
    bottom: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 10; /* Ensure controls are above other elements */
    pointer-events: none; /* Allow clicks to pass through, but we'll enable pointer events on buttons */
}

.control-btn {
    pointer-events: auto; /* Enable pointer events on buttons */
    width: 60px;
    height: 60px;
    margin: 0 10px;
    font-size: 30px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    
    outline: none;
    touch-action: none; /* Prevent default touch actions */
}

.control-btn:active {
    background-color: rgba(0, 0, 0, 0.8);
}

.contact-form {
  position: absolute;
  top: 50%;
  left: 95%; /* Position at the end of the world */
  transform: translate(-50%, -50%);
  z-index: 5;
  width: 400px;
  background-color: #000;
  border: 4px solid #fff;
  padding: 20px;
  box-shadow: 10px 10px 0px #050b3f;
  font-family: 'Press Start 2P', cursive;
  color: #fff;
}








/* Media Queries for Smaller Screens */



@media (max-device-width: 768px) {


    /* Adjust game container height to fill viewport */
    #game {
        height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        max-height: none;
    }


    /* Adjust ground height */
    #ground {
        height: 100px;
        bottom: 0;
    }

    /* Adjust touch controls */
    #controls {
        bottom: 20px;
    }

    .control-btn {
        width: 30vw;
        height: 30vw;
        max-width: 70px;
        max-height: 70px;
        font-size: 30px;
    }

    .background-number {
        font-size: 46px;
        line-height: 78px;
        text-align: center;
        color: #fff;
        text-shadow: 0 5px 0 #000;
        top: 20%; /* Position vertically */
        max-width: 700px;
    }

    .text-box {
        font-size: 46px;
        line-height: 78px;
    }

    #character {
        width: 540px; /* Set the width to 240px */
        height: 475px; /* Set the height to 475px */
        bottom: 300px; /* Start on top of the ground (200px high) */
        margin-bottom: 30px;
    }

     .companies img {
        flex: 1 0 30%; /* Three images per row on mobile */
    }

    .contact-form {
    width: 80%;
    left: 95%;
  }
}