body {
  background: url(public/lock-screen-bg.jpg) no-repeat center center fixed;
  background-size: cover;
  overflow: hidden;
}

section {
  padding: 2em;
  padding-bottom: 0.25em;
  width: 100vw;
  height: 100vh;
  transition: transform 0.3s ease;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

input {
  width: 20vw;
  padding: 0.5em 1em;
  margin: 1em 0;
  background: var(--input);
  color: var(--input-foreground);
  border-radius: var(--input-border-radius);
  border: 0;
  font-size: 1em;
  border-bottom: 0.2em solid var(--input-border);
}

input:focus {
  outline: none;
  border-bottom: 0.2em solid var(--blue);
}

input.error {
  border-bottom: 0.2em solid var(--red);
  animation: jitter 150ms linear;
}

input.correct {
  border-bottom: 0.2em solid var(--green);
}

@keyframes jitter {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-0.5em);
  }

  50% {
    transform: translateX(0.5em);
  }

  75% {
    transform: translateX(-0.5em);
  }

  100% {
    transform: translateX(0);
  }
}

#lock-home-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#lock-home-screen.active {
  transform: translateY(-100%);
}

#lock-home-screen>div {
  width: 100%;
}

#lock-home-screen .above {
  display: flex;
  justify-content: space-between;
  flex: 1;
}

#lock-home-screen .above .left,
#lock-home-screen .above .right {
  padding: 0 4em;
  flex: 1;
}

.card {
  padding: 1em;
  display: flex;
  align-items: center;
  flex-direction: column;
  border-radius: 0.5em;
  min-height: 8em;
  transform: translate(0, 0);
  transition: transform var(--animation-time) ease-out;
  transition-delay: calc(var(--animation-time) * 3);
}

.above .card:hover {
  background: var(--card);
}

.greetings {
  transform: translateY(0);
  transition: transform var(--animation-time) ease-out;
  transition-delay: calc(var(--animation-time) * 0);
}

@starting-style {
  .left .card {
    transform: translateX(-100vw);
  }

  .right .card {
    transform: translateX(100vw);
  }

  .center .card {
    transform: translateY(100vh);
  }

  .greetings {
    transform: translateY(-100vh);
  }
}

.above .card .icon {
  position: relative;
  width: 2em;
  height: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.above .card .icon::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--border);
  border-radius: 0.25em;
}

.above .card p {
  margin-top: 0.5em;
  font-size: 0.875em;
}

#lock-home-screen .above .center {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.above .center .time-clip,
.above .center .day-date-clip {
  overflow: hidden;
}

.above .center .time {
  font-size: 6em;
  font-weight: 400;
  transform: translateY(0);
  transition: transform var(--animation-time) ease;
  overflow: hidden;
}

@starting-style {
  .above .center .time {
    transform: translateY(100%);
  }
}

.above .center .day-date {
  font-size: 1.5em;
  margin-top: -0.25em;
  transform: translateY(0);
  transition: transform var(--animation-time) ease;
  transition-delay: var(--animation-time);
}

@starting-style {
  .above .center .day-date {
    transform: translateY(100%);
  }
}

#lock-home-screen .below {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
}

#lock-home-screen .below .card {
  height: 9em;
  padding: 0.5em 1em;
  backdrop-filter: blur(8em);
  flex: 1;
  transform: translateX(0);
  transition: transform var(--animation-time) ease-out;
  transition-delay: calc(var(--animation-time) * var(--i) / 4);
  overflow: hidden;
}

@starting-style {
  #lock-home-screen .below .card {
    transform: translateX(100vw);
  }
}

.below .card .title-clip {
  overflow: hidden;
  height: 1.5em;
}

.below .card .title {
  font-size: 1em;
  font-weight: 600;
  width: 100%;
  transition: transform var(--animation-time) ease;
  transition-delay: calc(var(--animation-time) * 2);
}

@starting-style {
  .below .card .title {
    transform: translateY(100%);
  }
}

.below .card .content {
  width: 100%;
  flex: 1;
  transition: transform var(--animation-time) ease;
  transition-delay: calc(var(--animation-time) * 2.5);
}

@starting-style {
  .below .card .content {
    transform: translateY(200%);
  }
}

.below .card .link {
  color: var(--accent-foreground);
  text-decoration: none;
  font-weight: 500;
  transition: transform var(--animation-time) ease;
  transition-delay: calc(var(--animation-time) * 3);
}

@starting-style {
  .below .card .link {
    transform: translateY(200%);
  }
}

.card .content {
  display: flex;
  justify-content: space-between;
  padding-top: 0.5em;
}

.card .box1,
.card .box2 {
  flex: 1;
}

.card .box1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card .box1 .imgBx {
  width: 100%;
  height: 4em;
}

.card .box1 .temp {
  font-size: 4em;
  font-weight: 500;
  line-height: 1em;
}

.card .box1 .degree {
  height: 60%;
}

.card .box2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
}

.card .headline {
  width: 100%;
  font-size: 1em;
  font-weight: 500;
  margin-bottom: 0.5em;
  text-align: left;
}

.card .details {
  width: 100%;
  font-size: 0.875em;
  margin-bottom: 0.25em;
  text-align: left;
}

.card .content table {
  width: 100%;
  border-collapse: collapse;
}

.card .content th,
.card .content td {
  text-align: left;
  font-size: 0.875em;
}

.card .content th {
  font-weight: 500;
  padding-bottom: 0.5em;
}

.card .content td {
  color: var(--color);
}

.card .content ul {
  width: 100%;
  list-style: none;
}

.card .content ul li {
  width: 100%;
  font-size: 0.875em;
  margin-bottom: 0.25em;
  padding: 0.25em;
  padding-left: 0.75em;
  background: var(--border);
}

.system {
  padding: 0.25em 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75em;
  transform: translateY(0);
  transition-delay: calc(var(--animation-time) * 3.5);
}

@starting-style {
  .system {
    transform: translateY(100%);
  }
}

.system .icon-tray {
  display: flex;
  gap: 0.5em;
}

.system .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.25em;
  padding: 0.5em;
}

.system .icon:hover {
  background: var(--border);
}

#lock-screen {
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(0.25em);
}

#lock-screen.active {
  transform: translateY(-100%);
}

#lock-screen .pfpBx {
  width: 10em;
  height: 10em;
  border-radius: 50%;
  overflow: hidden;
  border: 0.25em solid var(--border);
}

#lock-screen h2 {
  font-weight: 400;
}

.container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.container .hint {
  display: none;
}

.container .hint.active {
  display: block;
  margin-top: -0.5em;
}

.system .profile-options {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  padding: 0.5em 1em;
  border-radius: 0.25em;
}

.system .profile-options:hover {
  background: var(--border);
}

.system .profile-options .imgBx {
  width: 2em;
  height: 2em;
  border-radius: 50%;
  overflow: hidden;
}