:root {
  --height: 50%;
  --width: 24%;
}

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

body {
  background-color: black;
  overflow-x: scroll;
}

body::-webkit-scrollbar {
  display: none;
}

.held {
  background-color: rgb(245, 245, 245);
}

.new-desktop-area-right {
  position: fixed;
  top: 0px;
  right: 0px;

  width: 40px;
  height: 100vh;
  background-color: rgba(37, 255, 255, 0.081);
}

.desktop {
  min-width: 100vw;
  height: 100vh;
  background-color: #cfcec9;
  border-radius: 16px;

  scroll-margin: 0;
  scroll-snap-align: start; /* Align the start of each desktop to the snap point */
  flex: none;    
  cursor: none;
}


.desktops-container {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  gap: 48px;
  scroll-snap-type: x mandatory;
  animation-timing-function: ease-out;
  animation-duration: 100ms;
}

.cursor-replacement {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: rgb(70, 70, 70);

  width: 50px;
  height: 50px;

  border-radius: 40px;
}

.barrier {
  height: 100vh;
  background-color: #afaeaa;
  width: 80px;
  position: absolute;
  left: calc(50% - 40px);
  cursor: none;
}

.tip {
  display: flex;
  justify-content: center;
  font-family: Degular, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  position: fixed;
  width: 100vw;
  top: 2%;

  h2 {
    margin: 0 2rem;
    z-index: 40;
  }
}