.container {
  position: fixed;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
  bottom: 0;
  max-width: calc(100vw - 24px);
  @apply z-20;
}

.desktopContainer {
  display: flex;
  bottom: 0;
  margin: 0 auto calc(env(safe-area-inset-bottom) + 20px) auto;
  justify-content: center;
  @apply z-50;
}

.mobileMenu span {
  margin: 12px auto;
}

.mobileMenu a {
  color: white;
  text-decoration: none;
  margin: 12px auto;

  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-align: center;
}

.grid {
  display: flex;
  padding: 16px 12px;
  justify-content: space-around;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  border-radius: 30px;
  color: white;
  align-items: center;
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  transition: all var(--ifm-transition-custom-speed)
    var(--ifm-transition-custom-curve);
}

.grid a {
  margin: 0 12px;
  color: white;
  text-decoration: none;
}

.grid a:hover {
  color: rgba(182, 182, 182, 1);
  text-decoration: none;
}

.dfinityLink:hover:before {
  height: 13px;
  background: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' style='enable-background:new 0 0 880 640;' xml:space='preserve' viewBox='151.99 184 576.02 272'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;%7D .st1%7Bfill:url(%23SVGID_1_);%7D .st2%7Bfill:url(%23SVGID_2_);%7D .st3%7Bfill:%2329ABE2;%7D %3C/style%3E%3Cg%3E%3Cpath class='st0' d='M671.99,320c0-45.09-37.63-81.78-83.89-81.78c-12.26,0-33.8,6.07-66.78,34.97 c-17.73,15.54-33.17,32.87-43.85,45.55c17.99,19.05,37.47,39.23,46.31,46.89c3.63,3.14,27.63,22.81,56.09,35.14 c3.34,0.74,6.06,1,8.16,1C634.34,401.5,671.99,364.84,671.99,320z'%3E%3C/path%3E%3Cpath class='st0' d='M522.89,366.54c27.22,23.59,45.72,31.74,56.98,34.24c3.34,0.74,6.06,1,8.16,1 c46.3-0.28,83.95-36.94,83.95-81.78c0-45.09-37.63-81.78-83.89-81.78c-12.26,0-33.8,6.07-66.78,34.97 c-17.73,15.54-33.17,32.87-43.85,45.55C477.21,319.05,504.3,350.43,522.89,366.54z'%3E%3C/path%3E%3ClinearGradient id='SVGID_1_' gradientUnits='userSpaceOnUse' x1='515.2743' y1='201.9346' x2='705.4849' y2='398.9034'%3E%3Cstop offset='0.21' style='stop-color:%23F15A24'%3E%3C/stop%3E%3Cstop offset='0.6841' style='stop-color:%23FBB03B'%3E%3C/stop%3E%3C/linearGradient%3E%3Cpath class='st1' d='M588.1,184c-32.16,0-67.28,16.49-104.38,49c-17.57,15.4-32.8,31.88-44.23,45.1c0.02,0.02,0.04,0.04,0.06,0.07 c0.03-0.04,0.05-0.06,0.05-0.06s18.03,19.63,37.87,40.64c10.68-12.69,26.11-30.01,43.85-45.55c32.98-28.91,54.52-34.97,66.78-34.97 c46.26,0,83.89,36.69,83.89,81.78c0,44.84-37.65,81.5-83.95,81.78c-2.11,0-4.82-0.26-8.16-1c13.49,5.84,27.99,10.04,41.8,10.04 c84.79,0,101.36-55.33,102.49-59.25c2.51-10.14,3.84-20.7,3.84-31.56C728,245.01,665.24,184,588.1,184z'%3E%3C/path%3E%3Cpath class='st0' d='M208.01,320c0,45.09,37.63,81.78,83.89,81.78c12.26,0,33.8-6.07,66.78-34.97 c17.73-15.54,33.17-32.87,43.85-45.55c-17.99-19.05-37.47-39.23-46.31-46.89c-3.63-3.14-27.63-22.81-56.09-35.14 c-3.34-0.74-6.06-1-8.16-1C245.66,238.5,208.01,275.16,208.01,320z'%3E%3C/path%3E%3Cpath class='st0' d='M357.11,273.46c-27.22-23.59-45.72-31.74-56.98-34.24c-3.34-0.74-6.06-1-8.16-1 c-46.3,0.28-83.95,36.94-83.95,81.78c0,45.09,37.63,81.78,83.89,81.78c12.26,0,33.8-6.07,66.78-34.97 c17.73-15.54,33.17-32.87,43.85-45.55c0.26-0.3,0.52-0.62,0.78-0.92C392.12,307.51,375.7,289.57,357.11,273.46z'%3E%3C/path%3E%3ClinearGradient id='SVGID_2_' gradientUnits='userSpaceOnUse' x1='-877.3035' y1='-1122.6819' x2='-687.0928' y2='-925.7131' gradientTransform='matrix(-1 0 0 -1 -512.5778 -684.6164)'%3E%3Cstop offset='0.21' style='stop-color:%23ED1E79'%3E%3C/stop%3E%3Cstop offset='0.8929' style='stop-color:%23522785'%3E%3C/stop%3E%3C/linearGradient%3E%3Cpath class='st2' d='M291.9,456c32.16,0,67.28-16.49,104.38-49c17.57-15.4,32.8-31.88,44.23-45.1c-0.02-0.02-0.04-0.04-0.06-0.07 c-0.03,0.04-0.05,0.06-0.05,0.06s-18.03-19.63-37.87-40.64c-10.68,12.69-26.11,30.01-43.85,45.55 c-32.98,28.91-54.52,34.97-66.78,34.97c-46.26,0-83.89-36.69-83.89-81.78c0-44.84,37.65-81.5,83.95-81.78c2.11,0,4.82,0.26,8.16,1 c-13.49-5.84-27.99-10.04-41.8-10.04c-84.79,0-101.36,55.33-102.49,59.25c-2.51,10.14-3.84,20.7-3.84,31.56 C152,394.99,214.76,456,291.9,456z'%3E%3C/path%3E%3Cpath class='st3' d='M621.52,409.45c-43.41-1.07-88.53-35.3-97.74-43.81c-23.78-21.99-78.66-81.53-82.97-86.2 C400.58,234.4,346.07,184,291.9,184h-0.07h-0.07c-65.85,0.33-121.19,44.92-135.91,104.44c1.13-3.92,22.76-60.3,102.42-58.34 c43.41,1.07,88.75,35.76,97.95,44.27c23.78,21.99,78.68,81.54,82.97,86.21C479.42,405.61,533.93,456,588.1,456h0.07h0.07 c65.85-0.33,121.19-44.92,135.91-104.44C723.03,355.48,701.18,411.41,621.52,409.45z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")
    no-repeat;
}

.dfinityLink::before {
  content: "";
  width: 28px;
  height: 14px;
  display: flex;
  background: url("data:image/svg+xml,%3Csvg width='28' height='14' viewBox='0 0 28 14' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.0617 0.269043C19.5276 0.269043 17.8541 1.0863 16.0877 2.69744C15.251 3.45633 14.5189 4.27358 13.9843 4.92738C13.9843 4.92738 14.8443 5.89639 15.7856 6.93549C16.2969 6.30502 17.0291 5.45274 17.8773 4.68221C19.4462 3.24618 20.4688 2.95431 21.0617 2.95431C23.2696 2.95431 25.0593 4.76391 25.0593 7.00556C25.0593 9.22381 23.2696 11.0334 21.0617 11.0568C20.9569 11.0568 20.8291 11.0451 20.6781 11.0101C21.3172 11.3019 22.0145 11.5121 22.6653 11.5121C26.7094 11.5121 27.4995 8.78015 27.546 8.58165C27.6622 8.07966 27.7321 7.55427 27.7321 7.0172C27.7205 3.29286 24.7339 0.269043 21.0617 0.269043Z' fillOpacity='0.8'/%3E%3Cpath d='M6.93835 13.731C8.47236 13.731 10.1457 12.9137 11.9122 11.3026C12.7489 10.5436 13.481 9.72646 14.0156 9.07256C14.0156 9.07256 13.1557 8.10357 12.2144 7.06453C11.7029 7.69495 10.9708 8.54723 10.1225 9.3178C8.55366 10.7421 7.51939 11.0457 6.93835 11.0457C4.73033 11.0457 2.94067 9.23605 2.94067 6.99446C2.94067 4.7762 4.73033 2.9666 6.93835 2.94324C7.04291 2.94324 7.17073 2.9549 7.32184 2.98993C6.68269 2.69806 5.98541 2.48792 5.33464 2.48792C1.29047 2.48792 0.500228 5.21988 0.453759 5.41834C0.337555 5.92037 0.267822 6.44575 0.267822 6.9828C0.267822 10.7071 3.25445 13.731 6.93835 13.731Z' fillOpacity='0.8'/%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M10.0132 4.74058C9.57169 4.32027 7.41013 2.60405 5.34154 2.54566C1.65521 2.45507 0.571579 5.07811 0.478149 5.41641C1.18425 2.47502 3.81627 0.280685 6.94526 0.269043C9.49615 0.269043 12.0738 2.7171 13.9784 4.92645C13.9816 4.92274 13.9845 4.91912 13.9875 4.91565C13.9875 4.91565 14.8473 5.88467 15.7887 6.92375C15.7887 6.92375 16.8578 8.16133 17.9967 9.24707C18.4383 9.66739 20.5881 11.3603 22.6567 11.4187C26.4454 11.5238 27.4912 8.75674 27.5492 8.54658C26.8522 11.5004 24.2141 13.7069 21.0762 13.7186C18.5247 13.7186 15.9459 11.2689 14.0334 9.05897C14.0296 9.06346 14.026 9.06787 14.0226 9.07206C14.0226 9.07206 13.1626 8.10299 12.2212 7.06392C12.2212 7.06392 11.1521 5.82634 10.0132 4.74058Z' /%3E%3C/svg%3E")
    no-repeat;
}

.mobileMenu {
  align-items: center;
  flex-direction: column;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  bottom: 0;
  display: flex;
  padding: 0 24px;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  @apply z-50;
  max-width: 100%;

  color: white;
  -webkit-backface-visibility: hidden;
}
.borderRadius50 {
  border-radius: 50px;
}
.borderRadius12 {
  border-radius: 12px;
}
.mobileMenuOpen {
  display: flex;
  padding: 12px 0;
}
.mobileMenuClose {
  display: flex;
  padding: 12px 24px;
}
.mobileMenuOpen::after {
  content: "";
  width: 16px;
  height: 16px;
  display: flex;
  align-self: center;
  margin-left: 8px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 10.6669L12.6669 6.00001L14 7.33313L8 13.3331L2 7.33313L3.33312 6.00001L8 10.6669Z' fill='white'/%3E%3C/svg%3E%0A")
    no-repeat;
}

.mobileMenuClose::before {
  content: "";
  width: 22px;
  height: 22px;
  display: flex;
  align-self: center;
  margin: auto;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 6.66688L12.6669 2L14 3.33312L9.33312 8L14 12.6669L12.6669 14L8 9.33312L3.33312 14L2 12.6669L6.66688 8L2 3.33312L3.33312 2L8 6.66688Z' fill='white'/%3E%3C/svg%3E%0A")
    no-repeat;
}
