/**********************************************************/
/* Web de Inteligencia Artificial                         */
/* Hoja de estilo para gallery.html                       */
/* Autor: David Solera Romero                             */
/* Versión: 1.0                                           */
/* 12 de octubre de 2023                                  */
/**********************************************************/

* {box-sizing: border-box;}

/* Fuentes */
@font-face {
    font-family: Ethnocentric;
    src: url(../fonts/ethnocentric.otf);
}
@font-face {
    font-family: Aero;
    src: url(../fonts/Aero.ttf);
}
/* Estilado general */
body {
    margin: 0;
    background: radial-gradient(circle, rgb(12, 52, 133) 0%, rgb(52, 163, 255) 100%);
}

#wrapper {width:80%;
    margin:auto;}
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';}
h1,h2,h3{
text-align: center;
padding-bottom:10px;
}

section {padding: 6% 0;}

.vacio {padding-bottom: 15px;
    background-color: rgb(36, 115, 225);}

.fa {
padding: 20px;
font-size: 35px;
width: 30px; height: 30px; border-radius: 50%;
text-align: center;
text-decoration: none;
margin: 5px 2px;
color:#15cdee;
box-sizing: content-box;
}
/* Animaciones */
#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;}

.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 */
    }

html {scroll-behavior: smooth;}

/* Barra de navegación */

nav {
position: sticky;
top:0;
z-index: 999;
}

.active {
    font-family: 'Ethnocentric';
    margin-bottom: 5px;
    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;
}

.miNav .icon {
display: none;
padding:0px;
}

.miNav a .active{
    
    text-align: left;
}

nav .ai {
    margin-top: 10px;
    margin-left: 20px;
}

/* Media Queries Barra de Navegación */

@media screen and (max-width: 750px) {
.miNav a:not(:first-child) {display: none;}
.miNav a.icon {
padding-top: 1px;
font-size: 35px;
float: right;
display: block;
}
}
@media screen and (max-width: 750px) {
.miNav.responsive {position: relative;}
.miNav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.miNav.responsive a {
float: none;
display: block;
text-align: left;
}
}

/* HERO */

#home{background-image: url('../images/galeriahero.jfif'); 
height:100vh; 
background-repeat: no-repeat; 
background-size: cover; 
background-position: 50%; 

padding-left:3.25%; 
padding-top:3.25%; 
}

#titulo{
width: 33%;
padding: 2%; 
border-radius: 35%; 
margin-left:60%;
text-align: center; 
font-size: 2.75rem; 
color:#c3a6f6;
}

/* Galeria de fotos */

.grid3{display:grid;
grid-template-columns: auto auto auto;}

.tercios img {width: 100%;
        padding: 4%;}

/* Galeria de videos */

.container {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%; 
}

.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
padding:5%;
}

.grid2{display:grid;
grid-template-columns: auto auto;}

.tercios img {width: 100%;
padding: 2%;}

/* Footer */

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);
}

footer .logo {
    padding-right: 60px;
    font-size: 1.35em;
}
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;
    padding-top: 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 .contenedor {
    height: 105px;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: bold;
}
.info p {
    display: block;
}
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 QUERIES */

@media only screen and (width<= 1050px){
#wrapper {width:95%;}
.grid3  {grid-template-columns: 50% 50%;}
.grid2  {grid-template-columns: 100%;}
.active { margin-top: 7px; }
.info p {
    display: none;
}
footer .logo {
    font-size: 1.03em;
    padding-bottom: 2px;
}

nav .ai {
    margin-top: 10px;
    margin-left: 0px;
}
}

@media only screen and (width < 1288px) {
    footer .github img {
        background-size: cover;
        background-position: center center;
        height: 50px;
        width: 50px;
        margin-left: 40px;
        margin-top: 10px;
    }
    footer .logo {
        padding-left: 0px;
    }
    .info p {
        display: none;
    }
}

@media only screen and (width<= 750px){
#wrapper{width:100%}
.grid3  {grid-template-columns: 100%;}
.grid2  {grid-template-columns: 100%;}
.info p {
    display: none;
}
footer .logo {
    padding-bottom: 2px;
}

.miNav #ai {
    margin-bottom: 7px;
}
.miNav a{
    padding-bottom: 15px;
    font-size: 1.2rem;
}
}