*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html,body{
    height:100%;
}
body {
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    overflow: auto;
    line-height: 1.2;
}
b,strong{
	font-weight:700;
}
header, footer, .explanation{
	position:relative;
	display:block;
	max-width: 800px;
	margin: 0 auto;
	padding:15px 25px;
}
.explanation{
	font-size:12px;
	text-align:center;
	margin-bottom:20px;
}
header{
	display:flex;
	gap:20px;
	padding:15px;
}
header > div:last-child(){
	flex:1;
}
header h1{
	margin:0;
	font-size:22px;
}
header h1 span{
	display:block;
	font-weight:normal;
	font-size:18px;
}
header img{
	display:block;
	width:100%;
	max-width:75px;
	min-width: 60px;
	height:auto;
	box-shadow:0 0 5px rgba(0,0,0,0.15);
}
footer{
	text-align:center;
	font-size:14px;
	margin-bottom:20px;
}
footer .social-block{
	display:flex;
	justify-content:center;
	gap:6px;
}
.mb10{
	margin-bottom:10px;
}
.title {
    font-weight: 600;
    line-height:1.1;
}
.title span{
    height:auto;
}
.title div{
    padding-left:0;
}
a,
a:visited
a:active{
    color:#000;
    text-decoration: none;
}
a:hover{
    color:red;
    text-decoration: underline;
}
.theme{
    margin-bottom: 20px;
    box-sizing: border-box;
    padding:15px;
}
.theme-list{
    
}
.theme-list-item.hidden{
    display:none;
}
div.more-btn {
    position: relative;
    display: inline-block;
    cursor:pointer;
    color:#999;
    font-size: 15px;
}
div.more-btn::after {
    content: '\00a0' attr(data-count);
    position: relative;
    display: inline-block;
    margin-left: 4px;
}
div.more-btn.open::after {
    content: '\00a0';
}
div.more-btn::before{
    content:'';
    position:absolute;
    display: block;
    top:2px;
    right:0;
    margin-right:-18px;
    font-size:0;
    width:8px;
    height:8px;
    border: solid #999;
    border-width: 0 1px 1px 0;
    padding: 0;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
div.more-btn.open::before{
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    top:9px;
    margin-right:-12px;
}
.theme > .title{
    margin-left:0;
    margin-bottom:10px;
    font-size:22px;
}
div.theme-date{
    display: block;
    padding:0;
    overflow: inherit;
    color:#999;
    font-size:12px;
    font-family: sans-serif;
    font-weight: normal;
}
p.theme-date{
    display: block;
    padding:0;
    overflow: inherit;
    color:#999;
    font-size:12px;
    font-family: sans-serif;
    font-weight: normal;
}
span.source-name{
    display: block;
    margin:5px 0 7px 0;
    padding:0;
    overflow: inherit;
    color:#999;
    font-size:12px;
    font-family: sans-serif;
    font-weight: normal;
    text-transform: capitalize;
}

.theme-list-item{
    line-height: 1;
    margin-bottom:10px;
    font-size:16px;
}

#flex-container {
    display: block;
    max-width: 800px;
    margin:0 auto;
}

.new-theme .title::before{
    content:'';
    position:relative;
    display:inline-block;
    margin-right:5px;
    width: 22px;
    height:22px;
    background-image:url('data:image/png;base64,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');
    background-repeat:no-repeat;
    background-position:center;
    background-size:22px;
    vertical-align: middle;
}

.source-name::before{
    content:'';
    position:relative;
    display:inline-block;
    width:15px;
    height:15px;
    margin-right:3px;
    background-position: center;
    background-repeat:no-repeat;
    background-size: 100%;
    background-image: var(--main-host);
    vertical-align:bottom;
}
.preview{
	position:relative;
	margin: 5px 0 15px;
	display:block;
	width:100%;
	max-width:769px;
	height:auto;
	border-radius:10px;
}
.theme-list-item .preview{
	max-width:200px;
	border-radius:6px;
	margin:5px 0;
}
.text{
	padding: 5px 0;
	font-weight:normal;
	font-size:16px;
	line-height:20px;
}
@media screen and (max-width: 680px) {
    .preview{
    	max-width:100%;
    }
}