html, body {
  margin: 0;
  height: 100dvh;
  overflow: hidden; /* no scrollbar, ever */
}

body.main-background {
  background-image: url('./Assets/Images/background.JPG');
  background-color: #000;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.desktop-icons {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  height: calc(100dvh - 8% - 4dvh);
  padding: clamp(1dvh, 1.5vmin, 3dvh);
  gap: clamp(0.5dvh, 8vmin, 10dvh);

  overflow-x: auto;
  overflow-y: hidden;
}

.icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(80px, 12vmin, 180px);
  height: clamp(100px, 14vmin, 180px);
  text-decoration: none;
  color: #fff;
  text-align: center;
  padding: clamp(0.3dvh, 0.8vmin, 1dvh);
}

.icon:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.icon img {
  width: clamp(40px, 10vmin, 160px);
  height: clamp(40px, 10vmin, 160px);
  object-fit: contain;
}

.icon span {
  margin-top: 4px;
  font-size: clamp(10px, 2vmin, 32px);
  text-shadow: 1px 1px 2px black;
}