:root {
  --background-image: url("https://picsum.photos/1920");
  --rounded-corners: calc(var(--gap) * 1.5);
  --light: rgba(255, 255, 255, 0.8);
}

html,
body {
  background-color: var(--body-background, #000000);
  background-size: cover;
  background-position: center;
}

.app.body {
  min-height: 100%;
  transition: all 0.25s ease-in-out;
  background-image: var(--background-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.gradient-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.bookmark-card {
  transition: all 0.3s ease;
  transform-style: preserve-3d;
}

.bookmark-card:hover {
  transform: translateY(-5px) rotateX(5deg);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.floating {
  animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}

.landing {
  background-color: var(--landing-page-background, #fff);
}

body .app.body > *:first-child {
  transition: all 0.25s ease-in-out;
}

body.onview .app.body > *:first-child {
  transform: scale(0.9);
}

.bookmarksContainer {
  min-height: 100%;
}

bookmarks-list,
.bookmarks-list {
  padding: calc(var(--gap));
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  width: 100%;
}

.bookmark {
  display: flex;
  position: relative;
  background-color: var(--color);
  overflow: hidden;
  border-radius: calc(var(--gap) * 1.5);
  flex: auto;
  filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.25));
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.55);
  color: var(--bookmark-text-color, #fff);
  align-items: center;
  justify-content: center;
  --link-color-hover: var(--bookmark-text-color, #fff);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08), 0px 8px 12px rgba(0, 0, 0, 0.04);
}

.bookmark .favicon {
  width: 34px;
  height: 34px;
  margin: auto auto calc(var(--gap) * 0.5) auto;
  border-radius: 50%;
  overflow: hidden;
}

input[type="color"] {
  min-height: 52.39px;
  min-width: 52.39px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border: solid 1px rgba(0, 0, 0, 0.1);
}

.appOptions {
  position: fixed;
  bottom: calc(var(--gap) * 1.5);
  right: calc(var(--gap) * 1.5);
  z-index: 2;
  display: flex;
  gap: calc(var(--gap) * 1);
  flex-direction: column;
  transition: all 0.25s;
  width: calc(var(--gap) * 5);
  height: auto;
  left: auto;
  top: auto;
  --button-width: calc(var(--gap) * 3);
}

.appOptions {
  width: var(--button-width);
}

.appOptions .ViewBackground {
  display: none;
}

.appOptions .options {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) * 1);
}

.appOptions .options go-button {
  width: var(--button-width);
  height: var(--button-width);
}

body.onview .appOptions {
  transform: translateX(100%);
  opacity: 0;
}

.confirmWin go-confirm {
  width: 100%;
}

.app .MainHome {
  padding: calc(var(--gap));
}

.app .loginForm {
  border: solid 1px var(--border-color);
  border-radius: calc(var(--gap) * 1);
  background-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
}

.g-tabs go-input .input:not([readonly], .disabled):focus {
  border: none;
  background-color: rgba(232, 240, 254, 0);
}

.g-tabs go-input[type="textbox"]:first-child .input {
  padding: 0 var(--gap) var(--gap) var(--gap);
}

.g-tabs input:-internal-autofill-selected {
  background-color: light-dark(rgba(232, 240, 254, 0), rgba(70, 90, 126, 0)) !important;
}

.g-tabs go-input[type="color"] .contain {
  padding: var(--gap);
}

.g-tabs go-input[type="color"] .contain .input {
  border-radius: calc(var(--gap) * 1);
  border: solid 1px var(--border-color);
}

.systemContextMenu .ViewMenuBody {
  background-color: var(--light);
  backdrop-filter: blur(10px) !important;
}

@media (display-mode: standalone) {
  .app.body {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    overflow-y: auto;
    border-radius: var(--rounded-corners, 1.5rem);
  }
}

@media (min-width: 768px) {
  .appOptions {
    bottom: calc(var(--gap) * 2);
    right: calc(var(--gap) * 2);
  }

  bookmarks-list .bookmark:hover,
  .bookmarks-list .bookmark:hover {
    transition: all 0.2s !important;
    transform: scale(1.1) !important;
  }

  .bookmark {
    max-width: 50%;
  }
}

@media (min-width: 1024px) {
  .bookmarksContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 720px;
    margin: 0 auto auto 0;
    min-height: auto;
  }
}

@media (min-width: 1200px) {
  .bookmarks-list {
    gap: calc(var(--gap) * 2);
  }

  bookmarks-list,
  .bookmarks-list {
    padding: calc(var(--gap) * 2);
  }
}