:root{
  --background-color:#121821;
  --text-color:#F1F5F9;
  --headers:#0A1018;
  --sec-header:#253040;
  --accent:#36B7B0;
  --accent-hover:#27938D;
  --border-color:rgba(54,183,176,.35);
  --font-size-base:17px;
  --line-height-base:1.55;
}

[hidden],
.links[hidden],
#main-menu[hidden],
#mobile-search[hidden]{display:none!important;}

.visually-hidden{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

html{scroll-behavior:smooth;}

body,a,button,input{transition:background-color .25s,color .25s,border-color .25s;}

body{
  background-color:var(--background-color);
  color:var(--text-color);
  font:var(--font-size-base)/var(--line-height-base) "Inter","Roboto",sans-serif;
  margin:0;
  padding:0;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--accent);text-decoration:none;}
a:hover,.links a:hover{color:#fff;background-color:var(--accent);}

header{
  background-color:var(--headers);
  position:relative;
  width:100%;
  display:flex;
  justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.1);
}

.head{width:100%;max-width:1500px;display:flex;justify-content:space-between;align-items:center;padding:2px;}

.logotype a{display:block;width:200px;height:45px;background:url(/icon/logo-ebashki.svg) no-repeat left;background-size:contain;}

.menu-wrapper{display:flex;align-items:center;}

.search-form{display:flex;align-items:center;background:var(--sec-header);border:1px solid var(--border-color);border-radius:4px;overflow:hidden;}
.search-form input[type="text"],#cat-filter{padding:8px 12px;font-size:14px;border:none;background:transparent;color:var(--text-color);}
#cat-filter{width:100%;max-width:300px;margin:0 auto 15px;display:block;background:var(--sec-header);border:1px solid var(--border-color);border-radius:6px;}
.search-form input[type="text"]::placeholder,#cat-filter::placeholder{color:#ccc;}
.search-form button{background:var(--accent);border:none;color:var(--text-color);padding:6px 12px;cursor:pointer;}
.search-form button:hover{background:var(--accent-hover);}

.search-icon-button{display:none;background:url(/icon/search_icon.png) no-repeat center;background-size:24px 24px;width:40px;height:40px;border:none;cursor:pointer;}

.mobile-search-form{overflow:hidden;max-height:0;transition:max-height .4s;background:var(--sec-header);width:90%;margin:0 auto;}
.mobile-search-form form{display:flex;border:1px solid var(--border-color);border-radius:4px;overflow:hidden;}
.mobile-search-form input[type="text"]{flex:1;padding:8px;font-size:16px;border:none;background:transparent;color:var(--text-color);}
.mobile-search-form input[type="text"]::placeholder{color:#ccc;}
.mobile-search-form button{background:var(--accent);border:none;color:var(--text-color);padding:8px 12px;font-size:16px;cursor:pointer;}
.mobile-search-form button:hover{background:var(--accent-hover);}

.mobile-menu-button{display:none;padding:16px;border:none;cursor:pointer;background:url(/icon/openmenu.svg) no-repeat center;}
.mobile-menu-button[aria-expanded="false"]{background:url(/icon/openmenu.svg) no-repeat center;}
.mobile-menu-button[aria-expanded="true"]{background:url(/icon/closemenu.svg) no-repeat center;}

.toggle-button{
  width:100%;padding:10px;background-color:var(--headers);color:#fff;border:none;cursor:pointer;text-align:left;font-size:17px;background:url(/icon/down.png) no-repeat right;
}
.toggle-button[aria-expanded="true"]{background:url(/icon/top.png) no-repeat right;}
.toggle-button[aria-expanded="false"]{background:url(/icon/down.png) no-repeat right;}

.ancor_list{width:250px;display:flex;justify-content:center;gap:16px;flex-wrap:wrap;position:relative;background:var(--headers);padding:15px;}

.column{width:100%;position:relative;}

.links{list-style:none;padding:10px;background-color:var(--sec-header);margin-top:5px;width:95%;position:static;left:0;z-index:10;box-shadow:0 4px 8px rgba(0,0,0,.1);border-radius:4px;white-space:nowrap;}
.links a{padding:8px 5px;display:block;color:var(--text-color);overflow:hidden;white-space:nowrap;border-bottom:1px solid var(--headers);}
.links li:last-child a{border-bottom:none;}

.letters{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:10px 0;}
.letters a{padding:4px 8px;border-radius:6px;background:var(--sec-header);color:var(--text-color);text-decoration:none;transition:background-color .3s ease;}
.letters a:hover{background:var(--accent);color:#fff;}

h1.h1-top-bar{font-size:19px;box-shadow:0 7px 20px -10px rgba(0,0,0,1);margin:10px 0;background-color:var(--sec-header);padding:5px 10px;}

main{max-width:1500px;margin:0 auto;padding:0 10px;}
.container{display:flex;flex-direction:row;align-items:flex-start;gap:10px;}

.category-list{display:flex;flex-wrap:wrap;gap:20px;padding:20px;justify-content:center;}

.tag-link{background:var(--headers);border-radius:10px;box-shadow:0 2px 5px rgba(0,0,0,.1);padding:15px;min-width:200px;max-width:300px;flex:1;text-align:left;transition:transform .25s,box-shadow .25s;}
.tag-link:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.25);}
.tag-link .title-bar{font-size:18px;font-weight:bold;text-transform:uppercase;background:var(--sec-header);color:#ffffff;padding:10px;border-radius:5px;margin-bottom:10px;}
.tag-link ul{list-style:none;margin:0;padding:0;}
.tag-link ul li{padding:8px 0;border-bottom:1px solid var(--sec-header);}
.tag-link ul li:last-child{border-bottom:none;}
.tag-link ul li a{color:#fff;text-decoration:none;font-size:16px;display:block;padding:5px 2px;transition:color .3s ease;}

footer,header{border-top:1px solid var(--border-color);} 
footer{color:#fff;display:flex;justify-content:center;align-items:center;flex-direction:column;background-color:var(--headers);width:100%;box-shadow:0 -2px 5px rgba(0,0,0,.4);padding:8px 0;margin-top:8px;}
footer a{text-decoration:underline;}

@media(min-width:1024px){
  #main-menu[hidden]{display:flex!important;}
  .links[hidden]{display:block!important;}
  #main-menu{display:flex;gap:16px;}
}

@media(max-width:768px){
  .search-form{display:none;}
  .search-icon-button{display:block;}
  .mobile-menu-button{display:block;margin:0 12px;}
  .ancor_list{flex-direction:column;gap:0;width:88%;background-color:var(--headers);position:absolute;top:60px;z-index:5;}
  .column{width:100%;}
  .toggle-button{text-align:left;border-bottom:1px solid var(--sec-header); margin: 0 2px;} 
  .links{width:95%;display:grid;max-height:450px;overflow-y:auto;}
  .mobile-search-form:not([hidden]){max-height:200px;}
}

@media(max-width:360px){.container{width:100%;}}