::-webkit-scrollbar { display: none; } .vid-wrapper { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; } #menu__toggle { opacity: 0; } #menu__toggle:checked ~ .menu__btn > span { transform: rotate(45deg); } #menu__toggle:checked ~ .menu__btn > span::before { top: 0; transform: rotate(0); } #menu__toggle:checked ~ .menu__btn > span::after { top: 0; transform: rotate(90deg); } #menu__toggle:checked ~ .menu__box { visibility: visible; left: 0; } .menu__btn { display: flex; align-items: center; position: fixed; top: 20px; left: 20px; width: 26px; height: 26px; cursor: pointer; z-index: 2; } .menu__btn > span, .menu__btn > span::before, .menu__btn > span::after { display: block; position: absolute; width: 100%; height: 2px; background-color: #fff; transition-duration: .25s; } .menu__btn > span::before { content: ''; top: -8px; } .menu__btn > span::after { content: ''; top: 8px; } .menu__box { display: block; position: fixed; visibility: hidden; top: 0; left: -100%; width: 350px; height: 100%; margin: 0; padding: 10px 10px; border-right: 2px solid; border-color: #3400f0; list-style: none; background-color: rgba(000,000,000,0.9); transition-duration: .25s; z-index:1; overflow-y: scroll; } a{ text-decoration: none; } .image{ max-height: 200px; max-width: 500px; } img{ max-height: 35px; max-width: 200px; padding: 0px 15px; } .text { color: #fff; padding: 10px 0px; font-family: 'Arial'; font-size: 20px; text-decoration: none; } .menu__item { display: flex; align-items:center; text-decoration: none; transition-duration: .25s; } .menu__item:hover { background-color: #3400f0; }