body {
  background: url("res/img/bj2.jpg") center center no-repeat;
  background-size: cover;
  margin: 0;
}

@property --eye-size-y {
  syntax: '<length>';
  initial-value: 1em;
  inherits: true;
}

@property --x {
  syntax: '<number>';
  initial-value: 0;
  inherits: true;
}

@property --y {
  syntax: '<number>';
  initial-value: 0;
  inherits: true;
}

@keyframes blink {

  0%,
  4%,
  100% {
    --eye-size-y: 1em;
  }

  2% {
    --eye-size-y: 0em;
  }
}

article {
  --x: 0;
  --y: 0;
  --skewX: 0deg;
  --scaleY: 1;
  display: grid;
  place-items: center;
  container-type: size;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  transition:
    --y 0.5s,
    --x 0.5s,
    --skewX 0.5s,
    --scaleY 0.4s;

  &:has(#username:focus) {
    --x: 30;
    --y: 15;
    --skewX: -5deg;
    --scaleY: 1.1;
  }

  &:has([type="checkbox"]:focus),
  &:has(#password:focus) {
    --x: 35;
    --y: 10;
    --skewX: -8deg;
    --scaleY: 1.05;
  }

  &:has(.forgot:focus-within) {
    --x: 38;
    --y: 7;
    --skewX: -8deg;
    --scaleY: 1.02;
  }

  &:has(button:focus-within) {
    --x: 40;
    --y: 1;
    --skewX: -10deg;
    --scaleY: 1;
  }

  &:has(.signup:focus-within) {
    --x: 42;
    --y: -5;
    --skewX: -7deg;
    --scaleY: 0.95;
  }

  &:has(input:checked):has(#password:focus),
  &:has(input:checked):has([type="checkbox"]:focus) {
    --x: -20;
    --y: -5;
    --skewX: -8deg;
    --scaleY: 1.05;
  }
}

.bobbles {
  --eye-size-y: 1em;
  width: 80%;
  height: 60%;
  align-self: end;
  justify-self: center;
  position: relative;
  min-height: 300px;
  transform: translateY(0.5em);
  pointer-events: none;

  .bobble-1 {
    /* animation: blink 9s -6.5s infinite linear; */
    position: absolute;
    bottom: 0;
    left: 24%;
    width: 32%;
    height: 90%;
    background: linear-gradient(#0000 30%, #86E3CE 0);
    border-radius: 20px 20px 0 0;


    &::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 30.33%;
      top: 0;
      left: 0;
      transform-origin: 50% 100%;
      transform: skewX(calc(var(--skewX) * -2.1));
      background:
        radial-gradient(1em var(--eye-size-y) at calc(35% + (var(--x)) * -0.3%) calc(70% - var(--y) * 1%), #000 0.3em, #0000 0.31em),
        radial-gradient(1em var(--eye-size-y) at calc(65% + var(--x) * -0.3%) calc(70% - var(--y) * 1%), #000 0.3em, #0000 0.31em),
        #86E3CE;
      transition: transform 0.4s;
      border-radius: 20px 20px 0 0;
    }

    &::after {
      content: "";
      width: calc(15% + var(--y) * 0.1%);
      height: 0%;
      border-radius: 0%;
      border: 0em solid #0000;
      border-bottom: 0.35em solid #000;
      position: absolute;
      top: calc(27% + var(--y) * -0.25%);
      left: calc(50% - var(--x) * 0.35%);
      transform: translate(-50%, 0);border-radius: 0 0 20px 20px;
    }
  }

  .bobble-2 {
    animation: blink 11s -5s infinite linear;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 28%;
    height: 90%;
    background:
      radial-gradient(1em var(--eye-size-y) at calc(38% + var(--x) * -0.3%) calc(20% - var(--y) * 0.25%), #fff 0.3em, #0000 0.31em),
      radial-gradient(1em var(--eye-size-y) at calc(62% + var(--x) * -0.3%) calc(20% - var(--y) * 0.27%), #fff 0.3em, #0000 0.31em),
      #333;
    background:
      radial-gradient(1em var(--eye-size-y) at calc(38% + var(--x) * -0.3%) calc(20% - var(--y) * 0.25%), #000 0.3em, #0000 0.31em),
      radial-gradient(1em var(--eye-size-y) at calc(62% + var(--x) * -0.3%) calc(20% - var(--y) * 0.27%), #000 0.3em, #0000 0.31em),
      #d0e6a5;
    transform: skewX(calc(-1deg + var(--skewX) * -1.1)) scaleY(min(0.95, calc(var(--scaleY) * 0.9)));
    transform-origin: 50% 100%;
    transition: transform 0.4s;
    border-radius: 20px 20px 0 0;

    &::before {
      content: "";
      width: calc(15% + var(--y) * 0.1%);
      height: 0%;
      border-radius: 0%;
      border: 0em solid #0000;
      border-bottom: 0.35em solid #000;
      position: absolute;
      top: calc(25% - var(--y) * 0.1%);
      left: calc(50% + var(--x) * -0.2%);
      transform: translate(-50%, 0);
      border-radius: 0 0 20px 20px;
    }
  }

  .bobble-3 {
    animation: blink 9s -1.5s infinite linear;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60%;
    height: 45%;
    border-radius: 50% / 100% calc(100% - var(--x) * 0.3%) 0 0;
    background:
      radial-gradient(1em var(--eye-size-y) at calc(40% + var(--x) * -0.3%) calc(35% - var(--y) * 1%), #000 0.3em, #0000 0.31em),
      radial-gradient(1em var(--eye-size-y) at calc(60% + var(--x) * -0.3%) calc(35% - var(--y) * 1%), #000 0.3em, #0000 0.31em),
      #FFDD94;
    transform: skewX(calc(var(--skewX) * -0.8)) scaleY(1);
    transform-origin: 50% 100%;
    transition: transform 0.2s, border-radius 0.2s;

    &::before {
      content: "";
      width: calc(10% + var(--y) * 0.1%);
      height: 0%;
      border-radius: 0%;
      border: 0em solid #0000;
      border-bottom: 0.35em solid;
      position: absolute;
      top: calc(43% - var(--y) * 1.4%);
      left: calc(50% + var(--x) * -0.325%);
      transform: translate(-50%, 0);
      border-radius: 0 0 20px 20px;
    }
  }


  .bobble-4 {
    animation: blink 10s infinite linear;
    width: 30%;
    height: 50%;
    bottom: 0;
    right: 5%;
    position: absolute;
    background:
      radial-gradient(1em var(--eye-size-y) at calc(25% + var(--x) * -1%) calc(25% - var(--y) * 1%), #2c2c2c 0.3em, #0000 0.31em),
      radial-gradient(1em var(--eye-size-y) at calc(75% + var(--x) * -1%) calc(25% - var(--y) * 1%), #2c2c2c 0.3em, #0000 0.31em),
      #FA897B;
    border-radius: 100vmax 100vmax 0 0;
    transform-origin: 50% 100%;
    transform: skewX(var(--skewX)) scaleY(var(--scaleY));
    transition: transform 0.4s;

    &::before {
      content: "";
      width: 50%;
      height: 0%;
      border-radius: 0%;
      border: 0em solid #0000;
      border-bottom: 0.35em solid;
      position: absolute;
      top: calc(40% - var(--y) * 1%);
      left: calc(50% + var(--x) * -1%);
      transform: translate(-50%, 0);border-radius: 0 0 20px 20px;
     
    }
  }
}

section {
  background: rgba(255,255,255, .3);
  padding: 0.5em;
  border-radius: 0.5em;
  width: 100%;
  max-width: 800px;
  display: grid;
  grid-template-columns: 4fr 3fr;
  font-family: Roboto, Helvetica, sans-serif;
  backdrop-filter: blur(5px);

  form {
    grid-column: 2;
    background: #fff;
    padding: 1em 3em;
    border-radius: 0.4em;

    h2 {
      text-align: center;
      font-size: 1.75em;
      margin-top: 2em;
      margin-bottom: 0.25em;

      &+p {
        text-align: center;
        font-size: 0.9em;
        color: #0008;
        margin-top: 0em;
        margin-bottom: 3em;
      }
    }

    div {
      position: relative;
    }

    label {
      display: block;
      font-size: 0.9em;
      transform: translateY(1em);
      opacity: 0.5;
      transition: transform 0.3s, opacity 0.3s;
      pointer-events: none;

      &:has(+ input:is(:focus, :valid)) {
        pointer-events: auto;
        opacity: 1;
        transform: translateY(-0.25em);
      }
    }

    input:not([type="checkbox"]) {
      font-size: 1em;
      border: 0;
      border-bottom: 2px solid #0008;
      width: 100%;
      margin-bottom: 1em;
      height: 2.5em;
      padding: 0.5em;
      box-sizing: border-box;
      outline: none;
      background: #eee0;
      transition: border-bottom-color 0.3s, background 0.3s;

      &:hover {
        background: #f8f8f8;
        border-bottom-color: #000a;
      }

      &:focus {
        background: #eee;
        border-bottom-color: #000;
        box-shadow: inset 0 -1px #000;
      }
    }

    input[type="checkbox"] {
      position: absolute;
      right: 0;
      bottom: 2em;
      appearance: none;
      width: 1em;
      height: 1em;

      &:focus {
        /*         outline: 1px solid;
        outline-offset: 4px; */
        outline: none;

        &::before {
          border: 2px solid;
        }
      }

      &:not(:checked) {
        background:
          linear-gradient(45deg, #0000 45%, #000 0 55%, #0000 0),
          linear-gradient(-45deg, #0000 45%, #000 0 55%, #0000 0)
      }

      &:checked {
        &::after {
          background:
            radial-gradient(1em 1em at 80% 40%, #000 20%, #0000 0);
        }
      }

      &::before {
        content: "";
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        border: 1px solid;
        position: absolute;
        border-radius: 75% 15%;
        transform: translate(-50%, -50%) rotate(45deg);
      }

      &::after {
        content: "";
        position: absolute;
        width: 150%;
        height: 90%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 0;
        border: 0;
        background:
          radial-gradient(1em 1em at calc(50% + var(--x) * 1%) calc(50% - var(--y) * 0.01em), #000 20%, #0000 0);
        background:
          radial-gradient(1em 1em at 50% 50%, #000 20%, #0000 0)
      }
    }

    button {
      background: #FF1D25;
      color: #eee;
      width: 100%;
      border: 0;
      border-radius: 3em;
      height: 3em;
      font-size: 1em;
      margin: 2em 0;
      padding: 0;
      outline-offset: 2px;

      &:focus {
        outline: 2px double #000;
      }
    }

    a {
      outline-offset: 2px;
      display: inline-block;
      text-decoration-thickness: 1px;
      opacity: 0.5;
      transition: opacity 0.3s;
      outline: none;

      &,
      &:visited {
        color: #000;
      }

      &:focus {
        opacity: 1;
        text-decoration-thickness: 2px;
      }
    }

    .signup {
      font-size: 0.9em;
      text-align: center;
    }

    .forgot {
      text-align: right;
      font-size: 0.9em;

      a {
        transform: translateY(-50%);
      }
    }
  }
}

@media (width < 820px) {
  article {
    &:has(#username:focus) {
      --x: -5;
      --y: -18;
      --skewX: 0deg;
      --scaleY: 0.9;
    }

    &:has(#password:focus) {
      --x: -6;
      --y: -20;
      --skewX: 1deg;
      --scaleY: 0.85;
    }

    &:has([type="checkbox"]:focus) {
      --x: 6;
      --y: -21;
      --skewX: 0deg;
      --scaleY: 0.87;
    }

    &:has(.forgot:focus-within) {
      --x: 5;
      --y: -22;
      --skewX: -2deg;
      --scaleY: 0.9;
    }

    &:has(button:focus-within) {
      --x: 0;
      --y: -23;
      --skewX: 0deg;
      --scaleY: 0.9;
    }

    &:has(.signup:focus-within) {
      --x: 1;
      --y: -25;
      --skewX: 0deg;
      --scaleY: 0.85;
    }
  }

  section {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    width: clamp(320px, 80%, 500px);

    .bobbles {
      transform: translateY(0);
    }

    form {
      grid-column: 1;
      grid-row: 2;

      h2 {
        margin-top: 1em;
        margin-bottom: 0.125em;
      }
    }
  }
}
.footer{position: absolute;width: 100%;text-align: center;bottom: 0px;background-color:rgba(0,0,0, .5);
  color: #fff;font-size: 12px;padding: 10px 0;
}
.footer p{display: block;line-height: 20px;padding: 0;margin: 0;}
.footer a{color: #fff;text-decoration: none;color: #e2e2e2;font-size:12px}
.logo{ margin-top: -90px;position: relative;width: 100%;text-align: center;z-index: 999;}
.logo a{display: block;}
.logo img{width: 200px;}