html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

.top {
    background-image: linear-gradient( 50deg, hsl(340deg 82% 61%) 0%, hsl(329deg 81% 60%) 9%, hsl(318deg 81% 60%) 18%, hsl(308deg 80% 59%) 27%, hsl(297deg 79% 59%) 36%, hsl(287deg 78% 58%) 45%, hsl(276deg 78% 58%) 55%, hsl(266deg 77% 57%) 64%, hsl(255deg 75% 57%) 73%, hsl(245deg 75% 56%) 82%, hsl(234deg 74% 56%) 91%, hsl(223deg 73% 56%) 100%);
    text-align: center;
    display: flex;
    flex-direction: column;
    color: whitesmoke;
    padding: 5% 0 0;
    height: 40%;
}

#amount {
    background-color: rgba(0, 0, 0, 0);
    border-color: rgba(0, 0, 0, 0.03);
    font-size: 3rem;
    text-align: center;
    size: 5;
    margin: 5% 30%;
    width: 10% 10%;
    border-radius: 5px;
    color: whitesmoke;
}

.amount:active {
    background-color: rgba(0, 0, 0, 0.05);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.bottom {
    text-align: center;
    display: flex;
    flex-direction: column;
    background: #1F2937;
    color: whitesmoke;
    height: 60%;
}

.convert {
    margin: 0px 40% 50px;
    background-color: rgba(0, 0, 0, 0);
    color: whitesmoke;
    border-color: rgba(0, 0, 0, 0.05);
    text-align: center;
    border-radius: 3px;
    font-size: 1.5rem;
}

.convert:hover {
    background-color: rgba(0, 0, 0, 0.05);
    border-color: rgba(211, 30, 142, 0.8);
}

.converted {
    text-align: center;
    padding: 20px;
}