body {min-width:320px;}

body{
  background:#fff;
  font-family: Arial, sans-serif;
  background-color: #c792bc;
  background-image: url('./i/patern.png');
  background-repeat: repeat;
  background-size: 127px 127px;
}
.page-shell { position: relative; min-height: 100vh; }
.cloud-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 0; }
.page-content { position: relative; z-index: 1; }
.cloud { position: absolute; width: 180px; height: 100px; background: url('./i/cloud.png') no-repeat center/contain; top: var(--top, 0); left: -220px; opacity: 0.65; animation: cloud-drift var(--drift-duration, 60s) linear infinite; animation-delay: var(--drift-delay, 0s); }
@keyframes cloud-drift {
  from { transform: translateX(-260px) scale(var(--scale, 1)); }
  to { transform: translateX(120vw) scale(var(--scale, 1)); }
}
.container_12 .grid_12{background:#555;color:#fff; box-sizing: border-box;}
.container_12 h1.grid_12{font-family:'Shojumaru', cursive;background:transparent;color:#f00;text-shadow: 0 0 2px #000;}
.container_12 .summary{padding:0 200px; width: 100%;margin: 0 auto 0 auto;box-sizing: border-box;}
.container_12 li{list-style:none;width:100%;padding:10px;margin:10px 0;border-bottom:1px solid #888;box-sizing: border-box;}
.container_12 li div{text-align: right;}
.container_12 div span{color:#888;}
.badges {clear: both;}

footer{padding-top:50px;}
footer p{margin:0;padding: 5px;}

/* Filters & icons */
.filters { position: relative; padding-left: 70px; }
.category-icons { position: absolute; left: -50px; top: 10px; display: flex; flex-direction: column; align-items: center; gap: 10px; 
    padding: 12px 10px; background: #adadad; 
    border: 1px solid #555; border-radius: 12px 0 0 12px; 
    box-shadow: inset -14px 0 13px #888; }
.category-icon { display: inline-flex; align-items: center; justify-content: center; background: transparent; padding: 4px; cursor: pointer; }
.category-icons .category-icon.active { outline: 2px solid #fff; }
.category-icon img { width: 22px; height: 22px; object-fit: contain; display: block; }


/* Links grid */
#links-list { list-style: none; padding: 0 10px; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; align-items: start; }
.link-card { list-style: none; padding: 10px 12px 14px; border-bottom: 1px solid #555; color: #fff; display: flex; flex-direction: column; gap: 10px; }
.link-card .card-row { display: grid; grid-template-columns: 1fr 200px; gap: 12px; align-items: start; }
.link-card .card-content { display: flex; flex-direction: column; gap: 6px; }
.link-card .thumb { display: block; width: 200px; flex-shrink: 0; }
.card-row .thumb img { display: block; width: 200px; height: 120px; max-width: 200px; max-height: 120px; border: 2px solid #aaa;
    box-shadow: 0 0 5px 0 #000; transform-origin: center; }
.link-header { display: flex; align-items: flex-start; gap: 8px; }
.link-header .title { order: 1; flex: 1; font-size: 14px; font-weight: bold; line-height: 1.2; margin: 0; }
.card-footer-row { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; }
.badges-footer { display: flex; gap: 4px; flex-wrap: wrap; flex: 1 1 auto; }
.card-categories { display: flex; justify-content: flex-end; gap: 6px; padding-right: 4px; flex-shrink: 0; }
.card-categories .category-icon { padding: 2px; }
.card-categories .category-icon img { width: 16px; height: 16px; }
.tag { color: #fff; padding: 1px 0; border-radius: 3px; font-size: 10px; line-height: 1.1; }
.tag:before { content: '[';}
.tag:after { content: ']';}
.descriptions p { margin: 0; font-size: 14px; line-height: 1.4; }


/* GRID */
.container_12 {margin-left: auto;margin-right: auto;width: 960px; max-width: 100%; padding: 0 10px; box-sizing: border-box;}
.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12
{display:inline;float:left;position:relative;margin-left:0;margin-right:10px;}
a{color:#fff;}

.push_1, .pull_1,.push_2, .pull_2, 
.push_3, .pull_3,.push_4, .pull_4, 
.push_5, .pull_5,.push_6, .pull_6, 
.push_7, .pull_7,.push_8, .pull_8,
.push_9, .pull_9,.push_10, .pull_10, 
.push_11, .pull_11, .push_12, .pull_12{position:relative;}

.alpha {margin-left: 0;}
.omega {margin-right: 0;}

/* Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .grid_1 {width:60px;}
.container_12 .grid_2 {width:140px;}
.container_12 .grid_3 {width:220px;}
.container_12 .grid_4 {width:300px;}
.container_12 .grid_5 {width:380px;}
.container_12 .grid_6 {width:460px;}
.container_12 .grid_7 {width:540px;}
.container_12 .grid_8 {width:620px;}
.container_12 .grid_9 {width:700px;}
.container_12 .grid_10 {width:780px;}
.container_12 .grid_11 {width:860px;}
.container_12 .grid_12 {width: 940px;}


/* Prefix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .prefix_1 {padding-left:80px;}
.container_12 .prefix_2 {padding-left:160px;}
.container_12 .prefix_3 {padding-left:240px;}
.container_12 .prefix_4 {padding-left:320px;}
.container_12 .prefix_5 {padding-left:400px;}
.container_12 .prefix_6 {padding-left:480px;}
.container_12 .prefix_7 {padding-left:560px;}
.container_12 .prefix_8 {padding-left:640px;}
.container_12 .prefix_9 {padding-left:720px;}
.container_12 .prefix_10 {padding-left:800px;}
.container_12 .prefix_11 {padding-left:880px;}



/* Suffix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .suffix_1 {padding-right:80px;}
.container_12 .suffix_2 {padding-right:160px;}
.container_12 .suffix_3 {padding-right:240px;}
.container_12 .suffix_4 {padding-right:320px;}
.container_12 .suffix_5 {padding-right:400px;}
.container_12 .suffix_6 {padding-right:480px;}
.container_12 .suffix_7 {padding-right:560px;}
.container_12 .suffix_8 {padding-right:640px;}
.container_12 .suffix_9 {padding-right:720px;}
.container_12 .suffix_10 {padding-right:800px;}
.container_12 .suffix_11 {padding-right:880px;}



/* Push Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .push_1 {left:80px;}
.container_12 .push_2 {left:160px;}
.container_12 .push_3 {left:240px;}
.container_12 .push_4 {left:320px;}
.container_12 .push_5 {left:400px;}
.container_12 .push_6 {left:480px;}
.container_12 .push_7 {left:560px;}
.container_12 .push_8 {left:640px;}
.container_12 .push_9 {left:720px;}
.container_12 .push_10 {left:800px;}
.container_12 .push_11 {left:880px;}


/* Pull Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .pull_1 {left:-80px;}
.container_12 .pull_2 {left:-160px;}
.container_12 .pull_3 {left:-240px;}
.container_12 .pull_4 {left:-320px;}
.container_12 .pull_5 {left:-400px;}
.container_12 .pull_6 {left:-480px;}
.container_12 .pull_7 {left:-560px;}
.container_12 .pull_8 {left:-640px;}
.container_12 .pull_9 {left:-720px;}
.container_12 .pull_10 {left:-800px;}
.container_12 .pull_11 {left:-880px;}




/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
.clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}
.clearfix:before,
.clearfix:after {content: '\0020';display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}
.container_12 .lang-flags { 
  display: inline-flex; align-items: center; flex-wrap: wrap; margin: 10px 0 0; color: #fff; 
  padding: 5px 0 10px; background: linear-gradient(180deg,rgba(119, 119, 119, 1) 0%, rgba(85, 85, 85, 1) 50%); 
}
.container_12 .lang-flags span { font-size: 14px; color: #aaa; }
.lang-flag { display: inline-flex; align-items: center; padding: 4px 8px; font-size: 13px; line-height: 1; cursor: pointer; }
.lang-flag.active { outline: 2px solid #000; }
.lang-flag img.flag-icon { width: 18px; height: 12px; object-fit: cover; display: block; margin-right: 5px;box-shadow: 0 0 2px #000;}


@media (max-width: 768px) {
  body { margin: 0; }
  .container_12 { width: 100%; padding: 0 8px; }
  .container_12 .grid_12 { width: 100% !important; margin-left: 0; margin-right: 0; }
  .container_12 .summary { padding: 0 10px; }
  .filters { padding-left: 0; }
  .category-icons { position: static; margin: 0 10px; left: auto; top: auto; flex-direction: row; justify-content: center; box-shadow: none; border-radius: 12px; margin-bottom: 10px; }
  #links-list { grid-template-columns: 1fr; padding: 0; gap: 14px; }
  .link-card .card-row { display: flex; flex-direction: column; }
  .link-card .thumb { width: 100%; display: flex; justify-content: center; }
  .link-card img { width: auto; height: auto; max-width: 200px; max-height: none; margin: 0 auto; border: none; box-shadow: 0 0 0 #000; transform: none; }
  .card-footer-row { align-items: flex-start; }
  .page-shell { padding: 0 0; }
  .container_12 { padding: 0; }
  .cloud-layer { display: none; }
  .ttl {text-align: center; }
  .container_12 li div {text-align: left; }
  .container_12 .lang-flags { gap: 5px; padding: 10px 26px; justify-content: center;}
  .thumb { 
    background: #000;
    background: linear-gradient(270deg,rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 1) 48%, rgba(0, 0, 0, 1) 100%);
    border-radius: 10px;
    overflow: hidden;
  }
  .link-card .card-row img {
    box-shadow: 0 0 5px 0 #fff;
  }
  .container_12 .lang-flags span { display: inline; }
}