@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap";:root{--primary: #ff931f;--lighter-primary: #ffe1c0;--secondary: #e6eceb;--darker-secondary: #b3c7c3;--dark-secondary: #81a19b;--dark-grey: #565656;--light: #ededed;--deep-blue: #00b3ff;--deep-red: #ff3f3f}*,*::before,*::after{box-sizing:border-box}body,p{margin:0;padding:0}button,a{cursor:pointer}a{text-decoration:none}html{font-size:16px;font-family:Roboto,sans-serif}p::selection{color:var(--light);background-color:var(--primary)}.btn-icon{padding:0;border:none;background:rgba(0,0,0,0);cursor:pointer}.streamer-card{display:flex;gap:.5rem}.streamer-card .streamer-avatar{width:2rem;height:2rem}.streamer-card .streamer-info{display:flex;flex-direction:column;overflow:hidden}.streamer-card .streamer-info .streamer-nikname{font-size:80%;color:var(--primary)}.streamer-card .streamer-info .streamer-video-name,.streamer-card .streamer-info .streamer-nikname .text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.streamer-card .streamer-info .streamer-nikname:hover,.streamer-card .streamer-info .streamer-video-name:hover{color:var(--deep-blue);transition:.3s}.video-block{position:relative;display:flex;background-color:#000}.video-block .btn-video{position:absolute;top:40%;left:45%;display:none}.video-block .btn-video .icon-play{font-size:2rem;color:#fff}.video-block:hover .video-item{opacity:.5;transition:opacity .2s ease-in-out}.video-block:hover .btn-video{display:block}.video-block .video-item img{width:100%;height:100%}.video-block .video-live{position:absolute;top:0;left:0;background-color:var(--deep-red)}.video-block .video-duration{position:absolute;right:0;bottom:0;background-color:var(--dark-grey)}.video-block .video-live,.video-block .video-duration{margin:.5rem;padding:.2rem;border-radius:3px;color:#fff;cursor:pointer}.header{display:flex;justify-content:space-between;align-items:center;width:100%;height:100%;max-height:4rem;padding:1rem;position:fixed;top:0;left:0;z-index:999;background-color:var(--light);box-shadow:0 0 3px 3px var(--dark-secondary)}.logo-block{display:flex;width:30%;gap:1rem}.logo-block .logo{display:inline-flex;gap:.5rem;font-size:1.5rem;color:var(--primary)}.search-block{display:flex;width:40%;gap:1rem}.search-block .search-form{display:flex;flex:1 1 10rem}.search-block .search-form .search-field{width:100%;min-width:10rem;padding:.5rem;border:1px solid var(--darker-secondary);border-radius:3px 0 0 3px}.search-block .search-form .search-submit-btn{padding:.5rem;background:var(--darker-secondary);border:none;border-radius:0 3px 3px 0}.search-block .search-form .search-submit-btn:hover{border-radius:none;background:var(--dark-secondary)}.search-block .btn-search-voice{color:var(--darker-secondary)}.search-block .btn-search-voice:hover{color:var(--dark-secondary)}.panel-block{display:flex;justify-content:flex-end;align-items:center;gap:.5rem;width:30%}.panel-block .notifications .btn-notifications{color:var(--darker-secondary)}.panel-block .notifications .btn-notifications:hover{color:var(--dark-secondary)}.panel-block .profile{position:relative;display:inline-block}.panel-block .profile .btn-profile{padding:.5rem;border-radius:50%;background:var(--primary)}.panel-block .profile .profile-dropdown-menu{display:none;min-width:10rem;position:absolute;right:0;z-index:1;border-radius:5px;background-color:var(--secondary);overflow:hidden;box-shadow:0 8px 16px 0 var(--dark-secondary)}.panel-block .profile .profile-dropdown-menu .item-menu{display:flex;gap:.5rem;padding:.5rem 1rem;color:#000}.panel-block .profile .profile-dropdown-menu .item-menu:hover{background-color:var(--dark-secondary)}.panel-block .profile .profile-dropdown-menu .item-menu:last-child{color:vars(--deep-red);border-top:1px solid var(--secondary)}.panel-block .profile:hover .btn-profile{background-color:var(--darker-secondary)}.panel-block .profile:hover .profile-dropdown-menu{display:block}.side-bar{display:flex;flex-direction:column;height:100%;max-height:calc(100% - 4rem);width:13rem;position:fixed;top:4rem;left:0;z-index:1;background:var(--secondary)}.streamers-block{display:flex;flex-direction:column;flex:1 1 auto;overflow:hidden;overflow-y:scroll;border-bottom:1px solid #fff}.streamers-block .streamer-card{display:flex;justify-content:space-between;align-items:center;padding:1rem}.streamers-block .streamer-card:hover{background-color:var(--darker-secondary)}.streamers-block .streamer-card .streamer-name{margin-left:.5rem;margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.streamers-block .streamer-card .streamer-observers{display:flex;align-items:center;margin-left:.5rem}.streamers-block .streamer-card .streamer-observers .icon-rec{font-size:.5rem;color:var(--deep-red);margin-right:.3rem;border-radius:50%;transform:scale(1);animation:pulse-red 2s infinite}.info-block{display:flex;flex-direction:column;gap:1rem;margin:1rem;padding:1rem;border-radius:5px;background-color:var(--darker-secondary);text-align:center}.info-block .contacts{display:flex;justify-content:space-around}.info-block .contacts .contact-item:hover{color:var(--deep-blue);transition:.3s}@keyframes pulse-red{0%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(255,82,82,.7)}70%{transform:scale(1);box-shadow:0 0 0 5px rgba(255,82,82,0)}100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(255,82,82,0)}}@media screen and (max-width: 1200px){.side-bar{width:4rem}.info-block,.streamers-block .streamer-card .streamer-name,.streamers-block .streamer-card .streamer-observers{display:none}}.main-content{display:flex;flex-direction:column;min-height:calc(100vh - 4rem);padding:0 1rem;margin-top:4rem;margin-left:13rem;overflow-y:scroll}.nav-section{display:grid;grid-gap:1rem;grid-template-columns:3rem;grid-auto-flow:column;align-content:center;height:100%;max-height:4rem;padding:1rem 0;overflow-x:scroll;overflow-y:hidden;scroll-snap-type:x proximity;text-align:center}.nav-section .nav-item{padding:.5rem;border-radius:15px;border:1px solid var(--darker-secondary);background-color:var(--secondary);line-height:1rem}.nav-section .nav-item:hover{background-color:var(--darker-secondary);transition:.3s}.nav-section .active{color:#fff;background-color:var(--primary);border-color:var(--primary)}.videos-section{flex:1 1 auto;display:grid;grid-template-columns:repeat(auto-fill, minmax(20rem, 1fr));grid-gap:.5rem;align-items:center}.videos-section .card{border-radius:5px;overflow:hidden}.videos-section .card .card-info{display:flex;justify-content:space-between;padding:.5rem;background-color:var(--secondary)}.videos-section .card .card-info .streamer-card{max-width:85%}.videos-section .card .card-info .btn-option{max-width:15%}.carousel-section{display:flex;justify-content:center;flex-direction:column;align-items:center;width:100%;max-width:calc(100% - 13rem);height:15rem;margin:4rem auto;transform-style:preserve-3d}.carousel-section .carousel-control{display:none}.carousel-section .cards{position:relative;width:100%;height:100%}.carousel-section .cards .card{position:absolute;top:0;left:15%;right:15%;display:flex;width:30rem;height:15rem;margin:0 auto;border-radius:5px;overflow:hidden;transition:transform .4s ease;box-shadow:0 8px 16px 0 var(--dark-secondary)}.carousel-section .cards .card .card-info{display:flex;flex-direction:column;gap:.5rem;max-width:30%;padding:.5rem;background-color:var(--secondary)}.carousel-section .cards .card .card-info .card-description{font-size:85%;color:var(--dark-secondary)}.carousel-section #item-1:checked~.cards #video-3,.carousel-section #item-2:checked~.cards #video-1,.carousel-section #item-3:checked~.cards #video-2{transform:translateX(-30%) scale(0.8);opacity:.4;z-index:0}.carousel-section #item-1:checked~.cards #video-2,.carousel-section #item-2:checked~.cards #video-3,.carousel-section #item-3:checked~.cards #video-1{transform:translateX(30%) scale(0.8);opacity:.4;z-index:0}.carousel-section #item-1:checked~.cards #video-1,.carousel-section #item-2:checked~.cards #video-2,.carousel-section #item-3:checked~.cards #video-3{transform:translateX(0) scale(1);opacity:1;z-index:1}.footer-section{display:flex;justify-content:center;align-items:center;gap:.5rem;width:100%;padding:1rem 0;margin-top:2rem;text-align:center}.footer-section .btn-icon{color:var(--deep-red)}.footer-section .btn-icon:hover{color:var(--deep-blue)}@media screen and (max-width: 1200px){.main-content{margin-left:4rem}.carousel-section .cards .card{left:0;max-width:calc(100% - 4rem)}}