html {margin: 0; padding: 0; font-family: Arial;}
body {margin: 0; padding: 0;}
a {text-decoration: none; transition: all 0.3s;}
a:hover {text-decoration: underline;}

header {margin: 0; padding: 5px 4%; background-color: orange; height: 42px; overflow: hidden; transition: all 0.3s; text-align: center;}
header div {display: flex; justify-content: space-between; align-items: center;}
header h1 {margin: 0; padding: 0 10px; display: inline; font-size: 170%;}
header img {height: 30px; position: relative; top: 5px;}
header a {color: black;}
header ul {margin: 0; padding: 0; list-style: none;}
header li {} /*display: inline-block;*/

.menu {margin-left: 4%;}
.menu li {padding: 10px 0;}
.menu li:hover a {color: white;}

.addtoany {margin: 20px 0;}


.c-wrapper {display: flex; flex-wrap: nowrap; justify-content: space-between; margin: 0 auto; width: 100%; flex-direction: column;}
.c-wrapper .c-extra {height: 200px;}

main {padding: 0 4%;}

.search {padding: 20px 0; text-align: center;}
.search input[type="search"] {width: 100%; font-size: 120%; padding: 5px;}
.search input[type="submit"] {font-size: 120%; padding: 5px; margin: 5px;}

.trends-summary summary {font-size: 120%; font-weight: normal;}

.small-trends-info {margin-bottom: 20px; line-height: 25px; text-align: justify;}
.small-trends-info h4 {display: inline; font-weight: bold;}
.small-trends-info a {margin-right: 7px;}
.small-trends-info p {display: inline;}

.breadcrumbs {margin: 8px 4%; font-size: 90%;}
.breadcrumbs ul {margin: 0; padding: 0; list-style: none;}
.breadcrumbs ul > li {display: inline; padding-right: 5px;}

.trends-container {margin: 10px 0; border: 1px solid orange;}
.trends-container summary {font-size: 110%; background-color: lightgray; padding: 3px; font-weight: bold;}
.trends-container > div {padding: 5px; line-height: 26px;}
.trends-container > div > a {padding: 0 7px; margin: 2px 10px; background-color: lightblue; border-radius: 5px; display: inline-block; white-space: nowrap;}

.articles article {margin: 25px 0; font-size: 90%;}
.articles article:hover {background-color: lightgray;}
.articles article h1 {margin: 0; padding: 0; font-size: 1.3em;}
.articles article p {margin: 0; padding: 0; text-align: justify;}
.articles article .origin {}


.origin {margin: 5px 0; display: block;}

.more {padding: 15px 0; font-size: 140%; font-weight: bold; font-style: italic;}

footer {padding: 10px 5px; margin-top: 10px; border-top: 1px solid gray; text-align: center;}


/* */
@media (min-width: 900px) {
    /* body {background-color: lightblue;} */

    #menu-button {display: none;}
    header {height: 72px; text-align: inherit;}
    header div {align-items: flex-start; justify-content: flex-start;}
    header li {display: inline-block; margin-right: 20px;}
    .menu {margin-left: 0;}

    .c-wrapper {flex-direction: row;}
    .c-wrapper .c-extra {height: 100%; width: 20%;}

    .search {margin: 20px 0;}
    .search input[type="search"] {width: 50%;}
}