/***********************************/
/*       Steampunk Website         */
/* ------------------------------- */
/*   Author: David Solera Romero   */
/*   Version: 1.0                  */
/*   Date: 26 / 10 / 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;
    font-family: textos;
    font-size: 1.8rem;
    background-color: black;
    color: #ffe2ab;
    background-image: url('../img/patronengranajes.jpg');}

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

h1, h2{color: #d1a44b;}

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

p {font-size: 1.8rem;}

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

img {box-shadow: 0px 0px 17.5px 0.75px #f5b349; border: 0.75px solid;}

img:hover {box-shadow: 0px 0px 32.5px 0.9px 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 {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/img7.jpg);
    height: 94.1vh;
    background-repeat: no-repeat;
    background-position: 51.80%;
    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: 5.25rem;
    text-shadow: 3.25px 2.25px 1px black;}

/* Hero button */
#hero button {
    transform: translate(-50%, -50%);
    text-align: center;
    position: absolute;
    top: 81.5vh;
    left: 50.5%;
    font-size: 1.5rem;
    padding: 12.5px 35px;
    padding-bottom: 9px;
    color: #ffe2ab;
    background: radial-gradient(circle, rgba(114,52,3,1) 0%, rgba(79,35,1,1) 100%);
    border-radius: 15px;
    border: 3.85px solid;
    font-family: textos;
    z-index: 1;}

/* Button hover  */
.voltage-button button:hover {cursor: pointer;}

@keyframes boton {
    0% {border-color: #8f610c;}
    33%{border-color: #6a4d16;}
    66% {border-color: #f0bb59;}
    to {border-color: #8f610c;}
}

#hero button:hover {
    color: #db930d;
    transition: 2.25s;
    animation-name: boton;
    animation-duration: 3s;
    animation-iteration-count: infinite;}

.voltage-button button:hover + svg, .voltage-button button:hover + svg + .dots {opacity: 1;}

.voltage-button svg {
    display: block;
    position: absolute;
    top: 81.5vh;
    left: 50.5%;
    transform: translate(-50%, -50%);
    width: 162.5px;
    height: 69.5px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s;
    transition-delay: 0.05s;
    z-index: 2;}

.voltage-button svg path {stroke-dasharray: 100; filter: url("#glow");}

.voltage-button svg path.line-1 {
    stroke: #fdebc0;
    stroke-dashoffset: 0;
    animation: spark-1 3s linear infinite;}

.voltage-button svg path.line-2 {
    stroke: rgb(240, 171, 21);
    stroke-dashoffset: 500;
    animation: spark-2 3s linear infinite;}

.voltage-button .dots {
    opacity: 0;
    transition: opacity 0.3s;
    transition-delay: 0.4s;}

.voltage-button .dots .dot {
    width: 1rem;
    height: 1rem;
    background: white;
    border-radius: 100%;
    position: absolute;
    opacity: 0;}

.voltage-button .dots .dot-1 {
    top: 0;
    left: 20%;
    animation: fly-up 3s linear infinite;}

.voltage-button .dots .dot-2 {
    top: 0;
    left: 55%;
    animation: fly-up 3s linear infinite;
    animation-delay: 0.5s;}

.voltage-button .dots .dot-3 {
    top: 0;
    left: 80%;
    animation: fly-up 3s linear infinite;
    animation-delay: 1s;}

.voltage-button .dots .dot-4 {
    bottom: 0;
    left: 30%;
    animation: fly-down 3s linear infinite;
    animation-delay: 2.5s;}

.voltage-button .dots .dot-5 {
    bottom: 0;
    left: 65%;
    animation: fly-down 3s linear infinite;
    animation-delay: 1.5s;}

@keyframes spark-1 {
    to {stroke-dashoffset: -1000;}}

@keyframes spark-2 {
    to {stroke-dashoffset: -500;}}

@keyframes fly-up {
    0% {opacity: 0; transform: translateY(0) scale(0.2);}
    5% {opacity: 1; transform: translateY(-1.5rem) scale(0.4);}
    10%, 100% {opacity: 0; transform: translateY(-3rem) scale(0.2);}}

@keyframes fly-down {
    0% {opacity: 0; transform: translateY(0) scale(0.2);}
    5% {opacity: 1; transform: translateY(1.5rem) scale(0.4);}
    10%, 100% {opacity: 0; transform: translateY(3rem) scale(0.2);}}

/* Common things - Concept and Technology */
#concept .container, #technology .container {
    display: grid;
    grid-template-columns: 50% 50%;
    padding-left: 50px;
    padding-right: 50px;
    text-align: justify;}

/* Concept */
#concept .container {
    margin-top: 75px;
    padding-bottom: 70px;
    padding-top: 8%;}

#concept #imagenconcept img{
    width: 100%;
    margin-top: 14%;
    box-shadow: 2px;
    border-radius: 10px 50px 10px 50px ;}

#concept .texto {margin-top: 7%; padding-left: 50px;}

/* Transitory image between Concept and Technology sections */
#imagentransitoria {
    background: fixed no-repeat;
    background-image: url(../img/img10.png);
    background-size: cover;
    height: 55vh;
    box-shadow: 0px 0px 11px 0.75px #f5b349;
    background-position: 48.5%;
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 4.955%;}

#imagentransitoria:hover {
    box-shadow: 0px 0px 40px 0.95px rgb(245, 170, 50); transition: 1.1s;}

#imagentransitoria img {
    width: 90%;
    display: none;
    margin: 0;
    padding: 0;}

/* Technology */
#technology .container {padding-bottom: 75px; padding-top: 10%;}

#technology img {width: 100%; border-radius: 50px 10px 50px 10px;}

#technology .texto {padding-right: 50px;}

/* Culture */
#culture {margin-bottom: 2%; padding-top: 6.75%;}

#culture .grid4 {
    display: grid;
    grid-template-columns: repeat(4, 25%);
    text-align: center;}

#culture .grid4 .col-4 .cartas {
    width: 100%;
    transform-origin:center;
    margin-top: 15px;
    visibility: hidden;
    border: 1px solid #f0bb59;
    background: linear-gradient(96deg, rgba(243, 223, 185, 0.15) 0%, rgba(240, 187, 89, 0.15) 80%);}

#culture .grid4 .col-4 h3 {
    font-size: 1.625em;
    margin-top: 15px;
    margin-bottom: 10px;
    color: #d8aa4f;
    padding-left: 2.5px;
    padding-right: 2.5px;}

#culture .grid4 .col-4 p {
    font-size: 0.975em;
    margin-top: 0;
    margin-bottom: 15px;
    padding-left: 5px;
    padding-right: 5px;}

#culture .grid4 .col-4 img {
    width: 100%;
    -webkit-box-reflect:below 0px linear-gradient(transparent, transparent, #0004);
    transform-origin:center;
    transform:perspective(800px) rotateY(17.5deg);
    transition:0.5s;
    border-radius: 6px;
    border: 0px;}

#culture .grid4:hover img,
#culture .grid4:hover img ~ .cartas {
    opacity:0.3;
    filter: blur(3px);}

#culture .grid4 img:hover ~ .cartas {
    opacity:1;
    visibility: visible;
    transition: opacity 1s ease-in-out 0.5s;
    filter: blur(0px);}

#culture .grid4 img:hover {
    transform:perspective(800px)       
    rotateY(0deg);
    opacity:1;
    filter: blur(0px);}

#culture .grid4 .col-4 {
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 20px;}

/* Media Queries reflect of images */
@media only screen and (width < 1260px) { 
    #culture .grid4 .col-4 img {
        -webkit-box-reflect:initial;
        transform:perspective(800px) rotateY(0deg);}
    #culture .grid4 .col-4 .cartas {visibility: visible;}
    #culture .grid4:hover img,
    #culture .grid4:hover img ~ .cartas {filter: blur(0px); opacity:1; transition: 1.1s;}
    #culture .grid4 .col-4 {
        margin-left: 0px;
        padding-left: 20px;
        padding-right: 20px;
        margin-right: 0;
        margin-top: 20px;}}

/* Space */
#space {
    padding-top: 5%;
    margin-bottom: 4%;
    text-align: justify;}

#space .grid3 {
    display: grid;
    grid-template-columns: repeat(3, 33.33%);}

#space .grid3 img {
    width: 100%;
    border-radius: 30px;}

#space .grid3 .col-3 {
    padding-left: 38px;
    padding-right: 38px;
    margin-top: 12.5px;}

#space .grid3 .col-3 {
    display: flex;
    align-items: center;
    justify-content: center;}

/* Footer */
footer .container {
    display:grid;
    grid-template-columns: auto auto auto;
    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;}

/* Footer button style and align center */
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;}

/* Media Queries of the whole web page */
@media only screen and (width < 1625px) { 
    #hero button {top: 77vh;}

    .voltage-button svg{top:77vh;}}

@media only screen and (width < 1533px) {
    #culture .grid4 .col-4 h3 {font-size: 1.28em;}
    
    #culture .grid4 .col-4 p {font-size: 0.9em;}

    #concept #imagenconcept img{margin-top: 22.5%;}
    
    #technology img {margin-top: 13%;}

    #concept .texto {margin-top: 1%;}

    footer .container {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 < 1260px) { 
    footer .creditos .modal h1 {font-size: 2.5rem;}

    #culture .grid4 .col-4 h3 {font-size: 1.2em;}
    
    #culture .grid4 .col-4 .cartas {margin-top: 6px;}

    #concept #imagenconcept img{margin-top: 36.5%;}

    #culture {padding-top: 10.25%;}

    #culture .grid4 {grid-template-columns: 50% 50%;}

    #culture .grid4 .col-4 img {border: 0.75px solid;}

    #technology img {margin-top: 25%;}

    #space .grid3 .col-3 {
        margin-left: 22.75px;
        margin-right: 22.75px;
        padding-left: 21.5px;
        padding-right: 21.5px;}

    #space {padding-top: 10.25%;}

    #space .grid3 {grid-template-columns: 1fr;}

    #concept .texto {margin-top: 0%;}}

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

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

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

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

    footer .creditos{
        order: 3;
        padding-top: 3%;
        margin-bottom: 6%;}

    #concept .container, #technology .container {
        padding-left: 35px; 
        padding-right: 35px;}

    #technology .container { 
        grid-template-columns: 100%;
        padding-bottom: 15px;}

    #concept .container {
    grid-template-columns: 100%;
    padding-bottom: 15px;}

    #concept #imagenconcept img{margin-top: 0%;}

    #technology img {margin-top: 0%;}

    #concept .texto {padding-left: 0px; padding-top: 2.75%;}

    #technology .texto {padding-right: 0px;}

    #imagentransitoria img {
        width: 92.5%;
        display:block;
        margin-bottom: 0;
        padding-bottom: 0;}

    #imagentransitoria {
        background-image: none;
        box-shadow: none;
        margin-top: 27.5px;
        padding-top: 4%;}

    #imagentransitoria:hover {box-shadow: inherit;}

    section {margin-top: 10%;}

    #concept {margin-top: 27%; padding-top: 1%;}

    #technology {margin-top: 0.5%; padding-top: 16.5%;}

    #hero{margin-top: 0; padding-top: 0;}
    
    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) {
    h2 {font-size: 2.25rem;}

    p {font-size: 1.5rem;}

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

@media only screen and (width <= 750px) {
    #culture .grid4 .col-4 {
        padding-left: 50px;
        padding-right: 50px;
        margin-top: 22.5px;}

    #culture .grid4 #primero {
    margin-top: 0px;}

    #concept .container, #technology .container {padding-left: 22.5px; padding-right: 22.5px;}

    #culture .grid4 {grid-template-columns: auto;}

    #wrapper {width: 95%;}

    #hero button {font-size: 1.2rem;}

    #technology h2, #concept h2 {margin: 0; padding: 0;}

    #concept .texto {margin-top: 12.5px;}

    .voltage-button svg {width: 144.5px; height: 62px;}

    #technology .container {padding-top: 27.5px;}

    #concept .container {padding-bottom: 0px;}

    #imagentransitoria {
        margin-top: 0;
        margin-bottom: 0;}

    #imagentransitoria img {width: 95.5%; 
        margin-bottom: 16px;
        margin-top: 27px;
        height: 49.5vh;}}
        
@media only screen and (width <= 650px) { 
    #hero button {font-size: 1rem;}

    #imagentransitoria img {height: 45vh;}

    .voltage-button svg {width: 133.5px;height: 55px;}}

@media only screen and (width < 400px) { 
    #imagentransitoria img {height: 35.33vh;}

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

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

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