/*------------------ Estilo de web Joystick ---*/
/*-------------------------------------------------------------------------------------------FUENTES*/
@font-face {
    font-family: berki;
    src: url(../fonts/BerkshireSwash-Regular.ttf);
}
/*-------------------------------------------------------------------------------------------SUAVIZAR SCROLL*/
html{scroll-behavior: smooth;}
body {background-image: url("../images/geometric-1732847_960_720.png")}
#container {font-family: berki; margin:auto;}
/*-------------------------------------------------------------------------------------------TEXTOS*/
h1 {
    color: white;
    text-align: center;
    letter-spacing: 5px;
    background-color: #245997;
    padding: 1%;
    margin: 2% auto 1% auto;
    text-decoration: underline;
    text-shadow: -5px 5px 5px blue;
    border-radius: 50%;}
h2 {color: white; text-align: center;}
h3 {color: white; text-align: center;}
h4 {text-align: right; margin-top: 200px; text-decoration: underline;}
h5 {
    font-size: 7.5em;
    color: white;
    text-align: center;
    margin: 3%;
    letter-spacing: 1.3em;
    text-shadow: 7px 7px 1px black;}
h6 { font-size: 1em; margin: 0%; text-decoration: underline;}
/*-------------------------------------------------------------------------------------------HERO*/
#hero {
    background-image: url("../images/fondo1\ -\ copia.webp");
    background-size: cover;
    background-position: center;
    position: relative;
    width: auto;
    height: 60vh;
    color: #389fdb;}
#hero img {
    position: absolute;
    margin: auto;
    width: 10vh;
    height: 10vh;
    top: 45%;}
#pong {left: 30%;}
#atari {left: 50%;}
#android {left: 69.3%;}
#virtual {left: 90%;}
/*------------------------------------------------------------------------------------------- NAV*/
nav {
    position: sticky;
    top:0px;
    z-index: 99; margin: 1% 0% 2% 0%;}
.topnav {
    background-color: #063163;
    overflow: hidden;
    position: fixed;
    top: 0px;
    }
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 2em;}
.topnav a:hover {
    background-color: #389fdb;
    color: rgb(0, 0, 0);}
.topnav .icon {display: none;} 
/*------------------------------------------------------------------------------------------- HISTORIA*/
#historia {margin: auto;}
.grid-2 {display: grid; grid-template-columns: auto auto;}
.item-grid-2 {
    padding: 2%;
    margin: 1%  1% 1% 1%;
    background-color:rgba(31, 104, 238, 0.664);
    font-size: 1.5em;
    display: block;}
.item-grid-2 img {
    display: block;
    height: 25vh; 
    width: 25vh;
    margin: auto;
    padding: 1%;
    background-color: rgba(255, 255, 255, 0.5);}
.doble img { 
    display: inline-block;
    height: 25vh; 
    width: 25vh;
    margin: auto 7%;
    padding: 1%;}
.item-grid-2 a:link {color: white; text-decoration: none;}
.item-grid-2 a:visited {color: blue; text-decoration: none;}
.item-grid-2 a:active {color: black; text-decoration: none;}
/*------------------------------------------------------------------------------------------- CARDS*/
#interior {
    background-color: rgba(31, 104, 238, 0.664); 
    position: relative;
    width: auto;
    height: 40vh;
    margin: auto;}
.grid-4 {
    display:grid; 
    grid-template-columns:25% 25% 25% 25%;}
.item-grid-4 {
    width: auto;
    height: 60%;
    margin: auto;
    padding: 5%;
    margin: 5%;
    border-radius: 15% 15%;
    background-color: #6A9BF4;}
.item-grid-4 img {
    width:40%;
    height:40%;
    display: block; 
    margin: auto;}
.item-grid-4:hover {box-shadow: 4px 4px 8px black;}
.item-grid-4 button { 
    background-color: #245997;
    padding:10px;
    color:white;
    border-radius:10px;
    display:block;
    margin:auto;}
.item-grid-4 button:hover {background-color: #389fdb; cursor:pointer;}
/*------------------------------------------------------------------------------------------- Contenido Modal*/
.modal {
    display: none; 
    position: fixed;
    z-index: 1;
    padding: 1% 2%;
    left: 0%;
    top: 1%;
    width: 95%;
    height: 90%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}
.modal-content {
    background-color: #264380;
    color: white;
    margin: auto;
    padding: 3%;
    border: 1px solid white;  
    text-align: justify;
    font-size: 1.5em;
}
.modal-content img {
    display: inline-block;
    width: 50vh;
    height: 50vh;
    margin: 2%;

}
.close {
    color: white;
    float: right;
    font-size: 3.5em;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: blue;
    text-decoration: none;
    cursor: pointer;
}
/*------------------------------------------------------------------------------------------- GALERIA*/
#galeria .row .columna {box-sizing:border-box;}
.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 6px;}
.columna {
    flex: 25%;
    max-width: 25%;
    padding: 2px 2px;}
.columna img {
    width: 40%;
    height: 25%;
    margin: 5px;
    padding: 5px 10px;
    vertical-align: middle;
    width: 80%;}
.columna img:hover {box-shadow: 5px 5px 5px 5px black;}
.item-grid-4 .fa {
        color: #0e4e97;
        padding-left: 20%;
        font-size: 15em;
        text-decoration: none;}

/*------------------------------------------------------------------------------------------- WEBGRAFÍA*/
#bibliografia h1 {font-size: 1.5em;}
#biblio {background-color: #389fdb81;}
#biblio .fa:hover {opacity: 0.6; box-shadow: 2px 2px 4px black;cursor:pointer;}
#biblio img:hover {opacity: 0.6; box-shadow: 2px 2px 4px black;cursor:pointer;}
.grid-5 {
    display:grid;
    grid-template-columns:auto auto auto auto auto auto;
    font-size: 1.2em;}
.item-grid-5 {
    padding: 1%;
    margin: 2%;
    background-color: #2373e4c2;
    text-align: center;
    color: black;}
.item-grid-5 img {
    width: 6vh;
    height: 6vh;
    margin:auto;
    padding: 2%;}
#biblio .fa {
    font-size: 1.5em;
    padding: 5%;
    text-align: center;
    text-decoration: none;
    border-radius:50%;
    background: white;
    color: black;}
/*------------------------------------------------------------------------------------------- PIE DE PÁGINA*/
#footerr h1 {font-size:1.5em}
#footer {background-color:#389fdb96;}
.grid-3{
    display:grid;
    grid-template-columns: 15% auto 25%;
    font-size: 1em;}
.item-grid-3 {
    padding: 10px;
    margin: 10px;
    text-shadow: -7px 7px 7px black;}
.item-grid-3 img {
    height: 75%;
    width: 75%;
    margin: auto;
    padding: 2%;
    display: block;}
.item-grid-3 img:hover {box-shadow: -2px 5px 10px black;}
#footer .fa {
    font-size: 1.5em;
    padding: 3%;
    margin: 6%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius:50%;}
#footer .fa:hover {opacity: 0.6; box-shadow: 2px 2px 4px black;}
.fa-facebook-official {
    background: #0034a3;
    color: white}
.fa-instagram {
    background: linear-gradient(to left bottom, #E1306C, #833AB4, #405DE6); color: white;}
.fa-linkedin {background: #0A66C2; color: white;}
.fa-github {background: black; color: white;}
/*-------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 1600px) {
    #hero {background-position: left;}
    #hero img {visibility: hidden;}
    h5 {font-size: 5em;}
}
/*-------------------------------------------------------------------------------------------RESPONSIVE*/
@media only screen and (max-width:1100px){
    #container {font-size: 1em;}
/*-----------------------------------------------------------------------------*/
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
        float:right;
        display:block;}
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {position: absolute; right: 0; top: 0;}
    .topnav.responsive a {float: none; display: block; text-align: left;}
/*-----------------------------------------------------------------------------*/
    h1 {margin-top: 5%;}
    h2 {font-size: 1.1em}
    h5 {font-size: 3em;}
    p {font-size: 0.8em;}
/*-----------------------------------------------------------------------------*/
    #hero {width: auto; height: 40vh; background-position: left;}
    #hero img {visibility: hidden;}
/*-----------------------------------------------------------------------------*/
    #historia {width: 100%; font-size: 1em; background-position: left;}
    .grid-2 {grid-template-columns:auto auto;}
    .item-grid-2 {padding: 1% 5%}
    #historia img {height: 20vh; width: 20vh; margin: auto; padding: 2%;}
    .doble img {height: 15vh; width: 15vh; margin: 3%; padding: 1%;}
/*-----------------------------------------------------------------------------*/
    .item-grid-4 {font-size: 0.8em;}
    .item-grid-4 img {width:40%; height:40%;}
    .modal-content {text-align: justify; font-size: 1.5em; width: 80%; padding: 2%; margin: 0;}
/*-----------------------------------------------------------------------------*/
    #galeria {width: 100%; margin: auto; padding: 3%;}
    .columna {flex: 25%; max-width: 90%;}
/*-----------------------------------------------------------------------------*/
    #biblio {margin: auto;}
    .grid-5 {grid-template-columns: auto auto auto auto;}
    .item-grid-5 {width:90%; height:90%;}
    .item-grid-5 img {width: 4vh; height: 4vh; margin-top: 15px}
    #biblio .fa {font-size: 1em; padding: 2%; margin-top: 15px;}
/*-----------------------------------------------------------------------------*/
    #footer {font-size: 1em;}
    .item-grid-3 img {height: 90%; width: 90%;}
    #footer .fa {margin: 1%; padding: 6%; font-size: 1em;}
}
@media only screen and (max-width:800px){
    #container {font-size: 0.8em;}
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
        float:right;
        display:block;}
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;}
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;}
/*-----------------------------------------------------------------------------*/
    h1 {margin-top: 5%;}
    h2 {font-size: 1.1em}
    h5 {font-size: 2em;}
    p {font-size: 0.8em;}
/*-----------------------------------------------------------------------------*/
    #hero {width: auto; height: 40vh; background-position: left;}
    #hero img {visibility: hidden;}
/*-----------------------------------------------------------------------------*/
    #historia {width: 100%;}
    .grid-2 {grid-template-columns: auto auto;}
    .doble img {width: 10vh; height: 10vh; margin: auto;}
/*-----------------------------------------------------------------------------*/
    .grid-4 {grid-template-columns: auto auto;}
    .item-grid-4 img {width: 50%; height: 40%; }
    #interior .fa {font-size: 7em; margin-left: 5%;}
    .modal-content {text-align: left; font-size: 1em;}
/*-----------------------------------------------------------------------------*/
    #galeria {width: 100%;}
    .columna {flex: 50%; max-width: 100%;}
    .columna img { width: 90%; margin: 2%;}
/*-----------------------------------------------------------------------------*/
    .grid-5 {grid-template-columns: auto auto auto;}
    .item-grid-5 {width:auto; height:90%; font-size: 1.5em;}
    .item-grid-5 img {width: 4vh; height: 4vh; margin-top: 15px}
    #biblio .fa {font-size: 1em; padding: 4%; margin-top: 15px;}
/*-----------------------------------------------------------------------------*/
    #footer {font-size: 1em;}
    .grid-3 {grid-template-columns: auto auto 25%;}
    #footer .fa {padding: 10px; margin:auto;}
    .item-grid-3 img {width: 90%; height: 90%;}
}