html, body {
    position: relative;
    height: 100%;
}

.main-container {
    position: relative;
    margin: 0 8%;
    padding: 16px;
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
}

.headline-container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 32px;
}

.headline-container .headline-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.headline-container .headline-content .headline {
    font-size: 6.4em;
    line-height: 0.85em;
    font-family: 'Gabarito', sans-serif;
    text-align: center;
}

.headline-container .headline-content .sub-headline {
    display: block;
    color: gray;
    text-decoration: none;
    font-size: 1.2em;
    text-align: center;
    margin-top: 32px;
    font-family: 'Work Sans', sans-serif;
    text-underline-offset: 3px;
}

.headline-container .headline-content .sub-headline:hover {
    text-decoration: underline;
}

.headline-container .headline-content .headline-notice {
    font-size: 0.9em;
    margin-top: 4px;
    text-transform: capitalize;
    font-family: 'Work Sans', sans-serif;
}

.headline-container .main-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.headline-container .main-content {
    font-family: 'Work Sans', sans-serif;
}

.headline-container .main-content .input-container {
    width: 100%;
}

.headline-container .main-content .currency-container {
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: center;
    text-align: center;
    margin: 0 ;
}

.base, .target {
    flex-grow: 1;
    margin-bottom: 8px;
}

.input-amount{
    font-weight: bold;
}

.converted-container {
    display:flex;
    justify-content: center;
    align-items: center;
    padding:8px 4px;
    max-width:100%;
    overflow: auto;
    background-color: rgb(200, 243, 208);
    border-radius: 6px;
    width: 100%;
    text-align: center;
}

.converted-container .converted{
    font-size: 3.2em;
    margin: 0px;
    font-family: 'Gabarito', sans-serif;
    color: rgb(68, 68, 68);
}

/* Desktops - Higher resolution */
@media (min-width: 1281px) {
    /* Two-column layout with grid for larger screens */
    .headline-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 32px;
    }
}

/* Laptops, Desktops */
@media (min-width: 1025px) and (max-width: 1280px) {
    /* Single-column layout with reduced font size for medium-sized screens */
    .headline-container {
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 32px;
    }

    /* Adjust max-width for input and converted containers */
    .input-container, .converted-container {
        max-width: 680px;
    }

    /* Increase font size for headlines */
    .headline-container .headline-content .headline {
        font-size: 4.8em;
    }
}

/* Tablets (Portrait) */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Single-column layout for tablets in portrait mode */
    .headline-container {
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 32px;
    }

    /* Adjust layout for currency container in main content */
    .headline-container .main-content .currency-container {
        display: flex;
        flex-direction: row;
        gap: 16px;
        width: 100%;
    }

    /* Increase font size for headlines */
    .headline-container .headline-content .headline {
        font-size: 4.8em;
    }
}

/* Tablets (Landscape) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    /* Single-column layout for tablets in landscape mode */
    .headline-container {
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 32px;
    }

    /* Adjust layout for currency container in main content */
    .headline-container .main-content .currency-container {
        display: flex;
        flex-direction: row;
        gap: 16px;
        width: 100%;
    }

    /* Decrease font size for headlines in landscape mode */
    .headline-container .headline-content .headline {
        font-size: 4.2em;
    }
}

/* Low-resolution Tablets, Mobiles (Landscape) */
@media (min-width: 481px) and (max-width: 767px) {
    /* Single-column layout for smaller screens with adjusted font size */
    .headline-container {
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 32px;
    }

    /* Decrease font size for headlines */
    .headline-container .headline-content .headline {
        font-size: 4.2em;
    }

    /* Adjust layout for currency container in main content */
    .headline-container .main-content .currency-container {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
    }

    /* Decrease font size for converted text */
    .converted-container .converted {
        font-size: 2em;
    }
}

/* Smartphones, Mobiles (Portrait) */
@media (max-width: 480px) {
    /* Single-column layout for small screens with adjusted font size */
    .headline-container {
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 32px;
    }

    /* Decrease font size for headlines */
    .headline-container .headline-content .headline {
        font-size: 3.6em;
    }

    /* Adjust layout for currency container in main content */
    .headline-container .main-content .currency-container {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
    }

    /* Decrease font size for converted text */
    .converted-container .converted {
        font-size: 1.5em;
    }
}