@import url("https://fonts.googleapis.com");
@import url("https://fonts.gstatic.com");
@import url("https://fonts.googleapis.com/css2?family=Comfortaa");
@import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans");

* {
    font-family: Comfortaa !important;
}

button {
    background-color:rgb(83, 102, 249);
    border: none;
    color: white;
    height: 30px;
    width: 100px;
    border-color: rgb(83, 102, 249);
    border-radius: 5px;
    transition: transform 0.3s ease; 
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

nav {
    background: linear-gradient(45deg, #444444, #000000);
    animation: moverFondo 5s infinite alternate;
    background-size: 400% 400%;
    padding: 10px 0;
    border-radius: 5px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 1);
}

.nav-menu {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 0;
    margin: 0;
}

.nav-item a {
    text-decoration: none;
    color: white;
    padding: 10px 20px;
    display: inline-block;
    transition: transform 0.3s ease, background-color 0.3s ease;
    border-radius: 5px;
    text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.nav-item a:hover {
    transform: scale(1.1);
    background-color: #444;
    text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.nav-item.active a {
    background: linear-gradient(45deg,#36a1ff, #ff3fec, #ff6cf0);
    background-size: 400% 400%;
    animation: navitembg 5s infinite alternate;
    color: white;
    text-shadow: 0px 4px 10px rgba(0, 0, 0, 1);
    box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.2);
    transform: scale(1.2);
}

@keyframes navitembg {
    0% { background-position: 0% 50%; }
    50% { background-position: 25% 75%;}
    100% { background-position: 100% 50%; }
}

.section {
    display: none;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.section.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.section.active { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.section.active { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.section.active { transition-delay: 0.6s; opacity: 1; transform: translateY(0); }


button:hover {
    color: rgb(83, 102, 249);
    border: none;
    background-color: rgb(213, 241, 255);
    animation: mover 0.5s forwards;
    transform: scale(1.1); 
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}

button:active {
    color: black;
    transform: scale(0.8);
    animation: backwards;
    border: none;
    background-color: rgb(172, 182, 255);
    border-color: rgb(172, 182, 255);
}

#content {
max-width:500px;
font-size:14px;
font-family: "Arial",serif;
margin:auto;
}

a {
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
}

h4 {
    color: rgb(36, 63, 136);
    font-size: 30px;
    font-weight: bold;
    font-family: sans-serif;
    margin-top: 15px;
    margin-bottom: 20px;
    line-height: 25px;
    text-align:center;
    text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
}

p {
    color: #fff;
    font-size: 15px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
}

.btnp {
    text-align:center;
    margin:20px;
}

body {
    color: white;
    background: linear-gradient(45deg, #aa00ff, #5bb8ff, hsl(178, 100%, 73%));
    background-size: 400% 400%;
    animation: moverFondo 10000ms infinite alternate;
}

@keyframes moverFondo {
    0% { background-position: 0% 50%; }
    50% { background-position: 25% 75%;}
    100% { background-position: 100% 50%; }
}

.zoom {
    transition: transform 0.2s ease-in-out;
    display: inline-block;
}
.zoom:hover {
    transform: scale(1.5);
}

.ver {
    color: yellow;
}

img {
    width: 400px;
    height: auto;
    border-radius: 7px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.5s ease-in-out;
    margin: 10px;
}

iframe {
    margin-left: -50px;
    border-radius: 5px;
    box-shadow: 10px 10px 10px rgba(1, 0, 0.5, 0.5);
}

img:hover {
    animation: agrandar 0.7s forwards;
}

img:not(:hover) {
    animation: encoger 0.5s forwards;
}

@keyframes agrandar {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1.1); }
}

@keyframes encoger {
    0% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.subtitle {
    color: rgb(255, 238, 0);
}

.api {
    margin: 4px;
}