/* CLASES 
IMAGEN (PNG WEBP): .portada (NOTICIAS), .obra (GALERIA) 
GRID (ESTRUCTURA): .grid (2 columna), .gris (1 columna), 
.gal (4 columnas), .column1, .column 2
REAJUSTES TEXTO: .borde .textoG .texto
CABEZERAS: (ARTICULO: .cab)(SECCION: .titulo)

*/

@font-face {
  font-family: 'VT323';
  src: url(fonts/VT323-Regular.ttf);
}


body{
    background: rgb(169, 153, 163);
    background-image: url('backgrounds/my-little-plaid.png');
    overflow-x: hidden;
    font-family: 'VT323';
}

h1{
    text-wrap: nowrap;
    overflow-x: hidden;
    border: double 4px black;
    padding-left: 60px;
    background: gainsboro;
}

/* MENU */

li{
    display: inline;
    padding: 15px;
    border: solid 1px;

    background: gainsboro;
}

li:hover{
    color: rgba(255, 0, 0, 0.461);
    text-decoration:underline ;
    border: dotted 1px;
}


/* FIN DE MENU */

article{
    border: solid 3px black;
    background: rgb(206, 206, 193);
    margin: 50px;
    padding-bottom: 20px;
}

/* RESOLUCION IMAGENES */
/*PORTADA ES LA IMAGEN DE LA NOTICIA */

.portada{
    width: 256px;
    border: 1px solid black;
}

/*OBRA SON LOS DIBUJOS DE LA GALERIA */

a{
    display: contents;
}

.card{
    width: 95%;
    height: auto;
    justify-self: center;
    margin-bottom: 20px;
    height: auto;
    border: 4px double olive;
    border-radius: 12px;
    background: white;
    overflow-y: hidden;
    box-shadow: 10px 10px 10px rgba(2, 2, 2, 0.2);
}

.info{
    display: flex;
    flex-shrink: 0;
    justify-content: end;
    background: rgb(216, 213, 199);
    border: 5px solid white;
    border-radius: 12px;
}

#name{
    flex-grow: 6;
    text-align: center;
}

button{
    flex-grow: 1;
    border-radius: 8px;
}

.obra{
    width: 100%;
    height: auto;
    
}



.obra:hover{
    animation: brincar 0.4s ease-out;
}

@keyframes brincar {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-30px); }
  60%  { transform: translateY(0); }
  80%  { transform: translateY(-15px); }
  100% { transform: translateY(0); }
}


/* FIN DE RESOLUCION DE IMAGENES */

/* ESTRUCTURA GRID */

.grid{
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto;
}

.gris{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}

.gal{
    display: grid;
    width: 100%;
    height: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    padding-bottom: 30px;
    padding-right: 1vw;
    
}
            
.column1{
    grid-column: 1;
}

.column2{
    display: flex;
    flex-direction: column;
    grid-column: 2;
     justify-content: center;
     align-items: center;


     padding: 10px;

}

/* FIN GRID */

.border{
    padding-left: 4vw;
}

/* TITULO DE CADA SECCION */

.titulo{
    border-top: 3px double black;
    border-bottom: 3px double white;
    background: lightgray;
    overflow: auto;
    margin-bottom: 20px;
}

/*-------------------*/

/* MEDIDAS DE TEXTO */
.textoG{
    font-size: 46px;
    color: rgb(54, 9, 75);
    
}

.texto{
    font-size: 26px;
    color: rgb(50, 49, 86);
}

.textoP{
    font-size: 20px;
}

/* CABEZAL DE CADA ARTICULO */

.cab{
    padding-left: 20px;
    background-image: url('backgrounds/nice-snow.png');

    overflow: auto;
}

/*--------------------------*/

footer{
    text-align: end;
}

figcaption{
    margin-bottom: 20px;
}

/* MOVILES */

@media (max-width: 724px) {

    h1{
        padding-left: 10px;
    }

    .textoG{
        font-size: 8vw;
    }

    .texto{
        font-size: 4.2vw;
    }

    .textoP{
        font-size: 3vw;
    }

    .grid{
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .gal{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    article{
        margin-left: 0;
        margin-right: 0;
    }
   
    .portada{
        width: 30vw;
    }

    figcaption{
        font-size: 1px;
    }
}