:root {
    --main-color: #332c72;
    --main-color-bg: #eee;
    --bg_art_color: #eff3f3;
    --bg_box_color: #dedede;
    --main-font-size: 20px;
}

*,::after,::before {
    box-sizing: border-box;
}

div::after {
    content: " ";
    display: table;
    clear: both;
}

html {
    background-color: var(--main-color-bg);
    height: 100%;
    font-size: var(--main-font-size);
    line-height: 1.6em;
    color: #212529;
    scroll-behavior: smooth;
    scroll-padding-top: 70px;
}

body {
    background-color: var(--main-color-bg);
    margin: 0;
    font-family: "m",Arial,sans-serif,tahoma;
}

img:is([sizes="auto" i], [sizes^="auto," i]) {
    contain-intrinsic-size: 3000px 1500px
}

a {
    text-decoration: none;
    color: #555;
}

a:hover {
    opacity: 0.9;
}

table {
    max-width: 100%;
    width: 100%;
}

.button {
    padding: 4px 20px;
    background: var(--main-color);
    border: 1px solid rgba(0,0,0,0.1);
    text-align: center;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    text-shadow: 0.5px 1px #000;
    box-shadow: 0 -2px 0 0 rgba(0,0,0,0.2) inset;
    font-family: "m",Arial,sans-serif,tahoma;
    font-size: 90%;
}

.button:hover {
    box-shadow: 0 0 0 100px rgba(0,0,0,0.2) inset;
    color: white;
}

h1 {
    margin: 0 0 1em 0;
    font-size: 150%;
    font-weight: bold;
    text-align: center;
}

.header {
    background-color: var(--main-color);
    z-index: 10;
    display: flex;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    position: fixed;
    width: 100%;
    top: 0;
    right: 0;
    left: 0;
}

.header-in {
    width: 950px;
    margin: 10px auto;
    height: 40px;
}

.logo {
    float: right;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.logo a {
    color: #fff;
    font-weight: bold;
    font-size: 140%;
    text-shadow: 1px 1px 1px #00000073;
}

.logo .img {
    display: block;
}

.logo .img:hover {
    opacity: 0.8;
}

.logo-center {
    margin: 0 auto;
    display: table;
    padding: 0 0.8em;
}

.text_logo {
    font-size: 300%;
    margin: 1em 0 0.5em 0;
    line-height: 1em;
    text-align: center;
    padding: 0 0.5em;
    font-weight: bold;
}

img {
    max-width: 100%;
    height: auto;
}

.search {
    width: 80%;
    height: 100%;
    margin: 2em auto;
}

.ind {
    padding: 0 0.7em;
}

.search-form {
    width: auto;
    padding: 0 16px 0 16px;
    height: 100%;
    min-height: 40px;
    margin: 0;
    position: relative;
    border: solid 4px var(--main-color);
}

.search-field {
    border: 0 none;
    width: calc(100% - 40px);
    font-family: "m",Arial,sans-serif,tahoma;
    height: 50px;
    background: transparent;
    outline: none;
    font-size: 100%;
}

.search-btn {
    width: 20px;
    height: -webkit-fill-available;
    background: url('data:image/svg+xml,<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%238c9196" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg>')center no-repeat;
    border: 0 none;
    cursor: pointer;
    position: absolute;
    top: 53%;
    transform: translateY(-50%);
    left: 18px;
}

.m1 {
    max-width: 950px;
    margin: 0 auto;
    margin-top: 90px;
    margin-bottom: 10px;
    word-break: break-word;
}

.m2 {
    padding: 1em;
    /* box-shadow: 0 0 2px rgba(0,0,0,0.3); */
    margin-bottom: 20px;
    /* background-color: var(--bg_art_color); */
    /* border: solid 1px #00000030; */
}

.m3 {
    padding-bottom: 20px;
}

.footer {
    padding: 20px;
    font-size: 90%;
    overflow: hidden;
}

.footer .container {
    text-align: center;
    margin: 6px 0;
}

.footer .container ul {
    margin: 0;
    padding: 0;
}

.footer .container li {
    display: inline-block;
    margin: 0 10px;
}

.silver {
    color: #aaa;
}

.mcls {
    display: flex;
    flex-wrap: wrap;
}

.mcl {
    padding: 5px;
    display: flex;
}

.mcl a {
    display: block;
    box-shadow: 0px 0px 1px rgb(0 0 0 / 40%);
    width: 100%;
    background-color: #fff;
}

.mcl img {
    width: 100%;
}

.mcl .ratio {
    padding-bottom: 56.25%;
    overflow: hidden;
    height: 0;
}

.mcl .ti {
    padding: 5px 6px 10px 6px;
    color: var(--main-color);
    word-wrap: break-word;
    text-align: center;
    line-height: 20px;
    overflow: hidden;
    max-height: 150px;
    font-size: 95%;
}

@media screen and (min-width: 801px) {
    .mcl {
        width:20%;
    }
}

@media screen and (min-width: 651px) and (max-width:800px) {
    .mcl {
        width:25%;
    }
}

@media screen and (min-width: 501px) and (max-width:650px) {
    .mcl {
        width:33.333%;
    }
}

@media screen and (min-width: 351px) and (max-width:500px) {
    .mcl {
        width:50%;
    }
}

@media screen and (min-width: 0px) and (max-width:350px) {
    .mcl {
        width:100%;
    }
}

@media screen and (min-width: 0px) and (max-width:350px) {
    .logo {
        left:50%;
        transform: translate(-50%,-50%);
        width: max-content;
    }
}

@media screen and (max-width: 970px) {
    .header-in {
        width:100%;
        margin: 10px 12px;
    }
}

.list ul {
    padding: 0;
}

.list ul li {
    margin: 6px;
    padding: 8px;
    left: 0;
    color: var(--main-color);
    list-style: none;
    border-right: 4px solid var(--main-color);
    background: linear-gradient(to right,#fff,#f3f3f3);
}

.list ul li:hover {
    color: #fff;
    background: var(--main-color);
}

.scroll {
    background: url('data:image/svg+xml,<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-up" class="svg-inline--fa fa-arrow-up fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="%23fff" d="M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z"></path></svg>')center no-repeat;
    background-size: 60%;
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: -80px;
    border-radius: 100%;
    background-color: var(--main-color);
    transition: 300ms;
    box-shadow: 0 0 2px 1px rgba(0,0,0,0.3);
    width: 40px;
    height: 40px;
}

.scroll:hover {
    box-shadow: 0 0 0 100px rgba(0,0,0,0.2) inset;
}

.scroll:active {
    border: solid;
}

.visible {
    right: 20px;
    transition: all 400ms;
    transform: rotate(360deg);
}

.items {
    padding: 0;
}

.items li {
    list-style-type: none;
    border: 1px solid #39315947;
    margin-bottom: 1em;
    padding: 1em;
    background-color: #fff;
}

.items .up {
    border-bottom: 1px dotted #d2cffc;
    margin-bottom: 1em;
    padding-bottom: 1em;
}

.items .up .txt_box {
    float: right;
}

.items .up .txt_box .line {
    margin-bottom: 0.2em;
}

.v_title_icon::before {
    content: url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%238c9196" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg>');
    display: block;
    width: 22px;
    float: right;
    margin: 0 0 0 0.5rem;
    padding-top: 0.3rem;
}

.v_time_icon::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%238c9196" d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120l0 136c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2 280 120c0-13.3-10.7-24-24-24s-24 10.7-24 24z"/></svg>');
    display: block;
    width: 22px;
    float: right;
    margin: 0 0 0 0.5rem;
    padding-top: 0.3rem;
}

.items .up .img_box {
    float: left;
}

.items .down .cls {
    display: flex;
    flex-wrap: wrap;
}

.items .down .cls .cl {
    width: 33.333%;
    text-align: center;
    padding: 0.5em;
}

.items .down .cls .cl button {
    width: 100%;
    padding: 0.5em;
}

@media screen and (max-width: 600px) {
    .items .down .cls .cl {
        width:100%;
    }

    .search {
        width: 95%;
    }
}

.items .down .hidden_box {
    display: none;
    text-align: center;
    margin-top: 1em;
}

.items .down .but_download_icon {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path style="fill:%23fff" d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 242.7-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7 288 32zM64 352c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-101.5 0-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352 64 352zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg>')center no-repeat;
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: text-top;
}

.items .down .but_play_icon {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path style="fill:%23fff" d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>')center no-repeat;
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: text-top;
}

.items .down .but_text {
    padding: 0 8px;
}

.plyr {
    width: 100%;
    max-width: 500px !important;
    margin: 0 auto;
}

.center {
    text-align: center;
    margin: 0 auto;
    margin-bottom: 20px;
}

#suggestions-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    position: absolute;
    width: calc(100% - 20px);
    background-color: #fff;
    box-shadow: 0 2px 4px rgb(0 0 0 / 54%);
    margin-top: 3px;
    right: 0;
    width: 100%;
    font-size: 80%;
    z-index: 9;
}

#suggestions-list li {
    padding: 8px;
    cursor: pointer;
}

#suggestions-list li::before {
    content: url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%238c9196" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg>');
    display: block;
    width: 22px;
    height: 10px;
    float: right;
    margin: 5px 10px;
}

#suggestions-list li:hover,.suggestion-active {
    background-color: #eee;
}

@font-face {
    font-family: 'm';
    font-display: swap;
    src: url(https://fonts-cdn.com/fonts/ge.woff) format("woff");
}


.m2,.items li,button,.items .up .img_box img,.plyr,.cl a,.list ul li,#suggestions-list {
    border-radius: 6px;
    overflow: hidden;
}

.intro{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.idea {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

}
.idea > div {
    margin: 0px 5px;
    max-width: 300px;
}