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

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

/*  --------------
    Wrapper & Tags
    --------------  */

* {
box-sizing: border-box;
}

body{
margin: 0;
font-family: 'GeorgiaWeb', Georgia, 'Times New Roman', Times, serif;

background-image: url(Windows_XP_Black_&_White.png);
background-repeat: no-repeat;
/* No Repetir */
background-size: cover;
/* Extender al lenght de la window */
background-attachment: fixed;
/* Se adapte a la ventana, si no queda largo por la altura de el contenido en pagina que matchea automaticamente la length */
}

.Page_Wrapper {
max-width: 1920px;
/* Clavar todo a 1920px para que no escale una MIERDA, al repedo hacer otra cosa */
margin: 0 auto 0; 
position: relative;
}

a img {
display: block;
}

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

margin-top: 1.15rem;
margin-bottom: 1.15rem;

text-shadow: 0 0 8px #272727, 0 0 14px #272727;
}

h3 {
font-weight: bold;
font-size: 1.38rem;
}

p {
font-size: 1.025rem;
}

/*  ---------------
    Banners Columna 
    ---------------  */

.Banners_Column {
display: flex;
flex-direction: column;
position: absolute;

left: clamp(0px, calc(23.529vw - 391.76px), 60px);

row-gap: 0px;
font-size: 1.65rem;
color: rgb(255, 255, 255);

padding: 10.2px;
padding-right: 10px;
background-color: rgba(0, 0, 0, 0.45);
filter: drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.5));
}

.Banners_Column img {  
display: block;
width: clamp(278.2px, -465.4074px + 49.8563vw, 365px);
height: auto;
}

.Banners_Column img:hover {
box-shadow: 0px 0px 12px rgb(255, 255, 255);
filter: brightness(0.6);
}

@media (max-width: 1489px) {
.Banners_Column {
display: none !important;
} }

/*  --------
    Stickers 
    --------  */

/* Portfolio */

.Portfolio {
position: absolute;
width: fit-content;
z-index: 1;

top: 157.5px;
left: clamp(702.5px, 58.2vw + 123.41px, 1241px);
}

.Portfolio img {
display: block;
width: clamp(260px, 5.95vw + 200.85px, 315px);
height: auto;
filter: drop-shadow(0px 0px 18px rgba(0, 0, 0, 0.85));
}

.Portfolio span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

padding-left: 3px;
padding-right: 3px;
font-size: clamp(29.6px, calc(0.6919vw + 22.715px), 36px);
color: white;
background-color: black;
}

.Portfolio a:hover span {
color: rgb(82, 18, 185);
font-style: italic;
}

.Portfolio a:hover img {
filter: drop-shadow(0px 0px 14px rgba(255, 255, 255, 0.5));
}

/* Guestbook */

.Guestbook {
position: absolute;
width: fit-content;
z-index: 1;

top: 478px;
left: clamp(761.5px, calc(58.75675vw + 177.31px), 1305px);
}

.Guestbook img {
display: block;
width: clamp(212.5px, calc(6.75676vw + 145.305px), 275px);
height: auto;
filter: drop-shadow(0px 0px 10px rgb(0, 13, 100));
}

.Guestbook span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

font-size: clamp(16.8px, calc(0.51892vw + 11.636px), 21.6px);
color: rgb(120, 255, 210);
background-color: rgba(0, 15, 60, 0.9);
padding-left: 17.5px;
padding-right: 17.5px;
}

.Guestbook a:hover span {
color: rgba(0, 15, 60, 0.75);
font-style: italic;
background-color: rgb(120, 255, 210);
}

.Guestbook a:hover img {
filter: drop-shadow(0px 0px 20px rgb(175, 175, 175));
}

/* Panel */

.Panel {
position: absolute;
width: fit-content;
z-index: 1;

top: 740px;
left: clamp(757px, calc(54.1vw + 219.2px), 1257.5px)
}

.Panel img {
display: block;
width: clamp(201.5px, calc(6.162vw + 140.17px), 258.5px)    ;
height: auto;
filter: drop-shadow(0px 0px 7.5px rgba(255, 0, 0, 0.75));
}

.Panel span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

font-size: clamp(25.28px, calc(0.5097vw + 20.215px), 30px);
color: rgb(255, 255, 255);
background-color: rgba(0,0,0,0.8);
padding-left: 3.5px;
padding-right: 3.5px;
filter:
drop-shadow(0px 0px 7.5px rgba(0, 255, 235, 0.75));
}

.Panel a:hover span {
font-style: italic;
filter: drop-shadow(0px 0px 7.5px rgba(255, 0, 0, 0.75));
}

.Panel a:hover img {
filter:
drop-shadow(0px 0px 7.5px rgba(0, 255, 235, 0.75));
}

@media (max-width: 994px) {
.Portfolio, .Guestbook, .Panel {
display: none;
} }

/*  ----
    Main 
    ----  */

.Main{
display: flex;
flex-direction: column;

margin: 0 auto;

justify-content: center;
align-items: flex-start;

padding-top: clamp(0.875rem, 1.1vw, 1rem);
padding-bottom: clamp(0.875rem, 1.1vw, 1rem);
row-gap: clamp(0.3rem, 1vw, 0.925rem);

height: auto;
width: min(90%, 895px);
background-color: rgba(0, 0, 0, 0.45);
filter: drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.5));
}

/* .Hola .Pagina y .About */

.Hola, .Edicion, .Pagina, .Assets, .About {
margin-left: 0.8rem;
}

.Hola, .Pagina, .About {
text-align: justify;
line-height: 6.5px;

padding: 8px;
border: 4px solid rgba(0,0,0,1);
background-color: rgba(200, 200, 200, 0.5);
}

.Hola h3, .Pagina h3, .About h3 {
text-shadow:
0 0 5px rgba(255, 255, 255, 0.9),
0 0 10px rgba(255, 255, 255, 0.7),
0 0 20px rgba(255, 255, 255, 0.5),
0 0 35px rgba(255, 255, 255, 0.4);
}

.Pagina span {
text-decoration: none;
color: rgb(13, 255, 174);
}

.About abbr {
text-decoration: none;
}

.About a {
text-decoration: none;
color: #ff0000;
}

.Pagina a {
text-decoration: none;
}

.About span {
color: #2D3BD7;
}

/* .Edicion y .Assets */

.Edicion, .Assets {
text-align: justify;
line-height: 6.5px;

padding: 8px;
}

.Edicion {
border: 6.5px ridge rgba(153, 153, 255,0.6);
border-radius: 8px;
background: rgb(0, 0, 91, 0.4);

color: rgba(230, 230, 230, 0.9);
}

.Assets{
padding: 8px;
border: 6.5px ridge rgba(185, 0, 0, 0.85);
border-radius: 8px;
background: rgba(255, 255, 255, 0.65);
}

.Edicion h3 {
color: rgba(250, 250, 250, 0.85);
text-shadow:
0 0 14px rgb(140, 0, 255),
0 0 8px rgb(0, 0, 0);
}

.Assets h3 {
color: rgb(0, 220, 250);
text-shadow:
0 0 10px rgb(0, 0, 0,0.9),
0 0 16px rgb(0, 220, 250,0.75),
0 0 18px rgb(0, 220, 250,0.75);
}

.Edicion span {
color: rgba(60, 255, 0, 0.9);
text-shadow:
0 0 14px rgba(140, 0, 255, 0.8),
0 0 8px rgba(255, 255, 255, 0.8);
}

.Edicion a {
color: rgba(255, 255, 255, 0.9)
}

.Assets a {
color: rgb(0, 0, 0);
}

/* Media Query */

@media (max-width: 799px) {
.Hola, .Edicion, .Pagina, .Assets, .About {
margin-left: 0px;
}
.Hola, .Pagina, .About {
hyphens: auto;
text-align: left;
line-height: 1rem;

border: clamp(2px, 0.456vw + 0.36px, 4px) solid rgba(0,0,0,1);
padding: clamp(3px, 0.684vw + 0.54px, 6px);
margin: clamp(0px, -0.797vw + 6.37px, 3.5px);

}
.Edicion, .Assets {
hyphens: auto;
text-align: left;
line-height: 1rem;
padding: clamp(3px, 0.684vw + 0.54px, 6px);
margin: clamp(0px, -0.797vw + 6.37px, 3.5px)
}
.Edicion {
border: clamp(3px, 0.456vw + 0.36px, 4px) ridge rgba(153, 153, 255,0.6);
}
.Assets {
border: clamp(3px, 0.456vw + 0.36px, 4px) ridge rgba(185, 0, 0, 0.85);
}
.Main { align-items: center; }

h3 {
font-size: clamp(1rem, 1.039vw + 0.766rem, 1.285rem); 
margin-top: 0.7rem;
margin-bottom: 0.7rem;
}

p {
font-size: clamp(0.745rem, 0.820vw + 0.561rem, 0.97rem);
margin-top: -0.175rem;
margin-bottom: 0.5rem;
}
}

/*  ----------------
    Sticker Apilados 
    ----------------  */

.Stickers_Wall {
display: none;
margin-top: 2.25rem;
}

/* Portfolio */

.Portfolio2 {
position: relative;
width: fit-content;
margin: 0 auto;
}

.Portfolio2 img {
display: block;
width: 315px;
height: auto;
filter: drop-shadow(0px 0px 18px rgba(0, 0, 0, 0.85));
}

.Portfolio2 span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

padding-left: 3px;
padding-right: 3px;
font-size: 36px;
color: white;
background-color: black;
}

.Portfolio2 a:hover span {
color: rgb(82, 18, 185);
font-style: italic;
}

.Portfolio2 a:hover img {
filter: drop-shadow(0px 0px 14px rgba(255, 255, 255, 0.5));
}

/* Guestbook */

.Guestbook2 {
position: relative;
width: fit-content;
margin: 0 auto;
}

.Guestbook2 img {
display: block;
width: 275px;
height: auto;
filter: drop-shadow(0px 0px 10px rgb(0, 13, 100));
}

.Guestbook2 span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

font-size: 21.6px;
color: rgb(120, 255, 210);
background-color: rgba(0, 15, 60, 0.9);
padding-left: 17.5px;
padding-right: 17.5px;
}

.Guestbook2 a:hover span {
color: rgba(0, 15, 60, 0.75);
font-style: italic;
background-color: rgb(120, 255, 210);
}

.Guestbook2 a:hover img {
filter: drop-shadow(0px 0px 20px rgb(175, 175, 175));
}

/* Panel */

.Panel2 {
position: relative;
width: fit-content;
margin: 0 auto;
}

.Panel2 img {
display: block;
width: 250px;
height: auto;
filter: drop-shadow(0px 0px 7.5px rgba(255, 0, 0, 0.75));
}

.Panel2 span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

font-size: 26px;
color: rgb(255, 255, 255);
background-color: rgba(0,0,0,0.8);
padding-left: 3.5px;
padding-right: 3.5px;
filter:
drop-shadow(0px 0px 7.5px rgba(0, 255, 235, 0.75));
}

.Panel2 a:hover span {
font-style: italic;
filter: drop-shadow(0px 0px 7.5px rgba(255, 0, 0, 0.75));
}

.Panel2 a:hover img {
filter:
drop-shadow(0px 0px 7.5px rgba(0, 255, 235, 0.75));
}

@media (max-width: 994px) {
.Stickers_Wall { display: block}
}

/*  -------------
    Banner Blocks 
    -------------  */

.Banners_Blocks{
display: none;
width: fit-content;
margin: 0 auto;

background-color: rgba(0, 0, 0, 0.5);
filter: drop-shadow(0px 0px 40px rgba(0, 0, 0, 0.6));

margin-top: 2.25rem;
}

.Text {
display: flex;
align-items: center;
justify-content: center;

margin: 0 auto;
padding-top: clamp(4px, calc(1.206vw + 0.504px), 12.5px);

font-size: clamp(16.8px, calc(1.587vw + 12.197px), 28px);
color: rgb(255, 255, 255);
}

.Blocks {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2 columnas */
grid-auto-rows: auto;
width: fit-content;

padding: clamp(4px, calc(1.206vw + 0.504px), 12.5px);
row-gap: clamp(4px, calc(1.206vw + 0.504px), 12.5px);
}

.Banners_Blocks img {
width: clamp(141px, calc(42.553vw + 11.597px), 435px);
height: auto; 
}

.Banners_Blocks img:hover {
box-shadow: 0px 0px 12px rgb(255, 255, 255);
filter: brightness(0.6);
}

@media (max-width: 1489px) {
.Banners_Blocks {
display: block;
} }

/*  ----
    Blog 
    ----  */

.Blog {
display: flex;
justify-content: center;
width: fit-content;
margin: 0 auto;

margin-top: 2rem;
margin-bottom: 2rem;

filter:
drop-shadow(0px 0px 4px rgba(0,0,0,1))
drop-shadow(0px 0px 16px rgba(0,0,0,1));
}

.Blog img {
width: clamp(270px, calc(25vw + 175px), 642.5px);
height: auto;
}

.Blog img:hover {
animation: girar 0.275s ease forwards;
}

.Blog img:not(:hover) {
animation: volver 0.275s ease forwards;
}


@keyframes girar {
0% { transform: rotate(0deg); }
100% { transform: rotate(-3deg); }
}

@keyframes volver {
0% { transform: rotate(-3deg); }
100% { transform: rotate(0deg); }
}

/*  -------
    Botones 
    -------  */

.Botones {
display: flex;
flex-wrap: wrap;
justify-content: center;

margin: 0 auto;
width: 895px;
background-color: rgba(0, 0, 0, 0.55);
filter: drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.65));
padding-bottom: 6.5px;
}

.OtrasPaginas {
display: flex;           
flex-wrap: wrap;         
justify-content: center;

margin: 0 auto;       
width: 895px;        
background-color: rgba(0, 0, 0, 0.55);
filter: drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.65));
padding-bottom: 12px;
margin-bottom: 2.25rem;
}

.Botones p {
font-size: 19.5px;
width: 100%;
text-align: center;
font-weight: bold;
color: white;
}

.OtrasPaginas p {
font-size: 19.5px;
width: 100%;             
text-align: center;      
font-weight: bold;   
color: white;            
}

.Botones img {
height: 31px;
width: auto;
image-rendering: pixelated;
/* Para mantener el estilo pixelado con el zoom, si no creo que se pasa a Bicubico */
}

.OtrasPaginas img {
width: auto;
height: 31px;
image-rendering: pixelated;

margin-left: 10px;
margin-right: 10px;
}

.Botones img:hover {
animation:
Scale-Pop-Button 0.35s steps(2) forwards;
}

.OtrasPaginas img:hover {
animation:
Scale-Pop-Button 0.35s steps(2) forwards;
}

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

@media (max-width: 994px) {
.Botones, .OtrasPaginas, footer { display: none !important; }
}

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

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

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

width: fit-content;
margin-bottom: 2rem;

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

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(3.8, 0.4); }
50% { transform: scale(0.5, 3.25); }
100% { transform: scale(1.3, 1.3); }
}