/***********************************/
/*       Steampunk Gallery         */
/* ------------------------------- */
/*   Author: David Solera Romero   */
/*   Version: 1.0                  */
/*   Date: 03 / 12 / 2023          */
/***********************************/

/* Fonts */

@font-face {font-family: titulos; src: url('../font/Jack\ of\ Gears\ Regular.ttf');}

@font-face {font-family: textos; src: url('../font/Fha1.ttf');}

/* General layout */

* {box-sizing: border-box;}

body{margin:0;padding:0; /* quitamos por defectos */
    font-family: textos; /* familia de texto */
    font-size: 1.8rem;
    background-color: black;
    color: #ffe2ab;
    background-image: url('../img/patronengranajes.jpg');}

h1,h2,h3{font-family: titulos; color: #d1a44b;}

h2 {
    margin: 0px;
    padding-top: 15px;
    padding-bottom: 30px;
    font-size: 2.4rem;
    text-align: center;}

p {font-size: 1.8rem;}

#wrapper {width: 76%; margin:auto; background-color: #02080c;}

img:hover {box-shadow: 0px 0px 5px 1px rgb(245, 170, 50); transition: 1.1s;}

/* Header / Nav */
a {text-decoration: none;}

nav {background-color: hsl(205, 75%, 3%, 0.95);
    position: sticky;
    top:0;
    z-index: 999;
    overflow: hidden;}

nav a {color: #fdd282;
    padding-right: 2px;
    float: left;
    display: block;
    text-align: left;
    padding: 0px 16px;
    font-weight: bold;
    padding-bottom: 16px;}

nav #sw {padding-right: 22.5px;
    border-right: 2px solid #ffe2ab;
    padding-left: 15px;
    font-size: 2.25rem;
    padding-top: 20px;
    font-family: titulos;
    transition: all .5s ease;
    transform-style: preserve-3d;}

nav #sw:after {content: "TAKE ME HOME";
    position: absolute;
    text-align: center;
    top: -100%;
    left: 0px;
    width: 100%;
    transform-origin: left bottom;
    transform: rotateX(90deg);
    padding-bottom: 16px;}

nav #sw:hover {transform-origin: center bottom;
    transform: rotateX(-90deg) translateY(100%);}

nav a:hover, .miNav .icon:hover {transition: 0.75s; color: #db9a22;}

nav .sw {padding-top: 29.5px;
    font-size: 1.75rem;
    margin-right: 12px;
    float: right;}

.miNav .icon {display: none;
    padding:0px;
    margin-top: 12px;
    padding-right: 22px;
    color: #fdd282;}

/* Navigation bar --> Media Queries */
@media screen and (max-width: 950px) {
    .miNav a:not(:first-child) {display: none;}

    .miNav a{font-size: 1.5rem;}

    .miNav a.icon {
    font-size: 42.5px;
    float: right;
    display: block;}

    nav .sw {padding-left: 15px; margin-left: 0px;}

    nav #sw {
        border: none;
        font-size: 1.475rem;
        margin-top: 2.5px}

    nav #sw:after {text-align: left; padding-left: 15px;}

    nav #last {padding-bottom: 10px;}}

@media screen and (max-width: 950px) {
    .miNav.responsive {position: relative;}

    .miNav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;}

    .miNav.responsive a {
    float: none;
    display: block;}}

/* Sections */
/* Hero Section */
#hero {background: fixed no-repeat;
    background-image: url(../img/galleryhero.jpg);
    height: 94.1vh;
    background-repeat: no-repeat;
    background-position: 25%;
    background-size: cover;
    position: relative;}

#hero h1 {
    color: #fddb9a;
    margin: 0;
    top: 20%;
    left: 51%;
    transform: translate(-50%, -50%);
    text-align: center;
    position: absolute;
    font-size: 6.75rem;
    text-shadow: 3.25px 2.25px 1px black;}

#hero .containerHero {
    height: 94.1vh;
    background-color: rgba(253, 210, 130, 0.175);}

/* Images */
#images {text-align: center; padding-top: 5.75%;}
.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
    width: 90%;
    margin: auto;
    padding-bottom: 30px;
}

/* Create four equal columns that sits next to each other */
.column {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;}

.column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;}

/* Responsive layout - makes a two column-layout instead of four columns for mobiles and tablets */
@media screen and (max-width: 1375px) {
    .column {
        flex: 50%;
        max-width: 50%;}}

@media screen and (max-width: 700px) {
    .column {
        flex: 100%;
        max-width: 100%;}}

/* Container needed to position the overlay. Adjust the width as needed */
.containerImg {
    position: relative;
    max-width: auto;}

/* Make the image to responsive */
.image {
    display: block;
    width: 100%;
    height: auto;
    border: 0.25px solid #E4BC69;}

/* The overlay effect - lays on top of the container and over the image */
.overlay {
    position: absolute;
    bottom: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.835); /* Black see-through */
    width: 100%;
    transition: .5s ease;
    opacity:0;
    color: #FFE2AB;
    font-size: 20px;
    padding: 20px;
    text-align: center;}

/* When you mouse over the container, fade in the overlay title */
.containerImg:hover .overlay {opacity: 1;}

/* Carrousel between images and videos */

.containerGal {
    position: relative;
    width: 320px;
    margin: 4% auto 35.5% auto;
    perspective: 1025px;}

.carousel {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d; 
    animation: rotate360 92s infinite forwards linear;}

.carousel__face { 
    position: absolute;
    width: 305px;
    height: 191px;
    top: 20px;
    left: 10px;
    right: 10px;
    background-size: cover;
    box-shadow:inset 0 0 0 2000px rgba(239, 132, 10, 0.075);
    display: flex;
    border-radius: 8px;
    border: 0.25px solid #E4BC69;}

span {
    margin: auto;
    font-size: 2rem;}

.carousel__face:nth-child(1) {
    background-image: url("../img/carrousel (1).jpg");
    background-repeat: no-repeat;
    transform: rotateY(  0deg) translateZ(430px); }
.carousel__face:nth-child(2) { 
    background-image: url("../img/carrousel (3).jpg");
    background-repeat: no-repeat;
    transform: rotateY( 40deg) translateZ(430px); }
.carousel__face:nth-child(3) {
    background-image: url("../img/carrousel (2).jpg");
    background-repeat: no-repeat;
    transform: rotateY( 80deg) translateZ(430px); }
.carousel__face:nth-child(4) {
    background-image: url("../img/carrousel (4).jpg");
    background-repeat: no-repeat;
    transform: rotateY(120deg) translateZ(430px); }
.carousel__face:nth-child(5) { 
    background-image: url("../img/carrousel (5).jpg");
    background-repeat: no-repeat;
    transform: rotateY(160deg) translateZ(430px); }
.carousel__face:nth-child(6) { 
    background-image: url("../img/carrousel (6).jpg");
    background-repeat: no-repeat;
    transform: rotateY(200deg) translateZ(430px); }
.carousel__face:nth-child(7) { 
    background-image: url("../img/carrousel (7).jpg");
    background-repeat: no-repeat;
    transform: rotateY(240deg) translateZ(430px); }
.carousel__face:nth-child(8) {
    background-image: url("../img/carrousel (8).jpg");
    background-repeat: no-repeat;
    transform: rotateY(280deg) translateZ(430px); }
.carousel__face:nth-child(9) {
    background-image: url("../img/carrousel (9).jpg");
    background-repeat: no-repeat;
    transform: rotateY(320deg) translateZ(430px); }

@keyframes rotate360 {
    from {transform: rotateY(0deg);}
    to {transform: rotateY(-360deg);}}

/* Videos */
#videos {text-align: center; padding-top: 6%;}

.grid2 {display: grid; grid-template-columns: 50% 50%;}

.grid2 .col-2 {padding-left: 7.5%; padding-right: 7.5%;}
/* Iframes */
.container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;
    border: 1.35px solid #E4BC69;}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;}

/* Footer */
footer .containerFooter {
    margin-top: 10%;
    display:grid;
    grid-template-columns: 33.3% 33.4% 33.3%;
    background-color: rgb(8, 7, 2);}

/* Footer credits */
/* The Modal (background) */
footer .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.85); /* Black w/ opacity */}

/* Modal Content/Box */
footer .modal-content {
    background: #02080C;
    border: 0.25px solid;
    margin: 15% auto;
    padding: 20px;
    width: 80%;
    color: #FFE2AB}

/* The Close Button */
footer .close {
    float: right;
    font-size: 28px;
    font-weight: bold;}

footer .close:hover,
footer .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;}

/* General style for the button */
footer .creditos {
    display: flex;
    justify-content: center;
    align-items: center;}

footer .creditos button {
    padding: 10px 17.5px;
    padding-bottom: 5px;
    border-radius: 10px;
    font-family: titulos;
    font-size: 2.5rem;}

/* Footer button hover credits */
.button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7.5px;
    background-color: #FFE2AB;
    color: rgb(19, 19, 19);
    border: none;
    position: relative;
    cursor: pointer;
    transition-duration: .2s;
    box-shadow: 2px 2px 7px rgba(241, 222, 124, 0.85);
    transition-duration: .5s;}

.svgIcon {height: 25px; transition-duration: 2.7s;}

.bell path {fill: rgb(19, 19, 19);}

.button:hover {
    background-color: #eebd5a;
    transition-duration: 1.75s;
    box-shadow: 2px 2px 13px rgba(233, 208, 86, 0.75);}

.button:active {transform: scale(0.97); transition-duration: 2.8s;}

.button:hover .svgIcon {transform: rotate(250deg); transition-duration: 3s;}

/* Footer social networks */
footer .redes {
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;}

footer .redes ul {list-style: none;}

/* Footer Nav Bar */
footer .navbar{
    display: flex;
    justify-content: center;
    flex-direction: row;
    font-family: titulos;
    text-align: center;}

footer .navbar #tres1 {
    display: flex;
    justify-content: center;
    flex-direction: column;}

footer .navbar #tres2 {
    padding-left: 5%;
    display: flex;
    justify-content: center;
    flex-direction: column;}

footer .navbar a{
    font-size: 2.25rem;
    color: #E4BC69;
    padding-bottom: 2.5px;}

footer .navbar a:hover {
    transition: 0.7s; 
    color: #d69419;}

.fa {color: #f5c469;}

.fa:hover {
    color: #d89c2d;
    transition: 0.75s;}

/* General Media Queries of the web page */
@media only screen and (width < 1533px) {     
    footer .containerFooter {padding-top: 18px; padding-bottom: 18px;}

    footer .navbar a{font-size: 1.51rem;}

    footer .redes {font-size: 1.33rem;}

    footer .creditos button {font-size: 1.65rem; align-items: normal;}

    #space .grid3 .col-3 {
        padding-left: 17.5px;
        padding-right: 17.5px;}}

@media only screen and (width < 1430px) {
    .containerGal{display: none;}}

@media only screen and (width < 1145px) {
    footer .creditos .modal h1 {font-size: 2.5rem;}
    
    .grid2 {grid-template-columns: 100%;}

    .grid2 .col-2:nth-child(2) {padding-top: 5%;}} 

@media only screen and (width < 1055px) { 
    #hero h1 {font-size: 3.75rem;}

    section {margin-top: 10%; padding-top: 16.5%;}

    #hero{margin-top: 0; padding-top: 0;}

    footer .redes {margin-top: 2.75%;}

    footer .containerFooter {
        grid-template-columns: 100%; 
        padding-top: 0; 
        padding-bottom: 0;
        margin-top: 15%;}

    footer .navbar {padding-bottom: 2px;}

    footer .creditos{
        order: 3;
        padding-top: 3%;
        margin-bottom: 6%;}
    
    footer .navbar a{font-size: 1.85rem;}

    footer .redes {font-size: 1.5rem;}

    footer .creditos button {font-size: 1.775rem; align-items: normal;}}


@media only screen and (width <= 900px) {
    .grid2 .col-2 {padding-left: 5%; padding-right: 5%;}

    h2 {font-size: 2.25rem;}

    p {font-size: 1.5rem;}

    #hero .container {height: 93.8vh;}

    #hero {
        height: 93.8vh;
        background: initial;
        background-position: 25%;
        background-size: cover;
        background-image: url(../img/galleryhero.jpg);}}

@media only screen and (width <= 750px) {#wrapper {width: 97.5%;}}

@media only screen and (width < 400px) { 
    footer .navbar a{font-size: 1.3rem;}

    footer .redes {font-size: 1.1rem;}

    footer .creditos button {font-size: 1.45rem; align-items: normal;}}