@import "https://fonts.googleapis.com/css2?family=Montserrat&display=swap";.icon-container{cursor:pointer;width:48px;height:48px;display:flex;flex-direction:column;justify-content:center;align-items:center;margin-right:-.5rem;padding-bottom:0;padding-right:0}.icon-line{height:2px;width:24px;background-color:#fff;transition:all .5s ease;position:relative}.middle-line{transition:opacity .5s ease,-webkit-transform .5s ease;transition:opacity .5s ease,transform .5s ease;transition:opacity .5s ease,transform .5s ease,-webkit-transform .5s ease}.top-line{-webkit-transform-origin:top left;transform-origin:top left;margin-bottom:6px}.bottom-line{-webkit-transform-origin:bottom left;transform-origin:bottom left;margin-top:6px}@-webkit-keyframes rotateAndTranslateTop{0%{-webkit-transform:rotate(0deg) translateY(0);transform:rotate(0deg) translateY(0)}50%{-webkit-transform:rotate(0deg) translateY(-4px);transform:rotate(0deg) translateY(-4px)}to{-webkit-transform:rotate(45deg) translateY(-8px);transform:rotate(45deg) translateY(-8px)}}@keyframes rotateAndTranslateTop{0%{-webkit-transform:rotate(0deg) translateY(0);transform:rotate(0deg) translateY(0)}50%{-webkit-transform:rotate(0deg) translateY(-4px);transform:rotate(0deg) translateY(-4px)}to{-webkit-transform:rotate(45deg) translateY(-8px);transform:rotate(45deg) translateY(-8px)}}.icon-container.open .top-line{-webkit-animation:rotateAndTranslateTop .5s ease forwards;animation:rotateAndTranslateTop .5s ease forwards;margin-bottom:0}.icon-container.open .middle-line{opacity:0;-webkit-transform:scale(0);transform:scale(0)}@-webkit-keyframes rotateAndTranslateBottom{0%{-webkit-transform:rotate(0deg) translateY(0);transform:rotate(0deg) translateY(0)}50%{-webkit-transform:rotate(0deg) translateY(4px);transform:rotate(0deg) translateY(4px)}to{-webkit-transform:rotate(-45deg) translateY(8px);transform:rotate(-45deg) translateY(8px)}}@keyframes rotateAndTranslateBottom{0%{-webkit-transform:rotate(0deg) translateY(0);transform:rotate(0deg) translateY(0)}50%{-webkit-transform:rotate(0deg) translateY(4px);transform:rotate(0deg) translateY(4px)}to{-webkit-transform:rotate(-45deg) translateY(8px);transform:rotate(-45deg) translateY(8px)}}.icon-container.open .bottom-line{-webkit-animation:rotateAndTranslateBottom .5s ease forwards;animation:rotateAndTranslateBottom .5s ease forwards;margin-top:0}body{margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,courier new,monospace}