/* Section 4: Creating a Custom Game */
/* ================================= */

/* Use '#' to target the single H2 instance that occurs on this section */
#custom-game h2 {
    padding-bottom: 9px;
    border-bottom: 1px solid #00a8ac; /* Draw line underneath subheading */
}

/* Styling for the container that contains all process steps */
.process-steps {
    display: flex; /* Enables flexbox layout */
    flex-direction: column; /* Stack the elements within the flexbox vertically */
    width: 80%; /* Defines how much of the width of the parent container this block will take up */
    margin: 30px auto; /* sets margin on top and bottom of .process-steps box, auto margins on left and right to center horizontally */
    gap: 40px; /* Sets the space between each process step */
    /* border: 1px solid red;  Debegging border to reveal the perimeter of this element */
}





/* Styling for the process steps with the icon on the left */
/* ======================================================== */
/* Contaioner that includes icon and (step name and step description) */
.container-for-step-logo-left {
    display: flex; /* Use flexbox to align the image and text horizontally */
    align-items: center; /* Vertically center the items within the container */
    gap: 20px; /* Add space to horizontially separate the image and the text */
    margin: 0; /* Explicitly define no margin */
    padding: 0; /* Explicitly define no padding */
}

/* Styling for the h3 text in this container  */
.container-for-step-logo-left h3 {
    font-weight: 500; /* Increase the emphasis compared with what is defined in h3 global */
    margin-bottom: 2px; /* Step name and step description */
}

/* Styling for the icon within process steps that have their icon on the left */
.container-for-step-logo-left img {
    width: 150px; /* Set a fixed width for the image */
    height: auto; /* Automatically adjust height to maintain the aspect ratio of the source image */
}





/* Styling for the process steps with the icon on the right */
/* ======================================================== */
/* Container that includes (step name and step description) and icon */
.container-for-step-logo-right {
    display: flex; /* Use flexbox to align the image and text horizontally */
    align-items: center; /* Vertically center the items within the container */
    gap: 20px; /* Add space to horizontally separate the image and the text */
    margin: 0; /* Explicitly define no margin */
    padding: 0; /* Explicitly define no padding */
    background-color: #f7f7f7; /* Adds a grey background color for these steps */
    padding-left: 20px; /* Adds some padding on the L to make the backgroudn look better */
    padding-top: 10px; /* Adds some padding on top to make the backgroudn look better */
}

/* Styling for the hs text in this container  */
.container-for-step-logo-right h3 {
    font-weight: 500; /* Increase the emphasis compared with what is defined in h3 global */
    margin-bottom: 2px; /* Step name and step description */
}

/* Styling for the icon within process steps that have their icon on the right */
.container-for-step-logo-right img {
    width: 150px; /* Set a fixed width for the image */
    height: auto; /* Automatically adjust height to maintain the aspect ratio of the source image */
}





/* Responsive styling for screens narrower than 768px */
/* ================================================== */

/* Media query for .container-for-step-logo-right */
@media screen and (max-width: 768px) {
    .container-for-step-logo-right {
        flex-direction: column-reverse; /* Reverse order, image on top */
        align-items: center; /* Center-align content */
        text-align: center;
        gap: 15px; /* Gap between image and H3 title of process step */
    }

    .container-for-step-logo-right img {
        width: 100px; /* Smaller icon size for narrow screens */
    }

}

/* Media query for .container-for-step-logo-left */
@media screen and (max-width: 768px) {
    .container-for-step-logo-left {
        flex-direction: column; /* Stack vertically */
        align-items: center; /* Center-align content */
        text-align: center;
        gap: 15px; /* Gap between image and H3 title of process step */
    }

    .container-for-step-logo-left img {
        width: 100px; /* Smaller icon size for narrow screens */
    }
}


/* Center align the H3 text inside this class */
@media screen and (max-width: 768px) {
    .title-and-text h3 {
        text-align: center; /* Center-align H3 when screen is narrow */
    }
}