#ImageBackground {
    width: 1904px;
    margin-top: -8px;
    left: 0;
    top: 0;
    position: absolute;
    z-index: -30;
}

#ImageBackground2 {
    width: 1904px;
    margin-top: 1600px;
    left: 0;
    top: 0;
    position: absolute;
    z-index: -30;
}

#AIRE2 {
    width: 1904px;
    background-color: red;
    height: 600px;
    margin-top: 900px;
    left: 0;
    top: 0;
    position: absolute;
    z-index: -30;
    background-image: linear-gradient(to top, #0C1B2B, #E7E9CF);
}

#AIRE1 {
    background-color: rgba(0, 0, 0, 0);
    width: auto;
    height: 1px;
    margin-top: -10px;
}

#AIRECONTENIDO {
    background-image: linear-gradient(to top, rgba(255, 0, 0, 0));
    width: 1200px;
    height: 2500px;
    border-radius: 11px;
    margin-left: 340px;
}

#DivTopStyle {
    background-image: linear-gradient(to top, #468CA0, #54B6CA, #468CA0);
    width: 580px;
    height: 80px;
    margin: 0 auto;
    margin-top: 44px;
    border-radius: 14px;
}

@font-face {
  font-family: 'The Battle Cat';
  src: url('Images/Fonts/stage_font.otf') format('woff2');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'The Battle Cat Regular';
  src: url('Images/Fonts/BattleCatsText-Regular.otf') format('woff2');
  font-weight: bold;
  font-style: bold;
}

#Background-Color {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.562));
    width: 1200px;
    height: 1200px;
    border-radius: 11px;
    margin: 0 auto;
    position: absolute;
    margin-top: -24px;
    z-index: -1;
}

#LeftWood {
    left: 0;
    top: 0;
    position: absolute;
    width: 30px;
    height: 1187px;
    transform: rotateY(180deg);
    margin-left: 4px;
    margin-top: 6px;
    box-shadow: 0 0 12px rgb(0, 0, 0);
}

#RightWood {
    left: 0;
    top: 0;
    position: absolute;
    width: 30px;
    height: 1187px;
    transform: rotateY(0deg);
    margin-left: 1166px;
    margin-top: 6px;
    box-shadow: 0 0 12px rgb(0, 0, 0);
}

#TextStyleCenter1 {
    font-family: 'The Battle Cat', sans-serif;
    text-align: center;
    color: white;
    -webkit-text-stroke: 2px black;
    font-size: 85px;
    margin-top: 120px;
    margin-left: 160px;
    z-index: 5px; 
    width: 850px;
    position: absolute;
}

#buttonINGLES {
    background-color: rgb(240, 188, 93);
    border: 3px solid black;
    position: absolute;
    font-family: 'The Battle Cat', sans-serif;
    text-align: center;
    color: white;
    font-size: 29px;
    width: 120px;
    border-radius: 12px;
    -webkit-text-stroke: 1.2px black;
    margin-top: 15px;
    margin-left: -150px;
    height: 38px;
}

#buttonINGLES:hover {
    animation-name: HoverButtonAnim3;
    animation-duration: 0.15s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0,0,0,0);
}

#buttonINGLES:active {
    transform: scale(0.87);
    background-color: rgb(255, 219, 152);
}

@keyframes HoverButtonAnim3 {    
    0% {border-color: rgb(255, 255, 0);}
    100% {border-color: rgb(255, 0, 255);}
}

#BoxDetalle {
    background-color: rgba(0, 0, 0, 0.589);
    top: 0;
    left: 0;
    position: absolute;
    width: 1070px;
    height: 840px;
    border-radius: 12px;
    z-index: -2;
    margin-left: 415px;
    margin-top: 80px;
    background-image: url(Images/backgroundImageAnim2.png);
    filter: saturate(0);
    animation-duration: 46.2s;
    animation-name: FondoAnim2;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    background-size: auto;
    opacity: 0.45;
    border: 3px solid black;
}

#BoxDetalle2 {
    background-image: linear-gradient(to bottom, rgb(255, 240, 190), rgb(170, 152, 94) );
    top: 0;
    left: 0;
    position: absolute;
    width: 1030px;
    height: 730px;
    border-radius: 12px;
    z-index: 1;
    margin-left: 435px;
    margin-top: 160px;
    border: 5px solid black;
}

#BoxDetalle3 {
    top: 0;
    left: 0;
    position: absolute;
    width: 1010px;
    height: 210px;
    border-radius: 12px;
    z-index: -2;
    margin-left: 8px;
    margin-top: 240px;
    border: 2px solid black;
    background-image: url(Images/backgroudImage2.png);
    box-shadow: 0 0 16px rgb(0, 0, 0) inset;
}

@keyframes FondoAnim2 {
  0% {background-position: 0% 0%;}
  100% {background-position: 0% -1159%;}
}

#DetallatasoGatuno2 {
    background-color: rgba(255, 255, 0, 0);
    margin-top: -64px;
    position: absolute;
    margin-left: 1000px;
    z-index: 2;
}

#buttonMini {
    background-color: rgb(240, 188, 93);
    border: 3px solid black;
    position: absolute;
    font-family: 'The Battle Cat', sans-serif;
    text-align: center;
    color: white;
    font-size: 35px;
    width: 70px;
    border-radius: 12px;
    -webkit-text-stroke: 1.2px black;
    margin-top: 20px;
    margin-left: 450px;
    height: 38px;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.125);
    display: inline-flex;
    cursor: pointer;
}

#buttonMini:hover {
    animation-name: HoverButtonAnim3;
    animation-duration: 0.15s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0,0,0,0);
}

#buttonMini:active {
    transform: scale(0.87);
    background-color: rgb(255, 219, 152);
}

@keyframes HoverButtonAnim3 {    
    0% {border-color: rgb(255, 255, 0);}
    100% {border-color: rgb(255, 0, 255);}
}

#TitleTop {
    color: white;
    margin-top: 26px;
    margin-left: 15px;
    position: absolute;
    font-family: 'Lilita One', sans-serif;
    -webkit-text-stroke: 1px black;
    font-size: 27px;
}

#BoxNormal {
    background-color: rgb(255, 174, 0);
    margin-left: 22.5px;
    margin-top: 20px;
    border: 1px solid white;
    outline: 3px solid black;
    color: white;
    -webkit-text-stroke: 1.2px black;
    border-radius: 5px;
    font-family: 'The Battle Cat Regular', sans-serif;
    text-align: center;
    vertical-align: bottom;
    padding: 20px;
    font-size: 23px;
    letter-spacing: -2px;
    width: 100px;
    height: 130px;
    text-shadow: 0 0 2px black;
    cursor: pointer;
    box-shadow: 0 0 15px black;
    display: inline-flex;
    background-image: linear-gradient(to top, rgba(255, 0, 0, 0), rgba(255, 255, 255, 0.527), rgba(255, 0, 0, 0));
}   

#BoxNormal:hover {
    scale: calc(1.03);
    background-color: rgb(255, 205, 98);
    animation-name: HoverLinkAnim;
    animation-duration: 0.15s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0,0,0,0);
}

#BoxNormal:active {
    scale: 0.93;
}

@keyframes HoverLinkAnim {    
    0% {outline-color: rgb(255, 255, 0);}
    100% {outline-color:  rgb(255, 0, 255);}
}

#ParticlesIcon1 {
    position: absolute;
    z-index: 3;
    width: 190px;
    margin-top: -55px;
    margin-left: -48px;
    animation-name: Rotate, ParticleIcon1Anim;
    animation-duration: 2.2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#ParticlesIcon2 {
    position: absolute;
    z-index: 3;
    width: 120px;
    margin-top: -70px;
    margin-left: -48px;
    animation-name: ParticleIcon2Anim;
    animation-duration: 4.2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#ParticlesIcon3 {
    position: absolute;
    z-index: 3;
    width: 120px;
    margin-top: 50px;
    margin-left: 48px;
    animation-name: ParticleIcon3Anim;
    animation-duration: 3.2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#ParticlesIcon4 {
    position: absolute;
    z-index: 3;
    width: 80px;
    margin-top: 120px;
    margin-left: 78px;
    animation-name: ParticleIcon3Anim;
    animation-duration: 8.2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#ParticlesIcon5 {
    position: absolute;
    z-index: 3;
    width: 80px;
    height: 250px;
    margin-top: 120px;
    margin-left: 28px;
    animation-name: ParticleIcon4Anim;
    animation-duration: 4.2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    z-index: 5;
}

#ParticlesIcon6 {
    position: absolute;
    z-index: 3;
    width: 80px;
    height: 250px;
    margin-top: 120px;
    margin-left: 28px;
    animation-name: ParticleIcon5Anim;
    animation-duration: 4.2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#ParticlesIcon7 {
    position: absolute;
    z-index: 3;
    width: 80px;
    height: 250px;
    margin-top: 0px;
    margin-left: 28px;
    animation-name: ParticleIcon6Anim;
    animation-duration: 4.2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes Rotate {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-1deg);}
}

@keyframes ParticleIcon1Anim {
    0% {opacity: 0;}
    3% {opacity: 1; filter: brightness(200%);}
    100% {opacity: 0; filter: brightness(20%);}
}

@keyframes ParticleIcon2Anim {
    0% {opacity: 0; margin-top: -60px; transform: rotate(0deg);}
    3% {opacity: 1;}
    100% {opacity: 0; margin-top: -20px; transform: rotate(-10deg);}
}

@keyframes ParticleIcon3Anim {
    0% {opacity: 0; margin-top: 30px; transform: rotate(0deg);}
    1% {opacity: 1;}
    100% {opacity: 0; margin-top: -10px; transform: rotate(-10deg);}
}

@keyframes ParticleIcon4Anim {
    0% {opacity: 0; margin-top: 80px; height: 70px;}
    1% {opacity: 1;}
    50% {opacity: 0; margin-top: -90px; height: 250px; width: 80px;}
    100% {opacity: 0; width: 10px;}
}

@keyframes ParticleIcon5Anim {
    0% {opacity: 0; margin-top: 80px; height: 70px;}
    1% {opacity: 1;}
    90% {opacity: 0; margin-top: 40px; height: 120px;}
    100% {opacity: 0;}
}

@keyframes ParticleIcon6Anim {
    0% {opacity: 0; margin-top: -35px; height: 190px; filter: brightness(200%);}
    1% {opacity: 1;}
    30% {opacity: 0; margin-top: 150px; margin-left: -7px; height: 10px; width: 150px; filter: brightness(100%);}
    100% {opacity: 0;}
}

#ContenidoGatos {
    margin: 40px;
    padding-left: 70px;
    padding-right: 70px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    border-radius: 50px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.596) inset;
    border: 4px outset rgb(72, 146, 163);
    outline: 3px solid rgb(14, 29, 32);
    background-image: url(Images/backgroundImage3.png);
    animation-name: background-image-ANIM;
    animation-duration: 12s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes background-image-ANIM {
    0% {background-position: 0 0;}
    100% {background-position: 100px 100px;}
}


#BoxGato {
    margin-left: 22.5px;
    margin-top: 22.5px;
    margin-bottom: 20px;
    outline: rgba(0, 0, 0, 0) solid 2px;
    padding: 9px;
    padding-left: 5px;
    padding-right: 15px;
    padding-top: 7px;
    width: 60px;
    height: 45px;
    cursor: pointer;
    display: inline-flex;
}   

#BoxGato:hover {
    scale: calc(1.03);
    background-color: rgb(255, 205, 98);
    animation-name: HoverLinkAnim;
    animation-duration: 0.15s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0,0,0,0);
}

#BoxGato:active {
    scale: 0.93;
}

#HoverImage:hover {
    scale: calc(1.07);
    outline: 3px solid rgba(0, 0, 0, 0); animation-name: HoverLinkAnim ;animation-duration: 0.15s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0,0,0,0);
}

#HoverImage:active {
    scale: calc(0.9);
}

#menuOPEN1 {
    width: 50%;
    height: 110%;
    position: fixed;
    z-index: -525;
    margin-top: -40px;
    margin-left: -8px;
    animation-name: open1;
    animation-duration: 1s;
    opacity: 0;
}

#menuOPEN2 {
    width: 50%;
    height: 110%;
    position: fixed;
    z-index: -525;
    margin-top: -40px;
    margin-left: 50%;
    animation-name: open2;
    animation-duration: 1s;
    opacity: 0;
}

@keyframes open1 {
    0%{ opacity: 1; z-index: 525;}
    20% {margin-left: -8px; filter: brightness(100%);}
    100% {margin-left: -52%; opacity: 1; filter: brightness(20%); z-index: 525;}
}

@keyframes open2 {
    0%{ opacity: 1; z-index: 525;}
    20% {margin-left: 50%; filter: brightness(100%);}
    100% {margin-left: 100%; opacity: 1; filter: brightness(20%); z-index: 525;}
}