style.css

body{margin:0;transition:.5s all}body.night{background-color:#000}.logo{margin:30px 0}.logo img{width:130px}.hamburger{margin-right:30px;cursor:pointer}[data-slide]{height:0;overflow:hidden;transition:all 350ms;opacity:0}[data-slide].slide-active{opacity:1;margin-bottom:30px}.search{display:flex;margin:0 auto}.search__input{width:230px;height:30px;border:1px solid rgba(0,0,0,.1);border-bottom-left-radius:4px;border-top-left-radius:4px;padding:0 15px}.search__input:focus{outline:0}.search button{display:flex;align-items:center;width:30px;height:30px;background:#ec2027;border:none;border-radius:0 4px 4px 0;cursor:pointer}.search button:focus{outline:0}.toggle{position:relative;display:block;width:40px;height:20px;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);margin-bottom:0;margin-left:20px}.toggle:before{content:"";position:relative;top:3px;left:3px;width:34px;height:14px;display:block;background:rgba(154,153,153,.5);border-radius:8px;transition:background .2s ease}.toggle span{position:absolute;top:0;left:0;width:20px;height:20px;display:block;background:#ec2027;border-radius:10px;box-shadow:0 3px 8px rgba(154,153,153,.1);transition:all .2s ease}.toggle span:before{content:"";position:absolute;display:block;margin:-18px;width:56px;height:56px;background:rgba(79,46,220,.5);border-radius:50%;-webkit-transform:scale(0);transform:scale(0);opacity:1;pointer-events:none}#cbx:checked+.toggle:before{background:#947ada}#cbx:checked+.toggle span{background:#4f2edc;-webkit-transform:translateX(20px);transform:translateX(20px);transition:all .2s cubic-bezier(.8,.4,.3,1.25),background .15s ease;box-shadow:0 3px 8px rgba(79,46,220,.2)}#cbx:checked+.toggle span:before{-webkit-transform:scale(1);transform:scale(1);opacity:0;transition:all .4s ease}.header__item{display:flex;align-items:center;margin-right:35px}.header__item-switch{display:flex;align-items:center}.header__item-descr{font-weight:500}.header__menu{display:flex;align-items:center}hr{margin:0 0 30px 0}.videos__wrapper{display:flex;flex-wrap:wrap}.videos__item{width:280px;margin:0 45px 30px 45px;text-decoration:none;color:inherit;transition:1s all;opacity:1;cursor:pointer}.videos__item:hover{text-decoration:none;color:inherit}.videos__item img{width:100%;height:156px;-o-object-fit:cover;object-fit:cover;box-shadow:0 0 30px rgba(0,0,0,.25)}.videos__item-descr{margin-top:8px;font-weight:700;font-size:16px}.videos__item-views{font-size:14px;opacity:.5}.videos__item-active{opacity:0;-webkit-transform:translateY(50px);transform:translateY(50px)}.more{display:block;width:180px;height:40px;margin:0 auto;border:none;outline:0;cursor:pointer;background-color:#ec2027;border-radius:4px;box-shadow:0 4px 30px rgba(0,0,0,.25);color:#fff;font-weight:500;font-size:18px}.more:focus{outline:0}.modal{display:none;position:fixed;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.3)}.modal__body{position:absolute;top:50%;left:50%;width:1024px;height:600px;background-color:#fff;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);overflow:auto}