@import url('style.css');

.filters { margin-bottom: 20px; }
.filters .group { margin-bottom: 10px; }
.filters button {
    margin-right: 5px;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: rgb(172, 211, 226);
  }

.filters button:hover{
  background-color: #efbbcc; /* Change background color on hover */
}

.filters button.active { background: #e794c6; color: #fff; }
.channels { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; }
.card {
    border: 5px solid rgb(172, 211, 226);
    background-color: rgb(225, 246, 255, 0.7);
    border-radius: 6px;
    border-image: url(border-image.png) 30 round;
    overflow: hidden;
    text-align: center;
    padding: 10px;
  }
.card img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-bottom: 1px solid #ddd;
    border: 1px solid #efbbc3;
  }
.card h3 { margin: 10px 0 5px; font-size: 14px; }



  .tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
  .tag, .lang {
    font-size: 12px;
    padding: 3px 6px;
    border-radius: 3px;
    color: #fff;
  }
  /* пример цветовых стилей для тегов */
  .tag.hsk1 { background: #91cd9f; }
  .tag.hsk2 { background: #5ac3de; }
  .tag.hsk3 { background: #5d68dc; }
  .tag.hsk4 { background: #d9ce53; }
  .tag.hsk5 { background: #ee5a50; }
  .tag.hsk6 { background: #9439b5; }
  .tag.grammar { background: #edaf52; }
  .tag.vocabulary{background:#cd91c1;}
  .tag.pronunciation {background: #5ac3de;}
  .tag.lesson-recording {background: #de5a95;}
  .tag.hsk-vocab {background: #465f51;}
  .tag.yct-vocab {background: #48465f;}
  .tag.via-movies {background: #bebbe0;}
  .tag.textbook-lesson {background: #a76161;}
  .tag.chinese-characters {background: #40a850;}
  .tag.abt-study-in-china {background: #494949;}
  .lang.CN { background: #bb2020; }
  .lang.EN { background: #4968cf; }
  .lang.RU { background: #8f8b8f; }
  .hidden { display: none; }
  
strong{
    color:rgb(10, 67, 90);
}

.side-column {
    height: 220vh;
}
/*
.page-title-n-decoration {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.main-content img{
  width: 20%;
  height: auto;
}
*/

.top-header {
  padding: 3%;
  flex-shrink: 0;  /* prevents shrinking */
}

.content-area {
  flex-grow: 1;  /* takes up remaining space */
  overflow-y: auto;  /* scrolls if needed */
}

.main-content {
    display: flex;
    flex-direction: column;
    background-image: url("pink-background.jpg");
    background-size: contain;
    justify-content: center;
    flex-direction: column;   /* STACKS TABLES VERTICALLY */
    align-items: stretch;     /* makes tables full width */
  }

.filters-container { 
    background-color: rgba(225, 246, 255, 0.7);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    width: 100%;
    box-sizing: border-box;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border: solid;
  border-width: 3x;
  border-color:rgb(172, 211, 226);
  color:rgb(10, 67, 90);
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
  word-wrap: break-word; /* allows wrapping long words */
}