@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,500;1,100;1,300&display=swap');
* {margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif;}
:root {--bg: #2f323f; }
body {min-height: 100vh; background: var(--bg);}
input {float: left;}
ol {display: flex; list-style-type: none; font-size: xx-large; margin: 20px; margin-left: 300px;}
ul {float: right; list-style-type: none; font-size: xx-large; margin: 20px;} 
li {display: flex; justify-content: center; align-items: center; margin-bottom: 5px; background-color: aqua; width: 150px; height: 60px;} 
h1 {text-align: center; font-family:'Courier New', Courier, monospace; margin-bottom: 50px;}  
h3 {display: inline-block; background-color: rgb(115, 255, 0); margin: 80px; margin-top: 1px; padding: 40px;}
div {text-align: center; font-size: x-large;}
.nav {inset: 40px 0 40px 20px; width: 110px; display: flex; justify-content: center; align-items: center; transition: 0.5s; float: right;}
.menu {position: absolute; top: 0; left: 0; width: 100%; height: 60px; padding: 0 23px; border-bottom: 1px solid rgba(0, 0, 0, 0.25); display: flex; justify-content: flex-start; align-items: center; cursor: pointer; float: right;} 
.nav ul {display: flex; flex-direction: column; width: 100%; float: right;}
.nav ul li {list-style: none; position: relative; width: 100%; height: 50px; border-radius: 12px; border: 8px solid transparent; transition: 0.5s;}
.nav ul li.active {transform: translateX(-30px); background: var(--bg);}
.nav ul li::before {content: ''; position: absolute; top: -28px; right: -10px; width: 20px; height: 20px; background: transparent; border-bottom-right-radius: 20px; box-shadow: 6px 5px 0 5px var(--bg); transform: scale(0); transform-origin: bottom right; transition: 0.5s;}
.nav ul li.active::before {right: 22px; transform: scale(1);}
.nav ul li::after {content: ''; position: absolute; bottom: -28px; right: -10px; width: 20px; height: 20px; background: transparent; border-top-right-radius: 20px; box-shadow: 6px -3px 0 3px var(--bg); transform: scale(0); transform-origin: bottom right; transition: 0.5s;}
.nav ul li.active::after {right: 22px; transform: scale(1);}
.nav ul li a {position: relative; display: flex; justify-content: flex-start; align-items: center; width: 100%; text-align: center; text-decoration: none; z-index: 1000;}
.nav ul li a .text {position: relative; display: block; min-width: 60px; height: 60px; border-radius: 10px; font-size: 0.6em; line-height: 60px; border: 6px solid transparent; transition: 0.5s;}
.nav ul li.active a .text{color: #fff; background: var(--clr);}
.nav ul li a .text::before {content: ''; position: absolute; top: 12px; left: 0; width: 100%; height: 100%; background: var(--clr); filter: blur(8px); opacity: 0; transition: 0.5s;}
.nav ul li.active a .text::before {opacity: 0.5;}
.nav ul li a .text::after {content: ''; position: absolute; top: 10px; left: -60px; width: 15px; height: 15px; background: var(--clr); border: 8px solid var(--bg); border-radius: 50%;}