/* Menu Hamburger */

:root{--main-color: #FFF;--accent-color: red;}

.nav-container{display: block;position: relative;height: 60px;}
.checkbox{position: absolute;height: 30px;width: 35px;top: 12px;left: 15px;opacity: 0;cursor: pointer;z-index: 3;}
.hamburger-lines{height: 26px;width: 32px;position: absolute;top: 17px;left: 20px;display: flex;flex-direction: column;justify-content: space-between;z-index: 2;}
.nav-container .hamburger-lines .line{height: 4px;width: 100%;border-radius: 10px;background: var(--main-color);transition: transform 0.4s ease-in-out;}
.line1{transform-origin: 0% 0%;}
.line3{transform-origin: 0% 100%;}
.checkbox:checked ~ .menu-items{transform: translateX(0);}
.checkbox:checked ~ .hamburger-lines .line1{transform: rotate(45deg);background: var(--accent-color);}
.checkbox:checked ~ .hamburger-lines .line2{transform: scaleY(0);}
.checkbox:checked ~ .hamburger-lines .line3{transform: rotate(-45deg);}
.menu-items{font-size: 30px;box-shadow: inset 0 0 2000px rgba(255, 255, 255, 0);height: 100vh;width: 100%;transform: translate(-100%);transition: transform 0.5s ease-in-out;text-align: center;}
.logo{position: absolute;top: 15px;right: 15px;display: block;}
.nav-container input[type="checkbox"]:checked ~ .logo{display: none;}