.container {
    width:60%;
    height:50vh;
    background-color: transparent;
    margin-left: auto;
    margin-right: auto;
    margin-top:15vh
}

.donateScreen {
    width:45%;
    float: left;
    height:100%;
    background-color: white;
    border: 1px solid black
}

.donateMessage {
    width:45%;
    float: right;
    height:100%;
    background-color: white;
    border: 1px solid black
}

.donateScreen h2 {
    font-family: sans-serif;
    text-align: center;
}

input {
    width:50%
}

label {

    font-family: sans-serif;
    font-weight: bold;
}
.donation {
    margin-top: 25%;
}

.payment {
    width:30%;
    margin-left: 40%;
    font-family: sans-serif;
    font-weight: bold;
    background-color: transparent;
    margin-top: 1vh;
    border: 1px solid black;
    height:3.5vh;
    font-size: 2vh;
}

.donateMessage h2 {
    font-weight: bold;
    font-family: sans-serif;
    text-align: center;
}

.donateMessage p {
    font-family: sans-serif;
    font-size: 22px;
    margin-left: 5%;
    margin-right: 5%;
    text-align: center;
    margin-top: 17%;
}

.email {
    margin-left: 25%
}

.amount {
    margin-left: 21.5%;
}

@media only screen and (max-width: 600px) {
    .donateScreen {
        width:75vw;
    }
    .donateMessage {
        width:75vw;
        float:left;
        margin-top: 2vh;
        height: 42vh;
    }

    .donateMessage p {
        font-size: 1em;
    }

    .container {
        margin-left: 12.5vw;
        margin-top: 5vh;
    }

    footer {
        bottom:-20vh
    }

    .email {
        margin-left: 15vw
    }
    
    .amount {
        margin-left: 10vw
    }

    .payment {
        width:35%;
        margin-left: 40%;
        margin-top: 1vh;
        height:3.5vh;
        font-size: 2vh;
    }
}