* {
    font-family: "Poppins", sans-serif;
    font-style: normal;
    margin: 0;
    padding: 0;
    color: #fff;
}

body {
    display: flex;
    align-items: center;
    justify-items: center;
    height: 100vh;
    background: url(./img/JL-padel.jpg) left;
    background-size: cover;
    backdrop-filter: blur(3px);
}

.big-sq {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-content: center;
    /* background-color: #ffffff36; */
    background-color: #0053d857;
    box-shadow: 0 0 25px #222;
    backdrop-filter: blur(8px);
    width: 80%;
    height: 85vh;
    margin: 80px auto;
    border-radius: 8px;
}

.pelota {
    background:#d0fa39;
    width:20px;
    height:20px;
    border-radius:20px;
    position:absolute;
    margin-left:30px;
    margin-top:30px;
    animation-name:pelota;
    animation: pelota 40s infinite;
    /*animation-duration:30s;*/animation-fill-mode:forwards;}

@Keyframes pelota {
    from {}  
    5% {margin-left:1130px;margin-top:130px;}
    10% {margin-left:30px;margin-top:100px;}
    15% {margin-left:1130px;margin-top:400px;}
    20% {margin-left:30px;margin-top:300px;}
    25% {margin-left:1130px;margin-top:240px;}
    30% {margin-left:30px;margin-top:205px;}
    35% {margin-left:1130px;margin-top:350px;}
    40% {margin-left:30px;margin-top:550px;}
    45% {margin-left:1130px;margin-top:520px;}
    50% {margin-left:30px;margin-top:300px;}
    55% {margin-left:1130px;margin-top:280px;}
    60% {margin-left:30px;margin-top:430px;}
    65% {margin-left:1130px;margin-top:400px;}
    70% {margin-left:30px;margin-top:100px;}
    75% {margin-left:1130px;margin-top:300px;}
    80% {margin-left:30px;margin-top:440px;}
    85% {margin-left:1130px;margin-top:150px;}
    90% {margin-left:30px;margin-top:220px;}
    95% {margin-left:1130px;margin-top:320px;}
    to {margin-left:30px;margin-top:400px;}
  }

#column1 {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin: 4% auto;
}

.title {
    font-size: 2,5rem;
    line-height: 3rem;
    margin-bottom: 1%;
    text-shadow: 3px 3px 15px #000000;
}

#logo-mida {
    margin: 2% auto;
    width: 70%;
    box-shadow: 2px 2px 30px black;
}

.subt {
    font-size: 100%;
    font-weight: 400;
    text-align: center;
    color: rgb(224, 255, 113);
    text-shadow: 0 0 5px #020202;
}

.icons {
    display: flex;
    justify-content: space-around;
    align-items: baseline;
    width: 40%;
    margin-top: 4%;
    text-shadow: 0 0 5px #000000;
}

.title {
        margin: auto;
        text-align: center;
}

@media only screen and (max-width: 600px) {
    .pelota {
        background: #d0fa399f;
        width: 5vw;
        height: 5vw; 
        border-radius: 50%;
        position: absolute;
        margin-left: 5vw;
        margin-top: 5vw;
        animation-name: pelota;
        animation: pelota 40s infinite;
        animation-fill-mode: forwards;
    }
    
    @keyframes pelota {
        from {}
        5% { left: 70vw; top: 3vw; }
        10% { left: 5vw; top: 5vw; }
        15% { left: 70vw; top: 35vw; }
        20% { left: 5vw; top: 25vw; }
        25% { left: 70vw; top: 15vw; }
        30% { left: 5vw; top: 10.5vw; }
        35% { left: 70vw; top: 30vw; }
        40% { left: 5vw; top: 50vw; }
        45% { left: 70vw; top: 45vw; }
        50% { left: 5vw; top: 25vw; }
        55% { left: 70vw; top: 23vw; }
        60% { left: 5vw; top: 38vw; }
        65% { left: 70vw; top: 40vw; }
        70% { left: 5vw; top: 5vw; }
        75% { left: 70vw; top: 25vw; }
        80% { left: 5vw; top: 44vw; }
        85% { left: 70vw; top: 5vw; }
        90% { left: 5vw; top: 22vw; }
        95% { left: 70vw; top: 28vw; }
        to { left: 5vw; top: 35vw; }
    }


    .big-sq {
        align-content:space-around;
        /* background-color: #ffffff36; */
        background-color: #0053d857;
        box-shadow: 0 0 25px #222;
        backdrop-filter: blur(8px);
        width: 80%;
        height: 80vh;
        margin: 80px auto;
        border-radius: 8px;
    }

    #column1 {
    align-content: space-around;
    gap: 3vh;
    }

    .title {
        margin: auto;
        text-align-last: center;
    }

    .subt {
        padding: 0 30px;
        text-align-last: center;
    }

    #logo-mida {
        width: 85%;
    }

}

    @media only screen and (max-width: 1024px) {
        
        .pelota {
            background: #d0fa39;
            width: 20px;
            height: 20px;
            border-radius: 20px;
            position: absolute;
            animation-name: pelota;
            animation: pelota 40s infinite;
            animation-fill-mode: forwards;
        }

        @keyframes pelota {
            from {}
            5% { left: calc(100% - 30px); top: 5vh; }
            10% { left: 5vw; top: 8vh; }
            15% { left: calc(100% - 30px); top: 30vh; }
            20% { left: 5vw; top: 20vh; }
            25% { left: calc(100% - 30px); top: 16vh; }
            30% { left: 5vw; top: 14vh; }
            35% { left: calc(100% - 30px); top: 28vh; }
            40% { left: 5vw; top: 48vh; }
            45% { left: calc(100% - 30px); top: 45vh; }
            50% { left: 5vw; top: 25vh; }
            55% { left: calc(100% - 30px); top: 23vh; }
            60% { left: 5vw; top: 38vh; }
            65% { left: calc(100% - 30px); top: 40vh; }
            70% { left: 5vw; top: 8vh; }
            75% { left: calc(100% - 30px); top: 20vh; }
            80% { left: 5vw; top: 44vh; }
            85% { left: calc(100% - 30px); top: 10vh; }
            90% { left: 5vw; top: 22vh; }
            95% { left: calc(100% - 30px); top: 28vh; }
            to { left: 5vw; top: 35vh; }
        }
    }