.page-menu {
  display: grid;
  justify-items: center;
  align-items: center;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-areas: "icon logo empty"
}

.logo {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  height: 100%;
  max-height: 20dvh;
  aspect-ratio: 1;
  gap: 3px;
  z-index: 10;
  grid-area: logo;
}

.logo img {
  width: 18%;
  z-index: 1;
}

.logo-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  border: solid #e9e9e9 12px;
  border-radius: 50%;
  background-color: white;
}

.logo-spinner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 12px;
}

.logo-spinner .path {
  stroke-linecap: round;
  stroke-dasharray: 110, 150;
  stroke-dashoffset: 0;
}

.shadow::after {
  position: absolute;
  border-radius: 50%;
  box-shadow: inset 5px 5px 10px #999;
  content: '';
  inset: 0;
}

.page-icon {
  grid-area: icon;
  box-sizing: border-box;
  position: relative;
  width: 6dvh;
  height: 6dvh;
  padding: 1.2dvh;
  border-radius: 50%;
  background-color: white
}