/*  ----
    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;
}

/* Franklin */

@font-face {
font-family: 'Frank-Goth-Med-Web';
src: url('Fonts/framd.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Frank-Goth-Med-Web';
src: url('Fonts/framdit.woff2') format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
}

/* --- */

body {
font-family: 'GeorgiaWeb', Georgia, 'Times New Roman', Times, serif;
margin: 0; 
background-image: url(Tiles/transparent.png);
}

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 rgba(0, 0, 0, 1),
0px 0px 50px rgba(0, 0, 0, 0.8);
}

.Carrusel {
position: absolute;
bottom: 0%;
width: 100%;
overflow: hidden;
filter: drop-shadow(0px 0px 8px rgb(0,0,0));
}

.Carrusel_Pista {
display: inline-flex;
animation: scroll 100s linear infinite;
margin-bottom: 30px;
border-top: 10px solid #000000;
border-bottom: 10px solid #000000;
will-change: translate3d(0,0,0);
}

.Carrusel img {
width: 150px;
height: auto;
padding: 0 0px 0 0px;
}

@keyframes scroll {
  0% { transform: translateX(0%);}
  100% { transform: translateX(-50%);}
}

details {
width: 90%;
border: 2px solid #ffffff;
background-color: rgba(255, 255, 255,0.985);
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
background-color: rgba(63, 70, 153, 0.85);
border-radius: 0px;
backdrop-filter: blur(1.5px);

}

.Item {
  text-align: center;
  width: fit-content;
  margin: 0 auto 1rem;
}
summary:hover {
color: #0400ff;
}

summary {
  font-size: 17.5px;
border-radius: 10px;
padding: 10px 10px 10px 10px;
background-color: rgb(255, 255, 255);
font-family: 'Frank-Goth-Med-Web', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

hr {
  color: #ffffff;
  height: 5px;
  background-color: white;
  border-radius: 8px;
}

p {
font-size: 1.05rem;
text-align: left;
filter: drop-shadow(0.5px 0.5px 1px rgba(0,0,0,0.6));
}

details img {
border-radius: 10px;
width: 305px;
height: auto;
filter: drop-shadow(4px 4px 8px rgba(0,0,0,1));
}

/*  ------
    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;
}

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); }
}