*
{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
:root{
    font-size: 20px;
    --primary-color: rgb(198,161,207);
    --secondary-color:rgb(227, 226, 230);
    --background-color:whitesmoke;
}

a{
    text-decoration: none;
    color: inherit;
}

/*** Header ***/
header
{
    display: flex;
    justify-content: space-between;
    align-items:  center;
    background-color: rgb(0, 255, 4);
}

.logo
{
    margin:.25em 1em ;
    width:25%;
    font-size: 2rem;
}

/**** Body ****/

body{
    margin:0;
    background-color: var(--background-color);
    --left-container-width: 60%;
    --left-container-height:1000px;
}
main
{
    display: flex;
}

.donate, .anonymous-donation, .donation-requests
{   
    margin: var(--donate-margin);
    box-shadow: 0 4px 8px 0 rgba(182, 182, 182, 0.19), 0 6px 20px 0 rgba(182, 182, 182, 0.19);
    transition: all .5s;
    border-radius: 10px;
    background-color: var(--secondary-color);
}
.donate:hover, .anonymous-donation:hover, .donation-requests:hover
{
    box-shadow: 0 4px 8px 0 rgba(134, 134, 134, 0.19), 0 6px 20px 0 rgba(134, 134, 134, 0.19);   
}

/***** left *****/
.left-container
{
    width:var(--left-container-width);
    height: var(--left-container-height);
    --donate-height: 48%;
    --donate-margin: calc((50% - var(--donate-height)) / 2);

}

.donate
{
    height: var(--donate-height);
}
.anonymous-donation
{
    height:calc(51% - var(--donate-margin));
}
/***** right *****/
.right-container
{
    width: calc(100% - var(--left-container-width));
    height: 1000px;
    --donate-height: 99%;
    --donate-margin: calc((101% - var(--donate-height)) / 2);
}
.donation-requests
{
    margin: var(--donate-margin);
    height: var(--donate-height);
}