*
{
    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;
}
.button {
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

body{
    margin:0;
    background-color: var(--background-color);
}
a{
    text-decoration: none;
    color: inherit;
}

/***** Header *****/
header
{
    display: flex;
    justify-content: space-between;
    background-color: var(--primary-color) ;
    align-items: center;
    height: 60px;
}
ul
{
    width:25%;
    display:flex;
    justify-content: right;
    margin-right: 1em;
}
li{
    display: inline-block;
    padding: .5em 1em;
    margin: 0 .5em;
    background-color: var(--secondary-color);
    color:black;
    border-radius: 10px;
    font-size: .65rem;
}
.logo
{
    margin-left:1em;
    width:25%;
}
#search
{
    border-radius: 5px;
    height:35px;
    width: 50%;
    min-width:300px;
    margin:auto;
    border: none;
    transition: all .7s;
    font-size: 1rem;
    text-align: center;
    margin-right: 15rem;
    padding: .001em;
    background-color: var(--secondary-color);
    initial-value: none;
}
#search:hover{
    border: 2px solid rgb(2, 14, 26);
}

/*----- Sections -----*/
.sections
{
    display: flex;
    justify-content: space-evenly;
    height:1000px;
    margin-top: 1em;
    --main-width: 60%;
    
}

.left, .main{
    border-radius: 10px;
    background-color: var(--secondary-color);
}
.left , .right
{
    width:calc(((95% - var(--main-width))/2));
}
.left, .groups, .top-donos, .main
{
    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;
}
.left:hover, .groups:hover, .top-donos:hover, .main:hover
{
    box-shadow: 0 4px 8px 0 rgba(134, 134, 134, 0.19), 0 6px 20px 0 rgba(134, 134, 134, 0.19);   
}


/***** Left *****/

.forums
{
    width:100%;
    height:100%;
    border-radius:inherit;
    display: flex;
    flex-direction: column;
}

.forums a 
{
    padding: .5em .5em;
    background-color: var(--primary-color);
    color:black;
    border-radius: 10px;
    font-size: .75rem;
    margin: 1em auto;
    text-align: center;
    width:60%;
}

.text
{
    margin: 1em auto;
}

/***** Main *****/
.main
{
    width:var(--main-width);
}
.main-container{
    margin:.5em;
    width:calc(100%-1em);
    height:calc(100% - 1em);
}
/***** Right *****/
.right
{
    display:flex;
    flex-direction: column;
    --donos-height:30%;
}
.right-container
{
    height:100%;

}
.top-donos, .groups{
    border-radius:10px;
    background-color: var(--secondary-color);
}
.top-donos
{
    width:100%;
    height:var(--donos-height);
}
.groups
{
    margin:.5em 0 0 0;
    height: calc(100% - var(--donos-height) - .5em);
}