/**********************************************************/
/* Web de Inteligencia Artificial                         */
/* Hoja de estilo para index.html                         */
/* Autor: David Solera Romero                             */
/* Versión: 1.0                                           */
/* 12 de octubre de 2023                                  */
/**********************************************************/
* {
    box-sizing: border-box;
}

html { scroll-behavior: smooth; }

/* Fuentes */
@font-face {
    font-family: Ethnocentric;
    src: url(../fonts/ethnocentric.otf);
}
@font-face {
    font-family: Aero;
    src: url(../fonts/Aero.ttf);
}

/* Características generales */
body {
    margin: 0;
    background: radial-gradient(circle, rgb(12, 52, 133) 0%, rgb(52, 163, 255) 100%);
    color: rgb(219, 247, 253);
}
h1 {font-size: 2.15em;
    font-weight: bold;}
h2 {font-size: 1.75em;}
h1,h2 { font-family: 'Ethnocentric';
        color: rgb(219, 247, 253);}
h3 {font-size: 1.35em;
    font-family: 'Aero';
    color: rgb(219, 247, 253);}
p { font-size: 1.15em;
    font-family: 'Roboto';}

/* Características botones */
.botones {font-family: 'Ethnocentric';
        font-size: 1em;
        font-weight: bold;
        border-radius: 18px;
        position: relative;
        z-index: 1;
        overflow: hidden;
        display: inline-block;
        border: 1.5px solid rgba(0,0,0);
        background-color: rgb(6, 171, 232); /* Color antes de la animación */
        color: white;
        box-shadow: 4px 3px 18px rgba(0,0,0,0.85);
        padding: 16px 20px;
}
/* Animaciones */
.botones:hover {
    color: rgb(169, 222, 255);
    transition: all 0.25s ease-out;
}
.botones::after {
    content: "";
    background: rgb(1, 112, 186); /* Color después de la animación */
    position: absolute;
    z-index: -1;
    display: block;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transform: scale(0, 0);
    transition: all 0.9s ease; /* Tiempo que tarda en eliminarse el color */
}
.botones:hover::after {
    transition: all 0.35s ease-out; /* Tiempo que tarda en aparecer el color */
    transform: scale(1, 1);
}

#ai {
    --b: 0.2em;   /* the thickness of the line */
    --c: #03d4fe; /* the color */
    color: #DBF7F1;
    background: 
    linear-gradient(var(--c) 50%,#000 0) 0% calc(100% - var(--_p,0%))/100% 200%,
    linear-gradient(var(--c) 0 0) 0% var(--_p,0%)/var(--_p,0%) var(--b) no-repeat;
    -webkit-background-clip: text,padding-box;
            background-clip: text,padding-box;
    transition: .3s var(--_s,0s) linear,background-size .3s calc(.3s - var(--_s,0s));
}
#ai:hover {
    --_p: 100%;
    --_s: .3s;
    color: #03d4fe;
}

.ai {
    --c: rgb(219, 247, 253); /* the color */
    --b: .1em;    /* border length*/
    --d: 7.5px;    /* the cube depth */
    
    --_s: calc(var(--d) + var(--b));
    
    color: var(--c);
    border: solid #03d4fe;
    border-width: var(--b) var(--b) var(--_s) var(--_s);
    background:
    conic-gradient(at left var(--d)  bottom var(--d),
    #0000 90deg, rgb(255 255 255 /0.3) 0 225deg,rgb(255 255 255 /0.6) 0) border-box,
    conic-gradient(at left var(--_s) bottom var(--_s),
    #0000 90deg,var(--c) 0) 0 100%/calc(100% - var(--b)) calc(100% - var(--b))  border-box;
    transform: translate(calc(var(--d)/-1),var(--d));
    clip-path: 
    polygon(
    var(--d) 0%, 
    var(--d) 0%, 
    100% 0%, 
    100% calc(100% - var(--d)),
    100% calc(100% - var(--d)),
    var(--d) calc(100% - var(--d))
    );
    transition: 0.5s;
}
.ai a {
    padding: 0;
}
.ai:hover {
    transform: translate(0,0);
    clip-path: 
    polygon(
    0% var(--d), 
    var(--d) 0%, 
    100% 0%, 
    100% calc(100% - var(--d)), 
    calc(100% - var(--d)) 100%, 
    0% 100%
    );
}

.fa:hover {
opacity: 0.7;}

footer .logo a:hover{
    color: rgb(127, 232, 255);
    transform: scale(0, 0);
    transition: all 0.75s ease; /* Tiempo que tarda en eliminarse el color */
}

footer .logo a:hover::after {
    transition: all 0.35s ease-out; /* Tiempo que tarda en aparecer el color */
    transform: scale(1, 1);
}

footer .info a:hover{
    color: rgb(127, 232, 255);
    transform: scale(0, 0);
    transition: all 0.75s ease; /* Tiempo que tarda en eliminarse el color */
}
footer .info a:hover{
    transition: all 0.35s ease-out; /* Tiempo que tarda en aparecer el color */
    transform: scale(1, 1);
}
.github img:hover{
    border-radius:50%;
    -webkit-border-radius:50%;
    box-shadow: 0px 0px 15px 15px rgb(76, 175, 255);
    -webkit-box-shadow: 0px 0px 15px 15px rgb(76, 175, 255);
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transition: all 0.35s ease-out; /* Tiempo que tarda en aparecer el color */
    }
/* Actúa como Wrapper */
.container {
    margin:auto;
    max-width: 1450px;
}
/* Barra de navegación */
.active {
    font-family: 'Ethnocentric';
    margin-top: 6px;
}

.miNav {
    background-color: rgb(6, 114, 182);
    overflow: hidden;
    }

.miNav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: left;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 7px;
    padding-bottom: 12.5px;
    }

nav {
    position: sticky;
    top:0;
    z-index: 999; /* esto marca el nivel de capa en el que debe aparecer un elemento*/
}
/* Hero section */
#hero {
    display: flex; /* Distribución como tablas */
    align-items: center;
    justify-content: center; /* Definimos cómo se distribuye el espacio */
    text-align: center; /* Alineamos el texto y el contenido al centro */
    flex-direction: column;
    height: 70vh; /* Ocupa el 80% de la pantalla */
    background-image: /* Imagen de fondo */
    linear-gradient(0deg
    , rgba(0, 18, 41, 0.5) /* Degradado para que el fondo se vea más oscuro */
    ,rgba(18, 149, 255, 0.5) )
    ,url("../images/ai7.png");
    background-repeat: no-repeat; /* No se repite la imagen */
    background-size: cover; /* La imagen se extiende para ocupar todo */
    background-position: 48.8%; /* La imagen se posiciona al centro */
    color:rgb(212, 250, 255);
}
#hero h1 {
    padding-bottom: 10px;
}

#hero a {
    text-decoration: none;
    color:rgb(212, 250, 255);
}
/* History section */
#history .container {
    margin-top: 4.5%;
    text-align: center;
    padding: 0% 5%;
}

#history h2 {
    margin-top: 7%;
    font-size: 2.65em;
}
/* Present section */
#present .container {
    margin-top: 3.2%;
    margin-bottom: 1.5%;
    text-align: center;
    padding: 2% 5%;
}

#present h2 {
    font-size: 2.65em;
}
/* Future section */
#aifuture {
    text-align: center;
    padding: 0% 5%;
    margin-top: 3%;
}

#aifuture h2 {
    font-size: 2.65em;
}
/* Curiosities section */
#curiosities { 
    text-align: center;
}

#curiosities .container {
    margin-top: 2%;
    padding-top: 2.5%;
    margin-bottom: 5.25%;
}

#curiosities p {
    display: none;
}

#curiosities h2 {
    padding-top: 1.25%;
    margin-top: 0;
    font-size: 2.42em;
}

#curiosities a {
    text-decoration: none;
    font-weight: bold; /* Negrita */
    color: rgb(219, 247, 253);
}

#curiosities .cards{
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 30px;
    margin: 12px;
    border-radius: 12px;
}

.cards:first-child {
    background-image: /* Imagen de fondo */
    linear-gradient(0deg
    , rgba(2, 31, 73, 0.5) /* Degradado para que el fondo se vea más oscuro */
    ,rgba(3, 41, 72, 0.5) )
    ,url("../images/at4.jfif");
    background-position: center center;
    background-size: cover;
}

.cards:nth-child(2) {
    background-image: /* Imagen de fondo */
    linear-gradient(0deg
    , rgba(0, 7, 15, 0.5) /* Degradado para que el fondo se vea más oscuro */
    ,rgba(10, 100, 174, 0.5) )
    ,url("../images/dbchess.jpg");
    background-position: center center;
    background-size: cover;
}

.cards:last-child {
    background-image: /* Imagen de fondo */
    linear-gradient(0deg
    , rgba(0, 7, 17, 0.5) /* Degradado para que el fondo se vea más oscuro */
    ,rgba(25, 129, 214, 0.5) )
    ,url("../images/toai.png");
    background-position: center center;
    background-size: cover;
}
/* Footer */
footer  {
    background-color: rgb(36, 115, 225);
    padding-bottom: 3.75px;   
}

footer a {
    text-decoration: none;
    color: rgb(11, 11, 11);
}

footer p {
    margin: 0;
    font-size: 1.1em;
}

footer .logo {
    padding-right: 7px;
    font-family: 'Ethnocentric';
    text-decoration: none;
}

footer .logo a{ 
    color: rgb(219, 247, 253);
}

footer .info {
    color: rgb(219, 247, 253);
}

footer .info a {
    color: rgb(219, 247, 253);
}

footer .container {
    height: 105px;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: bold;
}

footer .github img {
    background-size: cover;
    background-position: center center;
    height: 50px;
    width: 50px;
    margin-left: 62.5px;
}

/* Imágenes Future */
#aifuture .imagenes {
    display:flex;
    justify-content: center;
}

#aifuture .imagen1 {
    background-image: /* Imagen de fondo */
    linear-gradient(0deg
    , rgba(0, 18, 41, 0.25) /* Degradado para que el fondo se vea más oscuro */
    ,rgba(18, 149, 255, 0.25) )
    ,url("../images/ai4.png");
    background-size: cover;
    background-position: center center;
    height: 310px;
    width: 310px;
    border-radius: 40px;
    margin-right: 5%;
    box-shadow: 4px 4px 20px rgb(15, 15, 15);
}

#aifuture .imagen2 {
    background-image: /* Imagen de fondo */
    linear-gradient(0deg
    , rgba(0, 18, 41, 0.2) /* Degradado para que el fondo se vea más oscuro */
    ,rgba(18, 149, 255, 0.2) )
    ,url("../images/ai2.jpg");
    background-size: cover;
    background-position: center center;
    height: 310px;
    width: 310px;
    border-radius: 40px;
    box-shadow: 4px 4px 20px rgb(15, 15, 15);
}
/* Media Queries */
@media screen and (max-width: 1065px) {
    .miNav a:not(:first-child) {display: none;}
    .miNav a.icon {
    float: right;
    display: block;
    padding-top: 22.2px;
    padding-right: 22px;
    font-size: 35px;
    }
    }
@media screen and (max-width: 1065px) {
    .miNav.responsive {position: relative;}
    .miNav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
    }
    .miNav.responsive a {
    float: none;
    display: block;
    text-align: left;
    }
    }

@media (min-width:746px) {

.info p {
        display: block;
}    

.miNav .icon {
    display: none;
    padding:0px; /* añadido para que no engorde la barra con el icono de la hamburguesa */
    }
            
.miNav .active{
    text-align: left;
    margin-top: 5px;
}
            
nav .ai {
    margin-top: 10px;
    margin-left: 20px;
}
#hero {
    height:100vh;
    font-size: 1.55em;
}
#hero h1 {
    font-size: 2.75em;
}
    
#history {
    padding-bottom: 45px;
}
#history .container {
    padding-top: 30px;
    display:flex;
    justify-content: center;
}

#history .texto {
    width:75%;
    text-align: justify;
    padding-right: 6.75%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#history .contenedor-img {
    background-image: /* Imagen de fondo */
    linear-gradient(0deg
    , rgba(0, 18, 41, 0.325) /* Degradado para que el fondo se vea más oscuro */
    ,rgba(18, 149, 255, 0.325) )
    ,url("../images/at1.jpg");
    background-size: cover;
    background-position: center center;
    height: 500px;
    width: 500px;
    border-radius: 40px;
    box-shadow: 4px 4px 20px rgb(15, 15, 15);
}

#present .container {
    display:flex;
    padding: 0% 6%;
    justify-content: center;
}

p { font-size: 1.45em;}

#present .texto {
    width:75%;
    text-align: justify;
    padding-left: 6.75%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#present .contenedor-img {
    background-image: /* Imagen de fondo */
    linear-gradient(0deg
    , rgba(0, 18, 41, 0.25) /* Degradado para que el fondo se vea más oscuro */
    ,rgba(18, 149, 255, 0.25) )
    ,url("../images/ai1.jpg");
    background-size: cover;
    background-position: center center;
    height: 500px;
    width: 500px;
    border-radius: 40px;
    box-shadow: 4px 4px 20px rgb(15, 15, 15);
}

#aifuture {
    padding-top: 45px;        
}

footer .logo {
    padding-left: 135px;
    font-size: 1.35em;
}
footer .github img {
    background-size: cover;
    background-position: center center;
    height: 62.5px;
    width: 62.5px;
    margin-left: 400px;
}

}
@media only screen and (width < 1288px) {
    footer .github img {
        background-size: cover;
        background-position: center center;
        height: 50px;
        width: 50px;
        margin-left: 40px;
    }
    footer .logo {
        padding-left: 0px;
    }
    .info p {
        display: none;
    }
}
@media only screen and (width > 1288px) {
#curiosities .carta {
    display:inline-flex;
    justify-content: space-between;
    align-items: center;
}
#curiosities p {
    display: block;
    margin-bottom: 30px;
    color:rgb(207, 255, 250);
    font-weight: bold;
}
#curiosities h3 {
    font-size: 1.95em;
    margin-top: 0;
}
#curiosities .cards {
    box-shadow: 4px 4px 20px rgb(15, 15, 15);
    flex: 1;
    max-width: calc(33.333% - 20px);
    padding: 20px;
    height: 425px;
}
.cards:nth-child(2) p {
    padding-top: 45px;
    padding-bottom: 20px;
}
.cards:first-child p {
        padding-top: 45px;
        padding-bottom: 20px;
}
.cards:last-child p {
    padding-top: 21px;
    padding-bottom: 10px;
}

}

@media only screen and (width <= 975px) and (width > 746px) {
#history .contenedor-img {
    height: 669px;
}
#present .contenedor-img {
    height: 605px;
}
}