styles.css

html{
    background: #012726;
    color: #fdfffc;
    font-family: 'Orbitron',sans-serif;
}

body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

h3,p{
    display: flex;
    font-weight: 400;
    font-size: 1.5rem;
    margin: 0 .1em;
    padding: 0;
    font-weight: 700;

}
/* 
h3{
    margin-top: 1em;
} */

.card{
    display: flex;
    flex-direction: column;
    margin: 2em 2em;
    width: 50%;
    background: #269d91;
    border-radius: 1em;
    text-align: center;
    align-items: end;
}

.convert,.to{
    display: flex;
    flex-direction: row;
    margin: .5em;
    justify-content: left;
    align-items: center;
    margin-right: 5em;
}

.convert{
    margin-top: 2em;
}

input{
    max-width: 50%;
    padding: 1em 1em 1em 2em;
    font-family: 'Orbitron',sans-serif;
    border: none;
    border-radius: 2em;
    margin-left: .5em;
}

input:active{
    border: none;
}

select{
    max-width: 50%;
    text-align: center;
    border: none;
    padding: 1em 1em 1em 2em;
    margin-left: 1em;
    border-radius: 2em;
    font-family: 'Orbitron',sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    background: #007368;
    color: #fdfffc;    
}

button{
    max-width: 50%;
    font-family: 'Orbitron',sans-serif;
    border: none;
    border-radius: 3em;
    background-color: #e71d36;
    color: #fdfffc;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    margin: 1em 16em 1em 2em;
    padding: .5em 1em;
}

button:hover, select:hover{
    opacity: 85%;
}

button:active, select:active{
    opacity:100%;
}