:root {
  --theme-color: #303030;
  --hover-bg: #3f3f3fe5;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

html, body {
  height: 100%;
  width: 100%;
  color: #282828;
}

div {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.desktop {
  height: 100%;
  width: 100%;
  background-image: url(https://images.unsplash.com/photo-1669678435499-67e18dccea2d?q=80&w=1332&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.desktop .taskbar {
  width: 100%;
  padding: 0.3rem 0.5rem;
  background-color: var(--theme-color);
  position: absolute;
  z-index: 1;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.desktop .taskbar .taskbar-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.desktop .taskbar .taskbar-main .start-btn {
  anchor-name: --start-menu;
}
.desktop .taskbar .taskbar-main .start-btn img {
  pointer-events: none;
}
.desktop .taskbar .taskbar-main .search-bar {
  height: 100%;
  padding: 0rem 0.5rem;
  padding-bottom: 1px;
  color: #282828;
  background-color: white;
  border-radius: 5rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.desktop .taskbar .taskbar-main .search-bar i {
  color: transparent;
  font-weight: bold;
  font-size: 1.1rem;
  background: conic-gradient(rgb(0, 110, 255), rgb(0, 170, 255), rgb(0, 106, 255), rgb(0, 110, 255));
  -webkit-background-clip: text;
          background-clip: text;
}
.desktop .taskbar .taskbar-main .search-bar #search-box {
  padding: 0.3rem;
  width: 100%;
  font-size: 1rem;
  border: none;
  outline: none;
  align-items: center;
}
.desktop .taskbar .taskbar-main .task-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
}
.desktop .taskbar .taskbar-right {
  position: fixed;
  right: 1rem;
  color: white;
  text-align: right;
  font-size: 0.8rem;
}
.desktop .menus {
  width: 15rem;
  border-radius: 0.2rem;
  background-color: #e8e8e8;
  padding: 0.3rem;
  display: none;
  position: absolute;
  cursor: pointer;
}
.desktop .menus .menu {
  padding: 0.3rem 0.8rem;
  border-radius: 0.2rem;
  transition: all 0.1s ease;
}
.desktop .menus .menu:hover {
  background-color: #c0c0c0;
}
.desktop .active {
  display: block;
}
.desktop .start-menu {
  height: 80%;
  width: 90%;
  min-height: 0;
  max-width: 35rem;
  padding: 2rem;
  border-radius: 0.5rem;
  background-color: var(--theme-color);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  position: absolute;
  z-index: 0;
  bottom: -100%;
  position-anchor: --start-menu;
  box-shadow: inset 0px 0px 5px 1px rgba(0, 0, 0, 0.227);
  display: grid;
  grid-gap: 2rem 0.2rem;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto;
  align-content: flex-start;
  overflow-y: auto;
  transition: all 0.3s ease;
}
.desktop .start-menu .start-icon {
  color: whitesmoke;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-direction: column;
  cursor: pointer;
}
.desktop .start-menu .start-icon img {
  height: 3rem;
  width: 3rem;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  transition: all 0.5s ease;
}
.desktop .start-menu .start-icon h1 {
  font-size: 0.9rem;
  font-weight: 500;
}
.desktop .start-menu .icon {
  height: 100%;
  width: 100%;
}
.desktop .active {
  bottom: calc(anchor(top) + 1.5rem);
  left: anchor(left);
  opacity: 1;
}

.icon {
  height: 2.5rem;
  width: 2.5rem;
  padding: 0.3rem;
  border-radius: 0.25rem;
  transition: all 0.2s ease;
  cursor: pointer;
}
.icon img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  transition: all 0.5s ease;
}

.icon:hover {
  background-color: var(--hover-bg);
}

.icon:active img {
  scale: 0.7;
}

@media (max-width: 600px) {
  .desktop .taskbar .taskbar-main .task-icons {
    display: none;
  }
  .desktop .taskbar-right {
    display: none;
  }
}/*# sourceMappingURL=style.css.map */