/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


@font-face {
  font-family: TWBOZ;
  src: url(../Fonts/TWBOZ.otf);
}

@font-face {
  font-family: BaseZelda;
  src: url(../Fonts/BaseZelda.otf);
}

:root {
    --font-border: 
        -2px -2px 0 #00000080,
        2px -2px 0 #00000080,
        -2px 2px 0 #00000080,
        2px 2px 0 #00000080,
        -3px 0px 0 #00000080,
        3px 0px 0 #00000080,
        0px -3px 0 #00000080,
        0px 3px 0 #00000080;
        
    --custom-white: rgba(255, 255, 255, 0.9);
    --hyrule-gold: #be984c;
}

/* Etiquetas de neutralidad */
*{
    margin: 0;
    padding: 0;
    font-family: BaseZelda, Verdana, Geneva, Tahoma, sans-serif;
    /* INCLUYE EL TAMAÑO DEL BORDE EN EL VALOR DE TAMAÑO DE LA CAJA */
    box-sizing: border-box;
    font-size: 16px;
}



html, body{
    /* EVITA PROBLEMAS */
    height: 100%; 
    background-color: rgb(9, 37, 24);
}


header, section, article, aside, footer, nav{
    display: block;
}

header{
    width: 100%;
    height: 700px;
    /* The image used */
    background-image: url("../Images/main_cover.jpg");

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

div.divider{
    position: relative;
}

div.divider hr{
    width: 100%;
    height: 3px;
    border-width: 0px;
    background-color: goldenrod;
    border-radius: 100%;
}

div.divider img{
    position: absolute;
    /* Mueve el punto de pivote */
    transform: translate(-50%, -50%); 

    /* Centra la imagen con el div donde está el hr */
    top: 50%;
    left: 50%;
    
    width: 80px;
    height: auto;
}

.maincover{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

.maincover .maincover-logo{
    width: 472px;
    height: 202px;
    padding: 10px;
}

.maincover .maincover-subtitle{
    position: relative;
    margin-top: 25px;
    font-size: 19px;
    color: var(--custom-white);
    font-style: italic;
    /* Borde fuente simulada con shadow */
    text-shadow: var(--font-border);
}
.maincover .maincover-title{
    font-family: TWBOZ, Courier, monospace;
    color: var(--custom-white);
    font-size: larger;
    margin-bottom: 50px;
    font-size: 30px;
    letter-spacing: 1.5px;
    font-weight: 1;
    /* Borde fuente simulada con shadow */
    text-shadow: var(--font-border);

}

.maincover .maincover-nav{
    width: 100%;
    display: flex;
    padding: 10px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    transition: top 0.3s;
}

.maincover .maincover-nav li a{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    margin: 20px;
    color: rgba(255, 255, 255, 0.75);
    /* Borde fuente simulada con shadow */
    text-shadow: var(--font-border);

    background-color: rgba(0, 0, 0, 0.75);
    border: 2px solid rgba(218, 165, 32, 0.5);
    border-radius: 10px;
    text-decoration: none;
    font-size: 28px;
    font-family: TWBOZ, Courier, monospace;
    transition: color 0.6s, border 0.6s, gap 0.6s;
}

.maincover .maincover-nav li a:hover{
    transition-duration: 0.3s;
    gap: 20px;
    color: rgba(255, 255, 255);
    border: 2px solid rgb(218, 165, 32);
}

.maincover .maincover-nav li a img{
    width: 25px;
    height: auto;
    position: relative;
    top: -2px;
    transition: transform 0.6s;
}

.maincover .maincover-nav li a img.right{
    transform: scaleX(-1);
}

.maincover .maincover-nav li a:hover img.right{
    transition-duration: 0.3s;
    transform: scaleX(-1.5) scaleY(1.5);
}

.maincover .maincover-nav li a:hover img.left{
    transition-duration: 0.3s;
    transform: scale(1.5);
}


section{
    padding: 3em;
}

article{
    margin-bottom: 10px;
    text-align: center;
}

article h1{
    color: var(--custom-white);
    font-size: larger;
    text-shadow: var(--font-border);
}

article p{
    margin: 1em auto 3em auto;
    text-align: center;
    color: var(--custom-white);
    padding: 1em;
}

#index-section article h1{
    font-style: italic;
}

#index-section article p{
    border: 2px solid rgba(218, 165, 32, 0.8);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.075);
    max-width: 1500px;
    text-align: justify;
}

/* .card-gallery {
    width: 100%;
    height: 200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 8px;
}

.card {
    width: 30%;
    max-width: 300px;
}

.card > img{
    width: "100%";
    height: "auto";
    margin-bottom: 15px;
} */

#art-creation .card-gallery {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: center;
    gap: 40px;
}

#art-creation .card-gallery .card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 300px;
    min-width: 200px;
}

#art-creation .card-gallery .card > img{
    width: 100%;
    min-width: 200px;
    min-height: 200px;
    margin-bottom: 15px;
}

.card > img{
    width: 100%;
    min-width: 200px;
    min-height: 202px;
    margin-bottom: 15px;
}

.card .card-name{
    font-size: larger;
    color: var(--hyrule-gold);
}

.card .card-desc{

}


/* Ipad */
@media only screen and (min-width:481px) and (max-width: 768px) {

}

/* Movil */
@media only screen and (max-width: 480px) {
    
}