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

:root {
    /* --------------- Colors --------------- */
    --background-color: #343a40;
    
    --primary-base: #868e96;
    --primary-tint: #adb5bd;
    --primary-shade: #495057;

    --secondary-base: #868e9688;
    --secondary-tint: #bdbdbd41;
    --secondary-shade: #ced4da;

    --numbers-tint: #ffb570;
    --numbers-base: #f09744;
    --numbers-shade: #fd7e14;
    
    --convert-button-base: #e8590c;
    --convert-button-shade: #d9480f;

    --text-color: #e8eaed;

    --display-text-color: #ffffff;

    --options-background: #495057f1;



    /* --------------- Fonts --------------- */
    font-size: 62.5%; /* 10px/16px * 100 = 62.5% */

    @media (max-width: 780px) {  
        font-size: 56.25%; /* 9px/16px * 100 = 56.25% */
    }

    --font-size-sm: 1.2rem; /* 12px on desktop */
    --font-size-md: 1.6rem; /* 16px on desktop */
    --font-size-lg: 2.4rem; /* 20px on desktop */
    --font-size-xl: 3.2rem; /* 32px (h4) on desktop */
    --font-size-xxl: 4rem; /* 40px (h3) on desktop */

    @supports (-moz-appearance: none) {
      
        --font-size-xxl: 3.5rem; /* Adjust font-size for Firefox */
    
    }

    --font-weight-regular: 400; 
    --font-weight-bold: 700; 


    /* --------------- Other --------------- */
    --converter-container-height: 15rem;
    --display-width: 30rem;
    --error-container-height: 5rem;
    --swap-icon-width: 5rem;
    
}

body {
    background-color: var(--background-color);
    color: var(--text-color); 

    display: flex;
    justify-content: center;

    font-family: 'Inter', sans-serif;
    
}

#content {
    display: flex;
    justify-content: center;
    align-items: center;

    min-height: 100vh;
    width: 100vw;
    background: none;

    & .converterContainer {

        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        background-color: var(--primary-shade);

        min-height: var(--converter-container-height);

        border-radius: 0.8rem;
        padding: 1rem 2rem;

        & .mainContainer {

            display: flex;

            @media (max-width: 780px) { 
                flex-direction: column; /* Improves responsiveness for mobile */ 
            }

            & .currencyContainer {
                display: flex;
                flex-direction: column;
                justify-content: center;

                & .currencyLabel {
                    font-weight: var(--font-weight-bold);
                    font-size: var(--font-size-md);
                }



                & .display {
                    background-color: var(--secondary-tint);
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    border-radius: 0.4rem;
                    max-width: var(--display-width);

                    & .select {
                        font-size: var(--font-size-md);
                        color: var(--text-color);
                        background-color: var(--secondary-base);
                        font-weight: bold;
                        text-align: center;
                        border: none;
                        border-radius: 0.4rem;
                        padding: 0.5rem;
                        max-width: var(--display-max-width);
                        
    
                        & .optionList {
                            font-weight: bold;
                            background-color: var(--options-background);
                            color: var(--numbers-base);
                        }
                    }

                    & .inputs {
                        font-weight: var(--font-weight-bold);
                        font-size: var(--font-size-lg);
    
                        color: var(--numbers-tint);
    
                        padding: 0.5rem 1rem;
                        text-align: center;
                        outline: none;
                        border: none;
                        border-radius: 0.4rem;
    
                        background: none;

                        &::placeholder {
                            color: var(--numbers-tint);
                        }


                        /* -moz-appearance: textfield; */ /* Hides arrows in Firefox */


                    }


                    & input[type="number"]::-webkit-outer-spin-button,
                    input[type="number"]::-webkit-inner-spin-button {
                        -webkit-appearance: none; /* Hides arrows in Chrome/Edge/Safari */
                    }

              

                }


        
        
            }

            & .swapContainer {

                min-height: 100%;
                display: flex;

                justify-content: center;
                align-items: flex-end;

                margin-bottom: 0.8rem;
                padding: 0 2rem;

                & #swapButton {

                    background: none;
                    border: none;


                    @media (max-width: 780px) { /* Adjust the position of the swap button on mobile */ 
                        margin-bottom: -1.2rem;
                        padding-top: 1.2rem;
                    }

                    &:active,
                    &:hover {
                        & .swapIcon {
                            fill: hsl(216, 12%, 70%);
                        }
                    }


                    & .swapIcon {
                        width: var(--swap-icon-width);
                        fill: hsl(216, 12%, 92%);
                    }


                }
    

    
            }
            
        }

        & .errorContainer {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: var(--error-container-height);
            width: 100%;
            & #errorText {
                color: var(--numbers-shade);
                font-weight: var(--font-weight-bold);
                font-size: var(--font-size-md);
            }

        }


        & .buttonContainer {
        
            display: flex;
            justify-content: center;
            align-items: flex-end;
            height: 100%;
            width: 100%;



            & #convertButton {
                display: flex;
                justify-content: center;
                align-items: center;

                font-weight: var(--font-weight-bold);
                font-size: var(--font-size-md);
                background-color: var(--convert-button-base);

                min-height: 4.9rem;
                min-width: 8rem;                
                

                /* padding: 1rem; */
                border: none;
                border-radius: 0.5rem;
                margin-bottom: 0.5rem;

                &:active,
                &:hover {
                    background-color: var(--convert-button-shade);
                }

                & .convertText {
                    color: var(--text-color);
                }

                & .loading {
                    display: none;
                    & svg {
                        width: 2.5rem;
                        fill: var(--text-color);
                        animation: spin 0.6s linear infinite;
                    }


                }



            }
        }

    }

}

@keyframes spin {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}