html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

* {
    box-sizing: border-box;
}


.classBody{

    margin: 0;
    padding:0;
    background-image: url('../fotos/fondoMenu2.avif');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

}

.classBody2{

    margin: 0;
    padding:0;
    background-image: url('../fotos/fondoMenu3.avif');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

}


.divPadre{

    position: relative;

}

.divHijo{

    color: rgb(223, 226, 43);
    font-size: large;
    font-weight: 900;
    text-decoration: none;
    font-family: 'StarWars', sans-serif;
    letter-spacing: 5px;
                                                
}

input{
    width:100%;
    padding:12px;
    border-radius:8px;
    border:1px solid #cccccc2c;
    font-size:16px;
    transition:0.3s;
    background-color: #4d4c4c97;
    color: rgb(223, 226, 43);
}

input:focus{
    border-color:rgb(223, 226, 43);
    outline:none;
    box-shadow:0 0 5px rgb(223, 226, 43);
}

.tituloDiv{
    display: flex; justify-content: center; width: 100%;
}

@font-face {
    font-family: "StarWars";
    src: url("../fonts/Starjout.ttf");
}



a{
    color: rgb(223, 226, 43);
}

button{
    width:100%;
    padding:12px;
    border-radius:8px;
    border:1px solid #cccccc2c;
    font-size:16px;
    transition:0.3s;
    background-color: #cccccc2c;
    margin-top: 12px;
    color:rgb(169, 169, 169) ;
}

button:hover{
    border-color:rgb(223, 226, 43);
    outline:none;
    box-shadow:0 0 5px rgb(223, 226, 43);
}

button:focus{
    border-color:rgb(226, 110, 43);
    outline:none;
    box-shadow:0 0 5px rgb(226, 110, 43);
}

.mensajeUs{
    min-height: 14px;
    margin: 8px 0 0 0;
    color: rgb(226, 110, 43);
    font-size: 14px;
    font-family: Arial, sans-serif;
}



.titulo{
    position: absolute;
    top: -180px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    color: rgb(223, 226, 43);
    font-weight: 900;
    font-family: 'StarWars', sans-serif;
    letter-spacing: 5px;
    font-size: 50px;
}


.titulo span {
    display: inline-block;
}

.titulo span:nth-child(1) { animation: flotar1 14s infinite ease-in-out alternate; animation-delay: 0.1s; }
.titulo span:nth-child(2) { animation: flotar2 12s infinite ease-in-out alternate; animation-delay: 0.8s; }
.titulo span:nth-child(3) { animation: flotar3 16s infinite ease-in-out alternate; animation-delay: 0.3s; }
.titulo span:nth-child(4) { animation: flotar1 13s infinite ease-in-out alternate; animation-delay: 1.2s; }
.titulo span:nth-child(5) { animation: flotar2 15s infinite ease-in-out alternate; animation-delay: 0.5s; }
.titulo span:nth-child(6) { animation: flotar3 12s infinite ease-in-out alternate; animation-delay: 1.5s; }
.titulo span:nth-child(7) { animation: flotar1 17s infinite ease-in-out alternate; animation-delay: 0.7s; }
.titulo span:nth-child(8) { animation: flotar2 14s infinite ease-in-out alternate; animation-delay: 1.1s; }
.titulo span:nth-child(9) { animation: flotar3 13s infinite ease-in-out alternate; animation-delay: 0.2s; }
.titulo span:nth-child(10) { animation: flotar1 15s infinite ease-in-out alternate; animation-delay: 0.9s; }

@keyframes flotar1 {
    0%   { transform: translate(0px, 0px) rotate(0deg) scale(1); }
    33%  { transform: translate(-5px, -15px) rotate(4deg) scale(1.05); }
    66%  { transform: translate(6px, 10px) rotate(-3deg) scale(0.95); }
    100% { transform: translate(0px, 0px) rotate(0deg) scale(1); }
}

@keyframes flotar2 {
    0%   { transform: translate(0px, 0px) rotate(0deg) scale(1); }
    33%  { transform: translate(12px, -5px) rotate(-6deg) scale(0.95); }
    66%  { transform: translate(-10px, 5px) rotate(5deg) scale(1.02); }
    100% { transform: translate(0px, 0px) rotate(0deg) scale(1); }
}

@keyframes flotar3 {
    0%   { transform: translate(0px, 0px) rotate(0deg) scale(1); }
    33%  { transform: translate(-8px, 12px) rotate(8deg) scale(0.9); }
    66%  { transform: translate(8px, -12px) rotate(-7deg) scale(1.08); }
    100% { transform: translate(0px, 0px) rotate(0deg) scale(1); }
}

.menuA{
    text-decoration: none;
    padding-top: 12px;
    padding-bottom: 12px;
    border-radius: 8px;
    border: 1px solid #cccccc2c;
    font-size: 16px;
    background-color: #4d4c4c97;
    display: block;
    width: 250px;
    margin: 0 auto;

    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.menuA:hover {
    background-color: rgb(223, 226, 43);
    color: black;
    box-shadow: 0 0 15px rgb(223, 226, 43);
    
    
    animation-play-state: paused !important;
    transform: scale(1.05) !important;
}

.SepBotonesMenu {
    margin-bottom: 2vh;
    text-align: center;
}

.rangosLista{
    margin-bottom: 35px;
}

.rangosPadre{
    transform: translateY(20px);
}

.rangoCelda{
    min-height: 42px;
    color: rgb(223, 226, 43);
}

@media (max-width: 1900px) {
    .rangoOculto1900{
        display: none;
    }
}

@media (max-width: 1300px) {
    .rangoOculto1300{
        display: none;
    }

    .titulo{
        top: -125px;
        font-size: 42px;
    }
}


.divPadre > .SepBotonesMenu:nth-child(2) .menuA { animation: flotarBtn1 12s infinite ease-in-out alternate; }
.divPadre > .SepBotonesMenu:nth-child(3) .menuA { animation: flotarBtn2 15s infinite ease-in-out alternate; animation-delay: 1s; }
.divPadre > .SepBotonesMenu:nth-child(4) .menuA { animation: flotarBtn1 14s infinite ease-in-out alternate; animation-delay: 2s; }
.divPadre > .SepBotonesMenu:nth-child(5) .menuA { animation: flotarBtn2 13s infinite ease-in-out alternate; animation-delay: 0.5s; }
.divPadre > .SepBotonesMenu:nth-child(6) .menuA { animation: flotarBtn1 16s infinite ease-in-out alternate; animation-delay: 1.5s; }
.divPadre > .SepBotonesMenu:nth-child(7) .menuA { animation: flotarBtn2 14s infinite ease-in-out alternate; animation-delay: 2.5s; }


@keyframes flotarBtn1 {
    0%   { transform: translate(0px, 0px) rotate(0deg); }
    50%  { transform: translate(3px, -4px) rotate(1deg); }
    100% { transform: translate(-2px, 3px) rotate(-1deg); }
}


@keyframes flotarBtn2 {
    0%   { transform: translate(0px, 0px) rotate(0deg); }
    50%  { transform: translate(-4px, 2px) rotate(-1deg); }
    100% { transform: translate(3px, -2px) rotate(1deg); }
}