/*  ----
    Font 
    ----  */

/* Georgia */

@font-face {
font-family: 'GeorgiaWeb';
src: url('Fonts/georgia.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'GeorgiaWeb';
src: url('Fonts/georgiab.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'GeorgiaWeb';
src: url('Fonts/georgiai.woff2') format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
}

@font-face {
font-family: 'GeorgiaWeb';
src: url('Fonts/georgiaz.woff2') format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
}

/* --- */

@keyframes LittleMove {
0% { background-position: 0 0; }
100% { background-position: 96px 96px; } }



body{
    font-family: 'GeorgiaWeb', Georgia, 'Times New Roman', Times, serif;
    background-image: url("Tiles/TealGrey.gif");
    background-repeat: repeat;
    animation: LittleMove 2.25s linear infinite;
    }

h1 {
text-align: center;
font-size: clamp(4rem, 7.25vw + 0.75rem, 5.8rem);

margin-top: 1.5rem;
margin-bottom: 1.5rem;

text-shadow:
0px 0px 4px rgb(0, 0, 0),
0px 0px 20px rgba(255, 255, 255, 0.85);
}

.Youtube {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

row-gap: 2rem;
padding-top: 2rem;
padding-bottom: 2rem;
}

.Youtube img {
width: 400px;
height: auto;
filter: drop-shadow(0px 0px 4.5px rgba(255, 255, 255,0.75));
}

h3 {
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
}

/*  ------
    Footer 
    ------  */

footer {
background-image: url(Tiles/01.gif);

display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;

width: fit-content;

padding: 6px 7.5px 5px 8.5px; 
/* Padding tercero (abajo) repartido con el otro de footer img para centrar el texto un poquitin mas :-)))))))))) me quiero pegar un tiro y pintar las paredes */
border-radius: 15px;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}

footer span {
font-size: 1.085rem;
color: white;
text-shadow: 2.5px 2.5px 0px #0a3161;
}

footer img {
width: 65px;
height: auto;
margin-left: 6.5px;
padding-bottom: 4px;
/* Este padding de aca esta repartido */

image-rendering: auto;

filter: drop-shadow(2.5px 2.5px 4px rgb(0, 0, 0));
}

footer img:hover{
animation:
Scale-Pop 0.325s steps(2) forwards;
}

@keyframes Scale-Pop {
0% { transform: scale(1, 1); }
25% { transform: scale(4.2, 0.4); }
50% { transform: scale(0.5, 3.1); }
100% { transform: scale(1.3, 1.3); }
}