:root{
  --bg:#ffffff;
  --text:#4e4d4d;
  --brand:#b01372;
  --brand-2:#9424d1;
  --brand-3:#c773ea;
  --link:#005699;
  --link-h:#007BCC;
  --card-shadow: inset 0 -15px 15px rgba(0,0,0,.25);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#121212;
    --text:#d4d4d4;
    --brand:#9d2aa9;
    --brand-2:#7c20af;
    --brand-3:#a763c7;
    --link:#6fbaff;
    --link-h:#9cd0ff;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background-color:var(--bg);
  color:var(--text);
  font:17px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  margin:0;
  padding:0;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
ul,li,p{list-style:none;margin:5px;padding:0}
a{font-weight:700;color:var(--link);text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,.1)}
a:hover,.logo a:hover,.menu a:hover,.foot a:hover{color:var(--link-h)}
a:focus-visible{outline:2px solid var(--link-h);outline-offset:2px;border-radius:4px}

.menu{display:flex}
.menu a{
  color:#fff;text-decoration:none;padding:12px 16px;margin:0 2px;box-shadow:var(--card-shadow);
  line-height:1; border-radius:10px;
}

.menu-button{
  display:none;width:40px;height:40px;border:none;cursor:pointer;background:url(/img/menu.svg) no-repeat center / 24px 24px;
  border-radius:10px; margin:6px;
}

.popup-menu{
  display:none;position:fixed;top:56px;right:8px;background-color:var(--brand);box-shadow:0 8px 16px rgba(0,0,0,.2);z-index:6;
  flex-wrap:wrap; padding:6px; border-radius:12px; max-width:92vw;
}
.popup-menu a{
  padding:12px 14px;display:block;flex:1 0 95%;text-align:left;box-sizing:border-box;border-radius:10px;
}
.popup-menu a:nth-child(odd){border-right:1px solid rgba(255,255,255,.08)}

h2,.h2{font-size:18px;margin:4px}
h2{color:#D5006F}
.h2{
  color:#fff;position:absolute;top:0;left:0;padding:7px 9px;border-radius:7px 0;background-color:var(--brand-2);box-shadow:var(--card-shadow);
  max-width:85%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}

h1{
  display:inline-block;font-size:20px;color:var(--brand);font-weight:800;text-overflow:ellipsis;text-transform:capitalize;margin:7px 5px;
}

.h1-bar{
  box-shadow:0 7px 20px -10px rgba(0,0,0,1);min-height:30px;text-align:left;width:100%;padding:6px 7px;margin: 8px 0;
}

.neutral-title{
  clear:both;text-align:left;font-weight:700;padding:9px;border-bottom:1px solid var(--link);margin:7px;
}

.logo a{
  display:block;color:#fff;padding:12px;border-radius:12px;box-shadow:var(--card-shadow)
}

.infos{padding:5px;text-align:left;margin:7px;clear:both}
.infos a{text-decoration:underline}

.top-menu{
  background-color:var(--brand);box-shadow:var(--card-shadow);position:sticky;top:0;width:100%;z-index:5;display:flex;flex-direction:column;
  backdrop-filter:saturate(120%) blur(6px);
}
.top-header{
  display:flex;justify-content:space-between;align-items:center;width:100%;gap:8px; padding-inline:6px;
}

.categoryes{padding:2px;text-align:left;margin:3px 4px}
.categoryes li{
  white-space:nowrap;text-overflow:ellipsis;margin:2px;height:38px;line-height:38px;background-color:var(--brand-2);display:inline-block;border-radius:10px;box-shadow:inset 0 -12px 12px rgba(0,0,0,.2);max-width:100%;
}
.categoryes li a{color:#fff;display:block;padding:0 12px;border-radius:10px;overflow:hidden;text-overflow:ellipsis}
.categoryes li a:hover{background-color:var(--brand-3);box-shadow:inset 0 -15px 15px rgba(0,0,0,.4)}

.content{overflow:hidden;margin:0 auto;width:100%;max-width:1400px;padding:6px}

.thumbs{
  position:relative;width:calc(33.33% - 2%);margin:0 1% 8px;float:left;border-radius:12px;overflow:hidden;
  aspect-ratio: 2 / 3;
  background: #f3f3f3;
}
.thumbs img{
  width:100%;
  height:100%;
  display:block;
  border-radius:12px;
  object-fit:cover;
  transition: opacity .25s ease;
}
.thumbs:hover{opacity:.9}

.footer{
  background:var(--brand);width:100%;text-align:right;float:left;font-weight:700;bottom:0;box-shadow:var(--card-shadow);padding:5px 12px;
}
.footer span{
  float:right;
}
.foot{
  margin:0 auto;width:100%;max-width:1400px;padding:12px 0;text-align:left;color:#fff;
}
.foot a{color:#fff;text-decoration:none}

#scrollBtn{
  width:44px;height:44px;opacity:.9;position:fixed;bottom:50px;right:20px;display:none;border:none;cursor:pointer;background:url(/img/icon_top.png) no-repeat center / contain;
  border-radius:50%;
}

@media all and (min-width:1020px){
  h1{text-align:left}
  .foot{width:996px}
}
@media screen and (min-width:1400px){.thumbs{width:calc(25% - 2%)}}
@media screen and (max-width:830px){.thumbs{width:calc(50% - 2%)}}
@media screen and (max-width:768px){
  .menu{margin-right:0;display:none;width:100%}
  .menu-button{display:block;float:right}
  .popup-menu{display:flex}
}
@media screen and (max-width:480px){
  .categoryes li{display:block}
  .thumbs{width:98%}
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto}
  .thumbs img{transition:none}
}