*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    overflow: hidden;
    color: #666
}
:root{
    --bs-body-bg:none;
}
section{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(to bottom, #f1f4f9, #dff1ff);
}
section .color{
    position: absolute;
    filter: blur(150px);

}
section .color:nth-child(1){
    top: -350px;
    width: 600px;
    height: 600px;
    background-color: #ff359b;
}
section .color:nth-child(2){
    bottom: -150px;
    left: 100px;
    width: 500px;
    height: 500px;
    background-color: #fffd87;
}
section .color:nth-child(3){
    bottom: 50px;
    right: 100px;
    width: 300px;
    height: 300px;
    background-color: #00d2ff;
}
.app{
    position: relative;
}
.app .square{
    position: absolute;
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.5);
    border-right: 1px solid rgba(255,255,255,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.2);
    background-color: rgba(255,255,255,0.1);
    border-radius: 10px;
    animation: animate 10s linear infinite;
    animation-delay: calc(1s * var(--i));
}
@keyframes animate{
    0%,100%{
        transform: translateY(-40px);
    } 
    50%{
        transform: translateY(40px);
    }
}
.app .square:nth-child(1){
    top: -30px;
    right: -60px;
    width: 100px;
    height: 100px;
}
.app .square:nth-child(2){
    top: 150px;
    left: -100px;
    width: 120px;
    height: 120px;
    z-index: 2;
}
.app .square:nth-child(3){
    bottom: 100px;
    right: -60px;
    width: 80px;
    height: 80px;
    z-index: 2;
}
.app .square:nth-child(4){

    bottom: 40px;
    left: -60px;
    width: 80px;
    height: 80px;
}
.app .square:nth-child(5){

    bottom: 40px;
    right: 450px;
    width: 50px;
    height: 50px;
}

.container{
    position: relative;
    width: 900px;
    background-color: rgba(255,255,255,0.1);
    border-radius: 10px;
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.5);
    border-right: 1px solid rgba(255,255,255,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.2);

}
.input{
    padding: 10px;
}
.input input{
    background: rgba(255,255,255,0.2);
    outline: none;
    border: none;
    padding: 10px 20px;
    border-radius: 35px;
    border: 1px solid rgba(255,255,255,0.5);
    border-right: 1px solid rgba(255,255,255,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.2);
    font-size: 18px;
    letter-spacing: 1px;
}
h2{
    font-weight: 600;
    font-size: 30px;
    letter-spacing: 1px;
}
.app button{
    background-color: #ffffff;
    color: #666;
    margin-bottom: 5px;
    margin-top: 10px;
    cursor: pointer;
    font-weight: 600;
}
.table {
    --bs-table-bg:var(--bs-body-bg);

}
.table th, td{
    padding:10px 50px;
    color:  #666;
}
.contentH{
    position: relative;
    display: flex;
    margin-top: 40px;
}
.contentH h1{
    position: absolute;
    transform: translate(-50%,-50%);
    letter-spacing: 2px;
    font-size: 50px;
}
.contentH h1:nth-child(1){
    color: transparent;
    -webkit-text-stroke: 1px #666;
}
.contentH h1:nth-child(2){
    color: #00d2ff;
    animation: waves 4s ease-in-out infinite;
}
@keyframes waves{
    0%,100% {
        clip-path: polygon(0% 45%, 15% 44%, 32% 50%,
        54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
    }
    50%{
        clip-path: polygon(0% 60%, 16% 65%, 34% 66%,
        51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
    }
}
.error-message-container{
    position: absolute;
}
.error-message-container .box-content{
    background-color: rgba(255,255,255,0.1);
    border-radius: 10px;
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.5);
    border-right: 1px solid rgba(255,255,255,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
.box-content .circles span{
    background-color: #fffd87;
    border-radius: 50%;
    width: 20px;
    height: 20px;
}