@import url('https://fonts.googleapis.com/css2?family=Monaco&display=swap');

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #212152;
    font-size: 1rem; /* Using rem units for consistent font sizing */
}

.container {
    background-color: #d6d6e2;
}

.navbar {
    overflow: hidden;
    background-color: #333;
    text-align: center;
}

.navbar a {
    float: left;
    font-size: 1rem; /* Converted to rem */
    color: white;
    text-align: center;
    padding: 1.4vh 1.6vh; /* Converted to vh for vertical responsiveness */
    text-decoration: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 1rem; /* Converted to rem */
    border: none;
    outline: none;
    color: white;
    padding: 1.4vh 1.6vh; /* Converted to vh */
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: #ff0000;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 10rem; /* Converted to rem */
    box-shadow: 0px 0.8vh 1.6vh 0px rgba(0,0,0,0.2); /* Converted to vh */
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 1.2vh 1.6vh; /* Converted to vh */
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.dropdown:hover .dropdown-content {
    display: block;
}
.container {
    max-width: 80vw; /* Use vw for max-width */
    margin: 5vh auto; /* Use vh for margin */
    background-color: #24bf93;
    padding: 2%; /* Use percentage for padding */
    overflow: hidden; /* Prevent overflow from the container */
    max-height: 80vh; /* Adjust this value as needed */
    overflow-y: auto; /* Enable vertical scrolling if content exceeds max-height */
}

.strip-image-side {
    display: flex;
    flex-direction: row; /* Flex layout for horizontal alignment */
    gap: 2%; /* Use percentage for gap */
    margin-bottom: 2%; /* Use percentage for margin */
    padding: 2%; /* Use percentage for padding */
    box-shadow: 0 0 1vh rgba(0,0,0,0.1); /* Convert px to vh */
    align-items: flex-start;
    background-color: #fff;
    clear: both; /* Ensure strips don't overlap */
    width: 96%; /* Ensure the strip spans the full width of the container with padding */
}

.text-content1, .challenge-text {
    flex: 2; /* Use flex to manage width proportions */
    text-align: left;
}

.side, .challenge-image {
    flex: 1; /* Use flex to manage width proportions */
    text-align: right;
}

.side img, .challenge-image img {
    width: 100%;
    height: auto;
    display: block; /* Ensure the image does not exceed its container */
}

.strip-image-bottom {
    gap: 2%; /* Use percentage for gap */
    margin-bottom: 2%; /* Use percentage for margin */
    padding: 2%; /* Use percentage for padding */
    box-shadow: 0 0 1vh rgba(0,0,0,0.1); /* Convert px to vh */
    background-color: #ffffff;
    clear: both; /* Ensure strips don't overlap */
    width: 96%; /* Ensure the strip spans the full width of the container with padding */
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.bottom img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

h1 {
    font-size: 5vh; /* Convert px to vh for font size */
    margin-bottom: 2%; /* Use percentage for margin */
    color: #444;
    text-align: center;
    width: 100%; /* Ensure the header spans the container width */
}

h2 {
    font-size: 3.6vh; /* Convert px to vh for font size */
    margin-top: 2%; /* Use percentage for margin */
    margin-bottom: 1%; /* Use percentage for margin */
    color: #555;
    text-align: center; /* Center the section headers */
    width: 100%; /* Ensure the header spans the container width */
}

p {
    font-size: 2.4vh; /* Convert px to vh for font size */
    margin-top: 1%; /* Use percentage for margin */
    margin-bottom: 2%; /* Use percentage for margin */
    color: #000000;
    text-align: left;
}

ul, ol {
    list-style-position: outside; /* This ensures the bullets are outside the content */
    padding-left: 2%; /* Adjust this value to set the distance from the left */
    margin: 0; /* Remove default margin if needed */
    text-align: left; /* Ensure the text is aligned to the left */
    font-size: 1.2rem; /* Use rem for font size */
    color:#000000
}

/* Center text-content when there is no image */
.no-image {
    text-align: center;
    flex: 1 0 100%;
}

/* Add this class to ensure no strips overlap */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* Specific styling for the Challenge header */
.challenge-strip {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2%; /* Use percentage for gap */
    margin-bottom: 2%; /* Use percentage for margin */
    padding: 2%; /* Use percentage for padding */
    box-shadow: 0 0 1vh rgba(0,0,0,0.1); /* Convert px to vh */
    background-color: #fff;
}

.challenge-image img {
    max-width: 41.67vw; /* Convert 500px to vw */
    display: block;
}

.challenge-text {
    flex: 2;
    text-align: left;
}

/* Specific styling for the Answer section */
.answer-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1%; /* Use percentage for gap */
    margin-bottom: 2%; /* Use percentage for margin */
    padding: 2%; /* Use percentage for padding */
    box-shadow: 0 0 1vh rgba(0,0,0,0.1); /* Convert px to vh */
    background-color: #fff;
}

.answer-content {
    display: none;
}

.answer-button {
    cursor: pointer;
    color: blue;
    text-decoration: underline;
}

.interactive_strip {
    background-color: #ffffff;
    padding: 2%; /* Use percentage for padding */
}