.searchbox-container{position:relative;margin:auto;width:300px;height:50px;float:right;margin-top:5px}.searchbox-container .search{position:absolute;margin:0 0 0 auto;right:0;width:50px;height:50px;background:#fff0;border:2px solid #1d1d1d;border-radius:50%;transition:all 1s;z-index:4}.searchbox-container .search:hover{cursor:pointer}.searchbox-container .search::before{content:"";position:absolute;margin:auto;top:14px;right:0;bottom:0;left:14px;width:12px;height:2px;background:#1d1d1d;transform:rotate(45deg);transition:all 0.5s}.searchbox-container .search::after{content:"";position:absolute;margin:auto;top:-5px;right:0;bottom:0;left:-5px;width:15px;height:15px;border-radius:50%;border:2px solid #1d1d1d;transition:all 0.5s}.searchbox-container input{font-family:"Inconsolata",monospace;position:absolute;float:right;margin:0 0 0 auto;top:0;right:0;bottom:0;left:0;width:50px;height:50px;outline:none;border:none;background:rgb(51 51 51 / .726);color:#fff;text-shadow:0 0 5px rgb(51 51 51 / .726);padding:0 20px 0 80px;border-radius:30px;box-shadow:0 0 25px 0 #424242,0 20px 25px 0 rgb(0 0 0 / .2);transition:all 1s;opacity:0;z-index:5;font-weight:bolder;letter-spacing:.1em}.searchbox-container input:hover{cursor:pointer}.searchbox-container input:focus{width:300px;opacity:1;cursor:text;color:#fff}.searchbox-container input:focus~.search{transform:translate(-250px,0);-webkit-transform:translate(-250px,0);-o-transform:translate(-250px,0);-moz-transform:translate(-250px,0);background:#151515;z-index:6}.searchbox-container input:focus~.search::before{top:0;left:0;width:25px;background:#fff}.searchbox-container input:focus~.search::after{top:0;left:0;width:25px;height:2px;border:none;background:#fff;border-radius:0%;transform:rotate(-45deg)}.searchbox-container input::placeholder{color:#fff;font-weight:bolder}.search-form{position:relative;margin-bottom:0;display:flex;align-items:center;background:var(--background-nav-color);border-radius:25px;overflow:hidden;width:250px;margin:0 auto}input.search-field{height:40px;color:#555;width:100%;padding-left:15px;font-size:15px;border:none!important;padding:10px;font-size:16px;height:100%;flex:1;outline:none}.search-button{background:var(--background-nav-stronger);border:none;padding:15px 15px;cursor:pointer;font-size:16px;transition:background 0.3s ease}.search-button:hover{background:var(--selection-color)}.search-submit{font-size:16px;cursor:pointer;color:#fff;width:38px;height:38px;position:absolute;top:1px;right:1px;background:#83a430;margin:0;padding:0;border:none}.search-submit:hover{opacity:.8}