/*! jQuery v3.7.1 | (c) OpenJS Foundation and other contributors | jquery.org/license */

.frame_1 {
    width: 400px;
    height: 300px;

}

.video-background {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1000;
    overflow: hidden;
}

.video-background video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 102%;
    min-height: 102%;
    width: auto;
    height: auto;
    z-index: -1000;
    transform: translateX(-51%) translateY(-51%);
}

.content {
    position: relative;
    z-index: 1;
}

.light_1{
    background: radial-gradient( #1BFFCA55,#C8D4D200 72%);
    width: 100%;
    height: 100%;
    transform: scale(1.5);
}

.container_1 {
    background: #0005;
    border: 2px solid #0D2021;
    box-shadow: 10px 10px 10px #0005;
     backdrop-filter: blur(10px); 
     justify-content: space-evenly;
    text-align: center;
}

.motusline{
    background: linear-gradient(to left, #CA8C9B00, #E76A90FF, #CA8C9B00);
    width: 100%;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}
.motuslineleft{
    background: linear-gradient(to right, #CA8C9B00, #E76A90FF);
    width: 100%;
    height: 2px;
}
.motuslineright{
    background: linear-gradient(to left, #CA8C9B00, #E76A90FF);
    width: 100%;
    height: 2px;
}

.motusline_1{
    background: linear-gradient(to left, #05261E00, #5F7670,#05261E00);
    width: 100%;
    height: 2px;
}
.motusline_2{
    background: linear-gradient(to left, #003A5500, #1BFFCA1F, #1BFFCA40, #1BFFCA1F, #003A5500);
    width: 100%;
    height: 2px;
}

.wave {
  display: inline-block;
  animation: waveMotion 4s linear infinite;
  animation-delay: 0s;
}
.wave2 {
  display: inline-block;
  animation: waveMotion 4s linear infinite;
  animation-delay: -1s;
}
.wave3 {
  display: inline-block;
  animation: waveMotion 4s linear infinite;
  animation-delay: 1s;
}
@keyframes waveMotion {
  0%   { transform: translateY(0px) rotate(0deg); }
  10%  { transform: translateY(-6px) rotate(-1deg); }
  20%  { transform: translateY(-10px) rotate(-2deg); }
  30%  { transform: translateY(-6px) rotate(-1deg); }
  40%  { transform: translateY(0px) rotate(0deg); }
  50%  { transform: translateY(6px) rotate(1deg); }
  60%  { transform: translateY(10px) rotate(2deg); }
  70%  { transform: translateY(6px) rotate(1deg); }
  80%  { transform: translateY(0px) rotate(0deg); }
  90%  { transform: translateY(-3px) rotate(-0.5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

.character {
  animation: breathing 5s ease-in-out infinite;
  transform-origin: center bottom;
}
@keyframes breathing {
  0%, 100% { transform: scaleY(1) translateY(0); }
  40% { transform: scaleY(1.01) translateY(-1px); }
}

.scaler {
transform: scale(1);
 z-index: 1;
 transition: transform 0.3s ease, z-index 0.3s ease;

}
.scaler:hover {
transform: scale(1.5); 
z-index: 100;
}