html,
body {
  height: 100%;
}
body {
  display: flex;
  align-items: center;
  background: radial-gradient(
    circle,
    rgba(0, 51, 125, 1) 0%,
    rgba(0, 29, 57, 1) 100%
  );
}
nav {
  margin: 0 auto;
  padding: 10px;
  width: 300px;
  display: flex;
  font-size: 16px;
  position: relative;
  counter-reset: anchors;
  font-family: Arial;
  background-color: #001d39;
  border-radius: 10px;
  justify-content: center;
  gap: 5px;
}
nav a {
  transition: transform 0.1s ease-out;
  text-decoration: none;
  height: 40px;
  display: block;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.4;
  flex-grow: 1;
}
nav a:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background-repeat: no-repeat;
  background-position: center center;
}
/* colors for left and right of selection */
nav > a:hover {
  transform: scale(1.45);
  z-index: 3;
  opacity: 1 !important;
}
a:hover:before {
  box-shadow: inset 0 0 7px rgba(255, 141, 255, 0.5);
  border: 2px solid rgba(255, 141, 255, 1);
  filter: drop-shadow(0px 0px 4px #ff00fe);
}
nav:hover a:not(:has(+ a:hover)):not(:hover + a):not(:hover) {
  opacity: 0.4;
  filter: blur(1px);
}
nav a:has(+ a:hover),
nav a:hover + a {
  opacity: 1;
  transform: scale(1.34);
  z-index: 2;
}
nav a:has(+ a + a:hover),
nav a:hover + a + a {
  opacity: 1 !important;
  transform: scale(1.2);
  filter: blur(1px);
}
nav a:not(:hover) ~ div.marker {
  display: none;
}
nav a:hover ~ div.marker {
  display: block;
}
nav a:nth-child(1):hover ~ div.marker {
  left: calc(20px);
  border-color: rgba(0, 160, 175, 1);
}
nav a:nth-child(2):hover ~ div.marker {
  left: calc(3 * 20px);
  border-color: rgba(175, 0, 142, 1);
}
nav a:nth-child(3):hover ~ div.marker {
  left: calc(5 * 20px);
  border-color: rgba(0, 175, 72, 1);
}
nav a:nth-child(4):hover ~ div.marker {
  left: calc(7 * 20px);
  border-color: rgba(175, 59, 0, 1);
}
nav a:nth-child(5):hover ~ div.marker {
  left: calc(9 * 20px);
  border-color: rgba(0, 22, 175, 1);
}
nav a:nth-child(6):hover ~ div.marker {
  left: calc(11 * 20px);
  border-color: rgba(175, 0, 0, 1);
}
nav .marker {
  margin-left: -5px;
  position: absolute;
  content: "";
  transition: all 0.2s ease-out;
  border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-135deg) scale(0.6);
  top: 65px;
  display: none !important;
}

a:nth-child(1):before {
  background-image: url('data:image/svg+xml,<svg opacity=".5" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="%23FFF"><path d="M320-120v-80h80v-80H160q-33 0-56.5-23.5T80-360v-400q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v400q0 33-23.5 56.5T800-280H560v80h80v80H320ZM160-360h640v-400H160v400Zm0 0v-400 400Z"/></svg>'),
    radial-gradient(circle, rgba(0, 160, 175, 1) 0%, rgba(27, 68, 89, 1) 100%);
}
a:nth-child(1):hover:before {
  background-image: url('data:image/svg+xml,<svg opacity=".9" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="%23FFF"><path d="M320-120v-80h80v-80H160q-33 0-56.5-23.5T80-360v-400q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v400q0 33-23.5 56.5T800-280H560v80h80v80H320ZM160-360h640v-400H160v400Zm0 0v-400 400Z"/></svg>'),
    radial-gradient(circle, rgba(0, 160, 175, 1) 0%, rgba(27, 68, 89, 1) 100%);
}
a:nth-child(2):before {
  background-image: url('data:image/svg+xml,<svg opacity=".5" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="%23FFF"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z"/></svg>'),
    radial-gradient(circle, rgba(175, 0, 142, 1) 0%, rgba(89, 27, 83, 1) 100%);
}
a:nth-child(2):hover:before {
  background-image: url('data:image/svg+xml,<svg opacity=".9" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="%23FFF"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z"/></svg>'),
    radial-gradient(circle, rgba(175, 0, 142, 1) 0%, rgba(89, 27, 83, 1) 100%);
}

a:nth-child(3):before {
  background-image: url('data:image/svg+xml,<svg opacity=".5" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="%23FFF"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h420v-140H160v140Zm500 0h140v-360H660v360ZM160-460h420v-140H160v140Z"/></svg>'),
    radial-gradient(circle, rgba(0, 175, 72, 1) 0%, rgba(27, 89, 41, 1) 100%);
}
a:nth-child(3):hover:before {
  background-image: url('data:image/svg+xml,<svg opacity=".9" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="%23FFF"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h420v-140H160v140Zm500 0h140v-360H660v360ZM160-460h420v-140H160v140Z"/></svg>'),
    radial-gradient(circle, rgba(0, 175, 72, 1) 0%, rgba(27, 89, 41, 1) 100%);
}
a:nth-child(4):before {
  background-image: url('data:image/svg+xml,<svg opacity=".5" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="%23FFF"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H447l-80-80H160v480Zm0 0v-480 480Z"/></svg>'),
    radial-gradient(circle, rgba(175, 59, 0, 1) 0%, rgba(89, 45, 27, 1) 100%);
}
a:nth-child(4):hover:before {
  background-image: url('data:image/svg+xml,<svg opacity=".9" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="%23FFF"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H447l-80-80H160v480Zm0 0v-480 480Z"/></svg>'),
    radial-gradient(circle, rgba(175, 59, 0, 1) 0%, rgba(89, 45, 27, 1) 100%);
}
a:nth-child(5):before {
  background-image: url('data:image/svg+xml,<svg opacity=".5" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="%23FFF"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/></svg>'),
    radial-gradient(circle, rgba(0, 22, 175, 1) 0%, rgba(39, 27, 89, 1) 100%);
}
a:nth-child(5):hover:before {
  background-image: url('data:image/svg+xml,<svg opacity=".9" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="%23FFF"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/></svg>'),
    radial-gradient(circle, rgba(0, 22, 175, 1) 0%, rgba(39, 27, 89, 1) 100%);
}
a:nth-child(6):before {
  background-image: url('data:image/svg+xml,<svg opacity=".5" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="%23FFF"><path d="m368-592 89-147-59-98q-12-20-34.5-20T329-837l-98 163 137 82Zm387 272-89-148 139-80 64 107q11 17 12 38t-9 39q-10 20-29.5 32T800-320h-45ZM640-40 480-200l160-160v80h190l-58 116q-11 20-30 32t-42 12h-60v80Zm-387-80q-20 0-36.5-10.5T192-158q-8-16-7.5-33.5T194-224l34-56h172v160H253Zm-99-114L89-364q-9-18-8.5-38.5T92-441l16-27-68-41 219-55 55 220-69-42-91 152Zm540-342-219-55 69-41-125-208h141q21 0 39.5 10.5T629-841l52 87 68-42-55 220Z"/></svg>'),
    radial-gradient(circle, rgba(175, 0, 0, 1) 0%, rgba(89, 27, 27, 1) 100%);
}
a:nth-child(6):hover:before {
  background-image: url('data:image/svg+xml,<svg opacity=".9" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="%23FFF"><path d="m368-592 89-147-59-98q-12-20-34.5-20T329-837l-98 163 137 82Zm387 272-89-148 139-80 64 107q11 17 12 38t-9 39q-10 20-29.5 32T800-320h-45ZM640-40 480-200l160-160v80h190l-58 116q-11 20-30 32t-42 12h-60v80Zm-387-80q-20 0-36.5-10.5T192-158q-8-16-7.5-33.5T194-224l34-56h172v160H253Zm-99-114L89-364q-9-18-8.5-38.5T92-441l16-27-68-41 219-55 55 220-69-42-91 152Zm540-342-219-55 69-41-125-208h141q21 0 39.5 10.5T629-841l52 87 68-42-55 220Z"/></svg>'),
    radial-gradient(circle, rgba(175, 0, 0, 1) 0%, rgba(89, 27, 27, 1) 100%);
}
a:nth-child(7):before {
  background-image: url('data:image/svg+xml,<svg opacity=".5" xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20" fill="%23FFF"><path d="M240-160q-33 0-56.5-23.5T160-240q0-33 23.5-56.5T240-320q33 0 56.5 23.5T320-240q0 33-23.5 56.5T240-160Zm240 0q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm240 0q-33 0-56.5-23.5T640-240q0-33 23.5-56.5T720-320q33 0 56.5 23.5T800-240q0 33-23.5 56.5T720-160ZM240-400q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm240 0q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm240 0q-33 0-56.5-23.5T640-480q0-33 23.5-56.5T720-560q33 0 56.5 23.5T800-480q0 33-23.5 56.5T720-400ZM240-640q-33 0-56.5-23.5T160-720q0-33 23.5-56.5T240-800q33 0 56.5 23.5T320-720q0 33-23.5 56.5T240-640Zm240 0q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Zm240 0q-33 0-56.5-23.5T640-720q0-33 23.5-56.5T720-800q33 0 56.5 23.5T800-720q0 33-23.5 56.5T720-640Z"/></svg>'),
    radial-gradient(circle, rgba(70, 156, 252, 1) 0%, rgba(0, 65, 138, 1) 100%);
}
a:nth-child(7):hover:before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20" fill="%23FFF"><path d="M240-160q-33 0-56.5-23.5T160-240q0-33 23.5-56.5T240-320q33 0 56.5 23.5T320-240q0 33-23.5 56.5T240-160Zm240 0q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm240 0q-33 0-56.5-23.5T640-240q0-33 23.5-56.5T720-320q33 0 56.5 23.5T800-240q0 33-23.5 56.5T720-160ZM240-400q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm240 0q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm240 0q-33 0-56.5-23.5T640-480q0-33 23.5-56.5T720-560q33 0 56.5 23.5T800-480q0 33-23.5 56.5T720-400ZM240-640q-33 0-56.5-23.5T160-720q0-33 23.5-56.5T240-800q33 0 56.5 23.5T320-720q0 33-23.5 56.5T240-640Zm240 0q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Zm240 0q-33 0-56.5-23.5T640-720q0-33 23.5-56.5T720-800q33 0 56.5 23.5T800-720q0 33-23.5 56.5T720-640Z"/></svg>'),
    radial-gradient(circle, rgba(70, 156, 252, 1) 0%, rgba(0, 65, 138, 1) 100%);
}

.label:before {
  position: absolute;
  left: 0;
  bottom: -20px;
  color: rgba(255, 255, 255, 0.2);
  text-align: center;
  width: 100%;
  font-size: 12px;
}
nav:not(:hover) .label {
  display: none;
}
a:nth-child(1):hover ~ .label:before {
  content: "COMPUTER";
}
a:nth-child(2):hover ~ .label:before {
  content: "EMAIL";
}
a:nth-child(3):hover ~ .label:before {
  content: "BROWSER";
}
a:nth-child(4):hover ~ .label:before {
  content: "FOLDER";
}
a:nth-child(5):hover ~ .label:before {
  content: "SETTINGS";
}
a:nth-child(6):hover ~ .label:before {
  content: "RECYCLE";
}
a:nth-child(7):hover ~ .label:before {
  content: "APPS";
}