/*Structure*/

:root {
    --num: 0%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: black;
    color: white;
}

.padded-area {
    padding: 5px;
    margin: auto;
}

.ex1of2,
.ex2of2 {
    margin: 10px;
    padding: 40px 20px;
    background-color: darkgreen;
    border-radius: 10px;
    border: 7px solid seagreen;
    text-align: center;
}

.ex1of2 {
    height: 175px;
    position: relative;
    top: 0px;
}

/*Animation*/

#img {
    --x: -500px;
    margin-left: var(--x);
    height: 120px;
    background-color: transparent;
}


/*Gradients*/

#donate {
    width: 100px;
    height: 300px;
    background: white;
    margin: 5px;
}

#gradient {
    width: 100px;
    height: 300px;
}

.gfull {
    background: linear-gradient(0deg, red var(--num), white var(--num) 100%);
}

/*Typography*/

#error {
    color: red;
}

/*Form*/

label,
input {
    display: inline-flex;
}

label {
    text-align: right;
    padding: 5px;
}

/*Larger Resolution*/

@media (min-width: 900px) {

    .columns {
        display: flex;
    }

    .ex1of2,
    .ex2of2 {
        flex: 1;
    }

    .ex1of2 {
        top: 150px;
    }
}