*{scroll-behavior:smooth;margin:0}:root{--main-background-color:#303030;--text-color:#fff;--placeholder-text-color:#999;--svg-dark:#0f0f0f;--border-color:#505050;--border-color-hover:#686868;--button-background-color:#3d3d3d;--button-background-color-hover:#4a4a4a;--text-color-dark:#0f0f0f;--button-background-color-active:#999;--video-card-hovered-color:#494949}html{background-color:var(--main-background-color);color:var(--text-color)}header{justify-content:space-between;display:flex;position:relative}.left-container,.right-container{justify-content:flex-start;gap:10px;margin:8px;display:flex;position:relative}.logo{font-size:26px}.logo-gorod{margin:-5px;font-size:16px}.open-menu{background:var(--button-background-color);border:2px solid var(--border-color);color:var(--text-color);width:35px}.open-menu:hover{background:var(--button-background-color-hover);border:2px solid var(--border-color-hover);color:var(--text-color);cursor:pointer}.btn-icon{width:15px;margin-top:2px}.search-container{justify-content:center;margin:8px;display:flex}.search-item{gap:12px;display:flex}.search-item input{color:var(--text-color);background:var(--button-background-color);border:2px solid var(--border-color);-webkit-backdrop-filter:blur(.5px);backdrop-filter:blur(.5px);border-radius:4px;width:750px}.search-item input::placeholder{color:var(--placeholder-text-color)}.search-item button{color:var(--text-color);background:var(--button-background-color);border:2px solid var(--border-color);border-radius:4px}.search-item button:hover{color:var(--text-color);background:var(--button-background-color-hover);border:2px solid var(--border-color-hover);cursor:pointer;border-radius:4px}.create-video,.notification,.account{color:var(--text-color);background:var(--button-background-color);border:2px solid var(--border-color);border-radius:4px}.create-video:hover,.notification:hover,.account:hover{color:var(--text-color);background:var(--button-background-color-hover);border:2px solid var(--border-color-hover);cursor:pointer;border-radius:4px}.notification svg{color:var(--text-color)}.header-ava{border-radius:50px;width:25px;height:25px;margin-top:3px}main{margin:15px}.home-container{flex-direction:column;gap:15px;display:flex}.genre-container{align-items:flex-start;gap:10px;display:flex}.genre-name{background:var(--button-background-color);border:2px solid var(--border-color);color:var(--text-color);font-size:18px}.genre-name:hover{background:var(--button-background-color-hover);border:2px solid var(--border-color-hover);color:var(--text-color);cursor:pointer;font-size:18px}.genre-name:active{background:var(--button-background-color-active);border:2px solid var(--border-color);color:var(--text-color-dark);font-size:18px}.video-recomendations-container{flex-flow:wrap;gap:15px;display:flex}.video-card{color:var(--text-color);cursor:pointer;background:0 0;border:none;flex-direction:column;width:360px;display:flex}.video-card:hover{background:var(--video-card-hovered-color);cursor:pointer;color:var(--text-color);border:none;border-radius:12px;flex-direction:column;width:360px;display:flex}.video-preview{width:340px;height:190px;margin-top:5px}.video-info-container{gap:15px;margin-top:8px;display:flex}.video-ava{border-radius:50%;width:50px;height:50px}.video-info-block{flex-direction:column;align-items:flex-start;gap:5px;display:flex}.view-date-block{flex-direction:row;gap:5px;display:flex}.video-title{text-align:left;text-wrap:wrap;font-size:22px}.video-channel,.views-video,.view-razdel,.date-video{text-wrap:wrap;font-size:17px}.shorts-container{flex-direction:column;gap:15px;display:flex}.shorts-video-container{flex-direction:row;display:flex}.shorts-video-card{color:var(--text-color);cursor:pointer;background:0 0;border:none;flex-direction:column;width:250px;display:flex}.shorts-preview-img{border-radius:10px;width:240px;height:480px}.shorts-info-container{flex-direction:row;display:flex}.shorts-context-button-container{flex-direction:row;margin-top:5px;display:flex}.shorts-name-text{text-align:left;text-wrap:wrap;font-size:22px}.shorts-views-count{text-wrap:wrap;text-align:left;font-size:17px}.shorts-extend{color:var(--text-color);background:var(--button-background-color);border:2px solid var(--border-color);border-radius:25px;width:35px;height:35px}.shorts-extend:hover{color:var(--text-color);background:var(--button-background-color-hover);border:2px solid var(--border-color-hover);cursor:pointer;border-radius:25px;width:35px;height:35px}