* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body styling */
body {
    font-family: 'Lilita One', sans-serif;
    background-color: #ffffff;;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Arrange title and outer block in a column */
    height: 100vh;
    margin: 0;
}

.page-title {
    font-size: 4vw;
    font-weight: bold;
    margin-bottom: 45px; /* Space between title and outer block */
    text-align: center; /* Center the title horizontally */
    color: #4f1976; /* Dark text color for contrast */
    
}

/* Outer block styling */
.outer-block {
    width: 90vw;  /* Make the width 90% of the viewport width */
    max-width: 1500px; /* Set a maximum width to prevent it from growing too large */
    height: 70vh; /* Height as 60% of the viewport height */
    background-color: #a7a4d2; /* Light blue color */
    display: flex; /* Use flexbox to position inner blocks side by side */
    justify-content: space-between; /* Space between the inner blocks */
    align-items: center; /* Center the items vertically */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Inner block styling */
.inner-block {
    width: 45%; /* Make each inner block take up 45% of the outer block's width */
    height: 70%; /* Set the height of each inner block */
    background-color: #ffffff; /* White background */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.equal-sign {
    font-size: 5vw;  /* Adjust size of the equal sign */
    color: #4f1976;  /* Color of the equal sign */
    align-self: center;  /* Center the equal sign vertically */
}

/* Dropdown styling */
select {
    width: 100%; /* Make the select dropdown the same width as the parent container */
    height: 30%;
    padding: 10px;
    border-radius: 4px;
    background-color: #4f1976;
    color: #a7a4d2;
    font-size: 2vw;
    font-family: 'Oswald';
    box-sizing: border-box; /* Ensure padding doesn't affect width */
    margin-top: auto; /* Push it to the bottom of the inner block */
}

input {
    width: 100%; /* Make the input take up 100% width of its container */
    height: 70%;
    padding: 10px;
    border-radius: 0px;
    border: 0px solid #ffffff;
    font-size: 4vw;
    box-sizing: border-box; /* Ensure padding doesn't affect width */
    margin-bottom: 0px; /* Space between input and the dropdown */
    text-align: right;
    color: #2c3e50;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hide the number input spinners in Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

/* Media Queries for additional responsiveness */
@media (max-width: 768px) {
    .outer-block {
        width: 90vw; /* Increase width on smaller screens */
        height: 70vh; /* Increase height on smaller screens */
    }
    .inner-block {
        height: 45%; /* Make inner blocks slightly taller on small screens */
    }
}

@media (max-width: 480px) {
    .outer-block {
        width: 95vw; /* Use almost the full width on very small screens */
        height: 80vh; /* Use almost full height */
        padding: 15px; /* Reduce padding */
    }
    .inner-block {
        height: 35%; /* Make blocks even taller */
    }
    select {
        font-size: 14px; /* Smaller font size for smaller screens */
    }
}
/* home button */
.button-container {
    position: fixed;      /* Position relative to the page */
    top: 5vh;               /* Distance from the top */
    right: 67vw;             /* Distance from the right */
    display: flex;           /* Arrange buttons horizontally */
    gap: 0.3vw;               /* Space between buttons */
   
}

/* all the button style stuff */
button {
    font-family: 'Oswald';
    padding: 1.0vw 1.0vh;
    background-color: #4f1976;  /* Button color */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1vw;
    transition: background-color 0.3s;
}
/* all the convert button style stuff */
button2 {
    font-family: 'Oswald';
    padding: 2.0vw 4vh;
    background-color: #4f1976;  /* Button color */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 2vw;
    transition: background-color 0.3s;
}

button i {
    margin-right: 10px;  /* the space between icon and text */
    font-size: 30px;    /* to adjust the size of the icon*/
}

button:hover {
    background-color: #53B0B1 ;  /* Darker color on hover */
}