*{
    margin: 0; padding: 0; box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body{
    width: 100%; height: 100vh;
    display: flex; justify-content: center;
    align-items: center; color: #fff;
    background: linear-gradient(145deg, #222A35, #293040);
}

.container{
    border-radius: 6px; border: none;
    max-width: 350px; padding: 1rem 2rem;
    width: 100%;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    background: linear-gradient(210deg, #ffffff1a, #6a00ff50);
}

h1{
    font-size: 24px; padding-bottom: 2rem;
}

input{
    border-radius: 10px; padding: 8px 16px;
    border: none; outline: none;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    width: 100%; text-align: center;
}

input[type=number]{
    -moz-appearance: textfield;
}

.Converter-info{
    display: flex; flex-direction: row;
    align-items: center; gap: 8px;
    padding-top: 1.5rem;
}

.info-el{
    display: flex; flex-direction: row;
    align-items: center;
}

.currency-box{
    display: flex; flex-direction: row;
    align-items: center; cursor: pointer;
    padding: 5px; gap: 6px;
}

.currency-box i{
    font-size: 10px;
}

.convertation-icon{
    border-radius: 50%; background: #ffca26;
    width: 30px; height: 30px;
    display: flex; align-items: center;
    justify-content: center; cursor: pointer;
    margin-right: 8px;
}

.convertation-icon i{
    font-size: 12px; 
}

.res-field{
    margin-top: 20px;
    padding: 8px 16px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: transparent;
    border-radius: 10px; font-weight: 500;
    outline: none; transition: all 0.3s;
    width: 100%; 
    text-align: center;
}

.convert-button{
    width: 100%; padding-top: 20px;
}

.convert-button button{
    padding: 8px 16px; background: #ffca26; font-weight: 500;
    border-radius: 99px; font-size: 12px; width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.2);
    transition: all 0.3s; cursor: pointer;
}

.convert-button button:hover{
    transform: scale(1.05);
    box-shadow: 0 0 12px #ffca26;
}

.info-el img{
    width: 100%; width: 50px; height: 50px;
    padding: 5px; border-radius: 100%;
}

.select-currency{
    background: transparent; color: #fff;
    border: none; outline: none; padding: 6px;
    cursor: pointer; appearance: none; 
}