.desktop {
  position: fixed;
  height: 95vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 0% auto 15% auto;
  touch-action: manipulation;
}

.desktop a {
  text-decoration: none;
}

.icon_container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 80vh;
  width: auto;
  justify-content: start;
  align-self: flex-start;
}

.icon {
  display: flex;
  flex-direction: column;
  font-family: "new_regular";
  font-size: 1rem;
  color: var(--fg_icons);
  text-align: center;
  justify-content: center;
  align-items: center;
  height: 25vw;
  width: 27.5vw;
  cursor: pointer;
  margin: 15px;
}

.icon.focus {
  border: 1px dotted black;
}

.icon img {
  height: 56px;
  width: auto;
  object-fit: contain;
  align-self: center;
  margin-bottom: 5px;
}

.icon_text {
  width: 100%;
  background-color: var(--cyan);
  text-align: center;
  padding: auto;
}

@media screen and (min-width: 800px) {
  .desktop {
    margin: 1% 1% 10% 1%;
  }

  .icon {
    height: 85px;
    width: 95px;
    font-size: 1rem;
  }
}