body {
    background-color: #dce2e7;
    font: 13px/1.231 arial,helvetica,clean,sans-serif;
}

a {
    font-weight: normal;
    color: #8496b9;
    text-decoration: none;
}

a.no-effect {
    text-decoration: none;
    color: inherit;
}

#header {
    display: flex;
}

#header #logo {
    margin-right: 5em;
    margin-top: 1.9em;
}

#header #options {
    display: flex;
    gap: 13px;
    padding: 5px
}

#header #searchbar {
    display: flex;
    padding: 5px;
    border: solid 1px #b1b1b1;
    border-bottom-color: #6b6b6b;
    background: linear-gradient(#fff, #cccccc);
}

#header #searchbar > input {
    background-color: #fffee7;

    border: 1px solid #CBCCCE;
    border-left: 1px solid #7B7B7B;
    border-top: 1px solid #7B7B7B;
    font-size: 138%;
    padding: 0.8em 0 0 1em
}

/* Bouttons */
.btn-search {
    background: linear-gradient(#ffe572 50%, #fdc934 51%);
    border: 1px solid #dd9715;
    padding: 5px 70px;
    margin-left: 5px;
}
/* End Bouttons */

#navbar {
    margin-top: 20px;
    display: flex;
    align-items: center;
    color: #6C717A;
}

#navbar > * {
    display: flex
}

#navbar > * {
    padding: 0px 10px;
    border-left: 1px solid #b9c7d3;
    border-right: 1px solid #b9c7d3;
}

#navbar #signin img {
    padding: 2px;
    background-color: white;
    border: solid 1px #a8a8a89c
}

#navbar > * > div {
    margin-left: 5px;
}

#navbar a {
    color: #16387c
}

#main_section {
    display: flex;
    margin-top: 10px;;
    background-color: #ffffff;
    border: solid 1px #bdcad4;
}

#main_section #sites {
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 15px 8px;
}

#main_section #sites > div {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 0px;
    border-bottom: dashed 1px #dfdfdf;
}

#main_section #sites > div img {
    height: 20px;
    border: solid 1px grey;
    border-radius: 5px;
}

#main_section #news {
    margin: 10px;
    border: solid 1px #bdcad4;
    padding: 0px 10px;
}

#main_section #news .main {
    display: flex;
    flex-direction: column;
    max-width: fit-content;
    max-width: 500px;
}

#main_section #trending {
    margin-top: 15px;
    flex-grow: 1;
}

#main_section #trending .title {
    color: #731a8b;
    font-weight: 600;
}

#main_section #trending ol {
    padding: 0px 20px;
}

#main_section #trending ol span {
    color: #6C717A;
}

.primary-text {
    color: #333;
}

.secondary-text {
    color: #6C717A;
}

.purple-text {
    color: #7d3883;
}