.container {
    align-items: flex-start;
    display: flex;
    gap: 100px; /* Adjust the gap as needed */    
}

.container2 {
    align-items: flex-start;
    display: flex;
    gap: 100px; /* Adjust the gap as needed */    
    background-color: lightgray
}

.scientific-notation {
    align-items: flex-start;
    display: flex;
    gap: 100px; /* Adjust the gap as needed */    
    background-color: lightgray
    
     /*font-size: 14px; /* Adjust font size as needed */
     /*font-family: Arial, sans-serif; /* Choose appropriate font */
     /*line-height: 1; /* Ensure consistent line height */
}

.group1 {
    display: flex;
    flex-direction: row;
    gap: 25px;
    height: 30px; 
    width: 250px; /* Set the desired width */
}

.group2 {
    display: flex;
    flex-direction: column;
    width: 175px; /* Set the desired width */
}

.group3 {
    margin-top: 5px; /* Adjust to move the arrow down */
    display: flex;
    flex-direction: column;
    width: 150px; /* Set the desired width */
    height: 50px;
    font-weight: bold;
}

.exponent {
    margin-top: 5px; /* Adjust to move the arrow down */
    display: flex;
    flex-direction: column;
    width: 150px; /* Set the desired width */
    height: 50px;
    font-weight: bold;
    
    /*font-size: 10px; /* Adjust font size for the exponent */
    /*vertical-align: super; /* Align text as superscript */
}

label {
    margin-bottom: 5px;
}


select {
    padding: 5px;
    width: 100%;
}

.arrow {
    margin-top: 25px; /* Adjust to move the arrow down */
    width: 75px; /* Adjust the size as needed */
    height: 25px;
}

output {
    font-weight: normal;
}

.image-button {
    background-image: url('button.jpg'); /* Path to your image */
    background-size: contain; /* Ensures the image scales properly */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-position: center; /* Centers the image */
    font-weight: bold;
    color: rgba(255, 255, 255, 0.558); /* Sets the font color to white */
    background-color: transparent; /* Makes the button background transparent */
    
    width: 150px; /* Set the desired width */
    height: 35px; /* Set the desired height */
    border: none; /* Removes the default border */
    cursor: pointer; /* Changes cursor to pointer on hover */
    padding-bottom: 5px; /* Adds padding to move the text higher */
    transition: background-color 0.3s, color 0.3s; /* Adds a smooth transition for the highlight effect */
}

.image-button:active {
    background-color: rgba(255, 255, 255, 0.2); /* Changes background color on click */
    color: rgba(255, 255, 255, 0.8); /* Changes font color on click */
}