:root {
    --backg-text-color: white;
    --backg-text-color-rgb: 0;
}
:root {
    --gap: 34px;
    --text-color: black;
    --backg-color: white;
    --backg-color-light: rgba(0, 0, 0, 0.1);
    --accent-color: rgb(37, 110, 245);
}
@media (prefers-color-scheme: dark){
  :root {
    --gap: 34px;
    --text-color: white;
    --backg-color: black;
    --backg-color-light: rgba(255, 255, 255, 0.1);
    --accent-color: rgb(37, 110, 245);
}
}

h1,h2,h3,h4,h5,h6,p{
  margin: 0;
  color: var(--text-color);
}

body {
    margin: 0;
    padding: 0;
    background-color: black;
    overflow: hidden;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    line-height: 1.15;
}
.resting-app {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.widget {
    padding: 20px 38px 20px 38px;
    border-radius: 8px;
    transition: background-color 0.1s ease;
}

.widget > * {
    user-select: none;
}

.widget:hover {
    background-color: rgba(0, 0, 0, 0.12);
}

.widgets-container > .top-left {
    position: absolute;
    top: 0;
    left: 0;
    margin-top: var(--gap);
    margin-left: var(--gap);
}
.widgets-container > .top-right {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: var(--gap);
    margin-right: var(--gap);
}
.widgets-container > .bottom-left {
    position: absolute;
    bottom: 0;
    left: 0;
    margin-bottom: var(--gap);
    margin-left: var(--gap);
}
.widgets-container > .bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
    margin-bottom: var(--gap);
    margin-right: var(--gap);
}

.settings-open {
    position: absolute;
    scroll-snap-type: x;
    scrollbar-width: none;
    overflow-y: scroll;
    right: 0;
    top: 0;
}

.settings-close {
    position: absolute;
    right: -550px;
    top: 0;
}

.settings-loaded {
    padding: 50px;
}

.settings-skel {
    padding: 50px;
}

.settings-container {  
    width: 550px;
    max-width: 100%;
    height: 100vh;
    background-color: var(--backg-color);
    transition: right 0.3s ease;
}


.loading {
  background: linear-gradient(
    270deg,
    var(--backg-color-light),
    var(--backg-color-light),
    var(--backg-color-light),
    var(--backg-color-light),
    var(--backg-color-light),
    var(--backg-color-light),
    var(--backg-color),
    var(--backg-color-light),
    var(--backg-color-light),
    var(--backg-color-light),
    var(--backg-color-light),
    var(--backg-color-light),
    var(--backg-color-light)
  );
  background-size: 600% 600%;

  -webkit-animation: SkeletonAnimation 6s ease infinite;
  -moz-animation: SkeletonAnimation 6s ease infinite;
  animation: SkeletonAnimation 6s ease infinite;
}

@-webkit-keyframes SkeletonAnimation {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-moz-keyframes SkeletonAnimation {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes SkeletonAnimation {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}