* {
	  margin: 0;
	  padding: 0;
	  box-sizing: border-box;
	}
	:root {
	  --bg: #222;
	  --clr: #fff;
	}
	body {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  min-height: 100vh;
	  background: var(--bg);
	}
	ul {
	  position: relative;
	  display: flex;
	  gap: 50px;
	}
	ul li {
	  position: relative;
	  list-style: none;
	  width: 80px;
	  height: 80px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  cursor: pointer;
	  transition: 0.5s;
	}
	ul li.Home-page-item { --clr: #2483ff; }
	ul li.Profile-page-item { --clr: #d7ff24; }
	ul li.Likes-page-item { --clr: #ff2424; }
	ul li.Settings-page-item { --clr: #2bff24; }
	ul li.Search-page-item { --clr: #cc24ff; }

	ul li::before {
	  content: "";
	  position: absolute;
	  inset: 30px;
	  box-shadow: 0 0 0 10px var(--clr), 0 0 0 20px var(--bg), 0 0 0 22px var(--clr);
	  transition: 0.5s;
	}
	ul li:hover::before { inset: 15px; }
	ul li::after {
	  content: "";
	  position: absolute;
	  inset: 0;
	  background: var(--bg);
	  transform: rotate(45deg);
	  transition: 0.5s;
	}
	ul li:hover::after {
	  inset: 0px;
	  transform: rotate(0deg);
	}
	ul li a {
	  position: relative;
	  text-decoration: none;
	  z-index: 10;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	ul li a i {
	  font-size: 2em;
	  transition: 0.5s;
	  color: var(--clr);
	  opacity: 1;
	}
	ul li:hover a i {
	  color: var(--clr);
	  transform: translateY(-40%);
	}
	ul li a span {
	  position: absolute;
	  font-family: sans-serif;
	  color: var(--clr);
	  opacity: 0;
	  transition: 0.5s;
	  transform: scale(0) translateY(200%);
	}
	ul li:hover a span {
	  opacity: 1;
	  transform: scale(1) translateY(100%);
	}
	ul li:hover a i,
	ul li a span {
	  filter: drop-shadow(0 0 20px var(--clr)) drop-shadow(0 0 40px var(--clr))
	    drop-shadow(0 0 60px var(--clr));
	}