@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
*{
    box-sizing: border-box;
}
html, body {
    margin: 0;
    padding: 0;
    background-color: #1d202b;
    color: #edefff;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

a{
    color: #12c7d7;
    text-decoration: none;
}
a:hover{
    color: #60f0fe;
    text-decoration: none;
}
.menu{
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}
.content{
    padding: 0 0 0 20px;
}
.content .title{
    font-size: 24px;
    margin: 20px 0;
}
.content.center{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    width: calc(100% - 240px);
    margin-left: 240px;
}
.content .items{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
.item{
    width: 350px;
    height: 246px;
    background-color: #151621;
    border-radius: 15px;
    overflow: hidden;
}
.item .preview{
    width: 350px;
    height: 206px;
}
.item .preview a{
    padding: 0;
    display: block;
    width: 100%;
    height: 100%;
}
.item img{
    width: 100%;
    height: 100%;
}
.item a{
    height: 40px;
    display: flex;
    align-content: center;
    padding: 0 10px;
    align-items: center;
}

/* === ICONS === */
i{
    cursor: pointer;
    display: inline-block;
    width: 32px;
    height: 32px;
    background-size: cover;
    background-image: url('/img/icons/fullscreen.png');
}
i.icon-fullscreen{
    background-image: url('/img/icons/fullscreen.png');
}
i.icon-off-fullscreen{
    background-image: url('/img/icons/off-fullscreen.png');
}
i.icon-controlls{
    background-image: url('/img/icons/controlls.png');
}

i[class^="category-"] {
    filter: invert(100%) brightness(100%);
}
i.category-new-games{
    background-image: url('/img/icons/category/new-games.svg');
}
i.category-arcade{
    background-image: url('/img/icons/category/arcade.svg');
}
i.category-match3{
    background-image: url('/img/icons/category/match3.svg');
}
i.category-educational{
    background-image: url('/img/icons/category/educational.svg');
}
i.category-strategy{
    background-image: url('/img/icons/category/strategy.svg');
}
i.category-simulation{
    background-image: url('/img/icons/category/simulation.svg');
}
i.category-lifestyle{
    background-image: url('/img/icons/category/lifestyle.svg');
}
i.category-popular{
    background-image: url('/img/icons/category/popular.svg');
}
i.category-trendy{
    background-image: url('/img/icons/category/trendy.svg');
}
i.category-board{
    background-image: url('/img/icons/category/board.svg');
}
i.category-kids{
    background-image: url('/img/icons/category/kids.svg');
}
i.category-two-player{
    background-image: url('/img/icons/category/two-player.svg');
}
i.category-sports{
    background-image: url('/img/icons/category/sports.svg');
}
i.category-toddlers{
    background-image: url('/img/icons/category/toddlers.svg');
}
i.category-puzzles{
    background-image: url('/img/icons/category/puzzles.svg');
}
i.category-action{
    background-image: url('/img/icons/category/action.svg');
}
i.category-humor{
    background-image: url('/img/icons/category/humor.svg');
}
i.category-economic{
    background-image: url('/img/icons/category/economic.svg');
}
i.category-adventure{
    background-image: url('/img/icons/category/adventure.svg');
}
i.category-rpg{
    background-image: url('/img/icons/category/rpg.svg');
}
i.category-casino{
    background-image: url('/img/icons/category/casino.svg');
}
i.category-casual{
    background-image: url('/img/icons/category/casual.svg');
}
i.category-balls{
    background-image: url('/img/icons/category/balls.svg');
}
i.category-boys{
    background-image: url('/img/icons/category/boys.svg');
}
i.category-tests{
    background-image: url('/img/icons/category/tests.svg');
}
i.category-novels{
    background-image: url('/img/icons/category/novels.svg');
}
i.category-for-girls{
    background-image: url('/img/icons/category/for-girls.svg');
}
i.category-card{
    background-image: url('/img/icons/category/card.svg');
}
i.category-simulators{
    background-image: url('/img/icons/category/simulators.svg');
}
i.category-racing{
    background-image: url('/img/icons/category/racing.svg');
}
i.category-quizzes{
    background-image: url('/img/icons/category/quizzes.svg');
}
i.category-io-games{
    background-image: url('/img/icons/category/io-games.svg');
}
i.category-horror{
    background-image: url('/img/icons/category/horror.svg');
}


/* === SIDEBAR === */
.sidebar{
    width: 240px;
    height: calc(100% - 60px);
    background-color: #151621;
    position: fixed;
    border-radius: 0 15px 15px 0;
    padding: 20px;
    overflow-y: auto;
}
.sidebar i {
    width: 16px;
    height: 16px;
    margin-right: 10px;
}
.sidebar .category{
    display: flex;
    align-content: center;
    align-items: center;
    flex-direction: row;
    padding: 5px 12px;
    border-radius: 15px;
    margin-bottom: 5px;
    transition: background-color 200ms;
    position: relative;
}
.sidebar .category:hover{
    background: #222653; /* Цвет фона трека */
}
.sidebar .category .games-amount{
    padding: 2px 8px;
    color: #edefff;
    border-radius: 15px;
    background: #222633;
    position: absolute;
    right: 8px;
    font-size: 14px;
}

@media (max-width: 900px) {
    .sidebar {  
        width: 46px;
        height: 100%;
        border-radius: 0 15px 15px 0;
        padding: 10px;
    }
    .sidebar i{
        margin-right: 0;
    }
    .sidebar .category span {
        display: none;
    }
    .sidebar .category {
        padding: 5px;
    }
    .content.center {
        width: calc(100% - 55px);
        margin-left: 40px;
    }
    .sidebar-right{
        display: none;
    }
}

/* Стили для скроллбара */
.sidebar::-webkit-scrollbar {
    width: 10px; /* Ширина скроллбара */
}
.sidebar::-webkit-scrollbar-track {
    cursor: pointer;
    background: #2c2c2c; /* Цвет фона трека */
    border-radius: 10px; /* Радиус скругления */
}
.sidebar::-webkit-scrollbar-thumb {
    cursor: pointer;
    background-color: #00bcd4; /* Цвет ползунка */
    border-radius: 10px; /* Радиус скругления */
    border: 2px solid #2c2c2c; /* Обводка ползунка */
}
.sidebar::-webkit-scrollbar-thumb:hover {
    cursor: pointer;
    background-color: #0097a7; /* Цвет ползунка при наведении */
}