:root {
            --base-font-size: calc(2vh + 1rem);
        }

body{
    margin:0;    
    background-color: #fbc707ff;

}
/* Overall Container */
.container {
    display: flex;
    flex-direction: column;
    padding: 2vh 2vw; /* Padding based on viewport height and width */
    max-height: 98vh;
    height:100%;
    overflow-y: auto;
    font-family: sans-serif;
    font-size: var(--base-font-size);
}

/* Hide scrollbars */
.container::-webkit-scrollbar { display: none; } 
.container { scrollbar-width: none; }

/* Header Styling */
header {
    display: flex;
    align-items: center;
    margin-bottom: 2vh; /* Margin based on viewport height */
    margin-top: 2vh; /* Margin based on viewport height */
    justify-content: space-between; /* Add this line */
}

#logo {
    height: 6vh;     /* Adjust logo height based on viewport */
}

h1 {
    font-size: 4vh; 
    margin: 0; 
}

/* Table Styling */
#currencyTable {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* Equal width columns */
    border-color: darkgrey; /* Set table border color to dark grey */

}

#currencyTable th, #currencyTable td {
    border: 0.1vh solid #5d5d5d;
    padding: 0.02vh 0.5vw; /* Padding based on height and width */
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: nowrap; 
    height: 3.4vh; /* Set row height based on viewport height */
    font-size: 2vh;
}


#currencyTable img {
    margin-right: 0.5vw;
    width: 3vh;
    vertical-align: middle; 
}



#currencyTable th:not(:first-child),
#currencyTable td:not(:first-child) {
    width: 20%; /* Other columns (Buying/Selling) get 25% each */
    text-align: right;
    font-weight: bold;
}

#currencyTable th:first-child {
    width: 60%;
    border-top-color: transparent; /* Remove top border */
    border-left-color: transparent; /* Remove left border */
}


/* ... other styles ... */

/* Table Styling */
#currencyTable {
    border-color: darkgrey;
}

/* Table Header Styling */
.currency-header {
    width: 50%;
}

.rate-header {
    width: 25%;
    text-align: right;
    font-weight: bold;
    background-color: darkblue;
    color: lightblue;
}

/* Remove top and left borders from first header cell */
.currency-header {
    border-top: 0;
    border-left: 0;
}