$pink: #ee7788 .html height: 100% .link color: $pink cursor: pointer text-decoration: none .grow flex-grow: 1 overflow: hidden padding: 50px 0 // Main canvas .circles position: absolute left: -200% pointer-events: none top: 0 // Main picture .main background-repeat: no-repeat background-position: 0 100% background-size: contain bottom: 0 height: 100% left: 0 width: 80% position: absolute // Extra main picture (goes behind circles) .main_extra z-index: -1 // MOUSE .mouse bottom: 10px border: 3px solid $white border-radius: 15px height: 42px opacity: 1 position: absolute transition: 1s right: 10px width: 28px .mouse_hidden opacity: 0 .mouse__wheel animation: animated-mouse 1.2s ease infinite background: $white height: 6px margin: 5px auto width: 3px @keyframes animated-mouse 0% opacity: 1 transform: translateY(0) 100% opacity: 0 transform: translateY(6px) @keyframes animated-mouse-up 0% opacity: 1 transform: translateY(6px) 100% opacity: 0 transform: translateY(0)
