@font-face {
    font-family: "gg_sans";
    src: url("fuentes/gg_sans.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}

* {
    font-family: "gg_sans";
    color: #fff;
    margin: 0;
}

body {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    background-color: rgba(81, 101, 246 , 100%);
    backdrop-filter: blur(6.6px);
    padding: 7%;
    overflow: hidden;
}

.main_form {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    background-color: rgba(49, 51, 56, 95%);
    padding: 15px;
    width: 460px;
    height: 90%;
    align-items: center;
    justify-items: center;
    font-size: 14px;
    border-radius: 15px;
    z-index: 1000;
}

input {
    background-color: rgb(30, 31, 34);
    color: #fff;
    border: none;
    width: -webkit-fill-available;
    height: 42px;
    border-radius: 5px;
    font-weight: 800;
    font-size: larger;
}

h1 {
    font-weight: bolder;
    font-size: xxx-large;
}

sup {
    font-weight: bolder;
    color: rgb(195 195 195);
}

#submit,
#crear_usuario {
    background-color: rgb(88, 101, 242);
    border: none;
    border-radius: 8px;
    padding: 15px 20% 15px 20%;
    font-size: larger;
    font-weight: 800;
    cursor: pointer;
    width: 80%;
    
}

#crear_usuario {
    margin-top: 20px;
}

#password,
#nombre {
    background-color: rgb(255 255 255);
    color: #000;
    border: solid 1px #000;
    width: -webkit-fill-available;
    outline: none;
    height: 42px;
    border-radius: 5px;
    font-weight: 800;
    font-size: larger;
}

.inputs {
    width: 80%;
}

#crear {
    text-decoration: underline;
    cursor: pointer;
}

.registrarse {
    width: 70%;
    text-align: left;
}

.img{
    position: fixed;
    display: grid;
    justify-items: center;
    align-items: center;
    z-index: 10;
    animation: movimiento 2.4s ease-in-out infinite;
}

#img_0{
    width: 11%;
    left: 9%;
    top: 16%;
}

#img_1{
    width: 9%;
    left: 2%;
    bottom: 0%;
}

#img_2{
    width: 10%;
    left: -3%;
}

#img_3{
    width: 20%;
    top: 35%;
    left: 0%;
}

#img_4{
    width: 6%;
    left: 14%;
    top: -3%;
}

#img_5{
    width: 16%;
    top: -6%;
    left: 31%;
}

#img_6{
    width: 16%;
    top: 40%;
    left: 27%;
}

#img_7{
    width: 12%;
    bottom: -4%;
    left: 23%;
    animation: girar 60s linear infinite, levitar 5s linear infinite;
}

#img_8{
    width: 11%;
    bottom: -1%;
    left: 46%;
}

#img_9{
    width: 15%;
    top: 35%;
    left: 49%;
}

#img_10{
    width: 12%;
    top: 4%;
    right: 28%;
}

#img_11{
    width: 14%;
    top: 1%;
    right: 5%;
}

#img_12{
    width: 14%;
    top: 47%;
    right: -6%;
}

#img_13{
    width: 13%;
    bottom: -6%;
    right: 18%;
}

#img_14{
    width: 9%;
    bottom: 4%;
    right: 4%;
}

#img_15{
    width: 21%;
    bottom: 29%;
    right: 11%;
}

#img_16{
    width: 8%;
    top: 25%;
    right: -3%;
}

@keyframes girar {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes levitar{
    0%{
        bottom: -4%;
    }
    50%{
        bottom: -8%;
    }
    100%{
        bottom: -4%;
    }
}

@keyframes movimiento {
    0% {
        transform: scale(1.0) rotate(-18deg) translateX(0px) translateY(0px);
    }
    10% {
        transform: scale(1.02) rotate(-16deg) translateX(1px) translateY(1px);
    }
    20% {
        transform: scale(1.04) rotate(-14deg) translateX(2px) translateY(3px);
    }
    30% {
        transform: scale(1.06) rotate(-12deg) translateX(3px) translateY(6px);
    }
    40% {
        transform: scale(1.08) rotate(-10deg) translateX(4px) translateY(8px);
    }
    50% {
        transform: scale(1.1) rotate(-8deg) translateX(5px) translateY(10px);
    }
    60% {
        transform: scale(1.08) rotate(-10deg) translateX(4px) translateY(8px);
    }
    70% {
        transform: scale(1.06) rotate(-12deg) translateX(3px) translateY(6px);
    }
    80% {
        transform: scale(1.04) rotate(-14deg) translateX(2px) translateY(3px);
    }
    90% {
        transform: scale(1.02) rotate(-16deg) translateX(1px) translateY(1px);
    }
    100% {
        transform: scale(1.0) rotate(-18deg) translateX(0px) translateY(0px);
    }
}

@media (max-width: 648px) {
    html{
        background-color: rgba(49, 51, 56, 100%);
        overflow-x: hidden;
    }

    body{
        padding: 0;
        background-color: rgba(49, 51, 56, 100%);
    }

    .main_form{
        width: 100%;
        height: 100%;
        border-radius: 0px;
    }

    .img{
        display: none;
    }

    h1{
        font-size: x-large;
    }

    .main_form{
        top: 15%;
        grid-template-rows: 90px 90px 90px 90px 90px 90px;
        padding-top: 10px;
    }
}