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

/* Comic Sans */

@font-face {
font-family: "Comic Sans";
src: url('/Fonts/comic.woff2') format('woff2'),
url('/Fonts/comic.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "Comic Sans";
src: url('/Fonts/comicbd.woff2') format('woff2'),
url('/Fonts/comicbd.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}

/* Body */

* {
cursor: url("/Cursor/Default.png"), default;
}

h1 {
font-family: 'GeogiaWeb', Georgia;  
text-align: center;
font-size: clamp(3.85rem, 7.25vw + 0.75rem, 5.8rem);

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

filter:
drop-shadow(0 0 2px rgba(0, 0, 0, 0.75))
drop-shadow(0 0 16px rgba(0, 0, 0, 0.45));
}

body {
margin: 0;
background-image: url("/Tiles/Gray_Wall.png");
}

/*  -----
    Items 
    -----  */

.Items {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
row-gap: clamp(1.5rem, 1.2857rem + 1.1429vw, 2rem);

}

/*  -------
    Summary 
    -------  */

details[open] > summary {
box-shadow: 0 0 26px rgba(45, 59, 215, 0.85);
}

summary {
position: relative;
display: flex;
align-items: center;
justify-content: center;

white-space: nowrap;
margin: 0 auto 0 auto; /* por las dudas */

width: clamp(10.3125rem, 5.0893rem + 27.8571vw, 22.5rem);
height: clamp(1.25rem, 0.9821rem + 1.4286vw, 1.875rem);
padding: 0.5em 2em;
border-radius: 12px;

font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-weight: bold;
font-size: clamp(1.75rem, 1.6214rem + 0.6857vw, 2.1rem);
color: rgb(245, 245, 245);

cursor: url("/Cursor/LinkSelect.png"), pointer;

background: rgba(0,0,0,0.5);
transition: box-shadow 0.25s ease; 
z-index: 0;

cursor: url("/Cursor/Red.png"), pointer;
}

summary span {
cursor: url("/Cursor/Red.png"), pointer;
}

summary::before {
border-radius: 12px;
content: "";
position: absolute;
inset: 0;
transition: opacity 0.25s ease; /* hover */
background: linear-gradient(0deg, rgba(45, 59, 215, 0.5), rgba(0, 0, 0, 0));
opacity: 0;
z-index: -1;
}

summary:hover::before {
opacity: 1;
}

h4 {
margin: 1rem clamp(1rem, 0.5714rem + 2.2857vw, 2rem) 0.25rem clamp(1rem, 0.5714rem + 2.2857vw, 2rem);
font-size: clamp(2rem, 1.7857rem + 1.1429vw, 2.5rem);
filter: drop-shadow(0 0 2.5px rgba(255, 255, 255, 0.5));
}

.TituloConImg {
display: flex;
flex-direction: row;
align-items: center;
justify-content: left;
margin: 1rem clamp(1rem, 0.5714rem + 2.2857vw, 2rem) 0px clamp(1rem, 0.5714rem + 2.2857vw, 2rem);
}

.TituloConImg h4 {
margin: 0;
}

.TituloConImg img {
margin: 0 6.5px 5px 6.5px;
width: 65px;
height: auto;
}

p {
margin: 0 clamp(1rem, 0.5714rem + 2.2857vw, 2rem) 0 clamp(1rem, 0.5714rem + 2.2857vw, 2rem); /* Up Right Down Left */
font-size: clamp(1.05rem, 1.0112rem + 0.2071vw, 1.140625rem);
filter: drop-shadow(1.5px 1.5px 1px rgb(0,0,0));
}

hr {
margin-top: 1em;
}

/*  -------
    Edicion
    -------  */

.Edicion {
font-family: sans-serif;
margin: clamp(-32px, -1.3304rem + -1.0714vw, -24.5px) 0 0 0;
width: clamp(18.75rem, 0rem + 100vw, 62.5rem);
max-height: 0;
transition: max-height 500ms ease, margin 445ms ease; /* Cerrar */
overflow: hidden;
color: white;
background-color: rgba(0, 0, 0, 0.5);
}

.Software {
text-align: center;
}

ul a {
color: rgb(105, 160, 255);
}

.Software abbr{
text-decoration: none;
}

.Imagenes {
margin: 0 0 1em 0;
}

details[open] + div.Edicion { 
max-height: 1200px; 
margin: -0.75em 0 0 0;
transition: max-height 500ms ease, margin 455ms ease;/* Abrir */
}

.Software_Row {
margin: 1em 0 0 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: clamp(15px, 0.6696rem + 1.4286vw, 25px);
}

.Software_Row img {
height: clamp(65px, 2.8571rem + 6.4286vw, 110px);
width: auto;
filter: drop-shadow(0 0 6px rgba(0,0,0,0.75));
}

/*  ---------
    Work-flow 
    ---------  */

.WorkFlow {
font-family: sans-serif;
margin: clamp(-32px, -1.3304rem + -1.0714vw, -24.5px) 0 0 0;
width: clamp(18.75rem, 0rem + 100vw, 62.5rem);
max-height: 0;
transition: max-height 500ms ease, margin 445ms ease; /* Cerrar */
overflow: hidden;
color: white;
background-color: rgba(0, 0, 0, 0.5);
}

.Twitch .TituloConImg {
flex-direction: row-reverse;
justify-content: right;
}

.Twitch {
text-align: right;
}

.Twitch a {
color: rgba(128, 65, 152);
}

.Twitch h4 {
color: rgba(194, 152, 197);
filter: drop-shadow(0 0 2.5px rgba(128, 65, 152));
}

.Aegi .TituloConImg {
flex-direction: row-reverse;
justify-content: right;
}

.Aegi {
text-align: right;
margin: 0 0 1em 0;
}

.Aegi h4 {
background: linear-gradient(to right bottom, rgba(239, 93, 93,1), rgba(159, 0, 0));

-webkit-text-fill-color: transparent;
background-clip: text;

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

details[open] + div.WorkFlow { 
max-height: 1300px; 
margin: -0.75em 0 0 0;
transition: max-height 500ms ease, margin 455ms ease;/* Abrir */
}

/*  --------------
    Videos Propios 
    --------------  */

.VideosPropios {
font-family: sans-serif;
margin: clamp(-32px, -1.3304rem + -1.0714vw, -24.5px)0 0 0;
width: clamp(18.75rem, 0rem + 100vw, 62.5rem);
max-height: 0px;
transition: max-height 500ms ease, margin 445ms ease; /* Cerrar */
overflow: hidden;
color: white;
background-color: rgba(0, 0, 0, 0.5);
}

iframe {
display: block;
margin: 1em auto -0.5em auto;

width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}

details[open] + div.VideosPropios { 
max-height: 1400px; 
margin: -0.75em 0 0 0;
transition: max-height 500ms ease, margin 455ms ease;/* Abrir */
}

/*  ------------
    Programacion 
    ------------  */

.Programacion {
font-family: sans-serif;
margin: clamp(-32px, -1.3304rem + -1.0714vw, -24.5px) 0 0 0;
width: clamp(18.75rem, 0rem + 100vw, 62.5rem);
max-height: 0;
transition: max-height 500ms ease, margin 445ms ease; /* Cerrar */
overflow: hidden;
color: white;
background-color: rgba(0, 0, 0, 0.5);

text-align: left;
}

.Programacion .TituloConImg {
flex-direction: row-reverse;
justify-content: center;
text-align: center;
}

.Programacion .TituloConImg img {
margin: 0 6.5px 10px 6.5px;
}

details[open] + div.Programacion { 
max-height: 1000px; 
margin: -0.75em 0 0 0;
transition: max-height 500ms ease, margin 455ms ease;/* Abrir */
}

/*  --------
    Contacto 
    --------  */
    
.Contacto {
background-color: rgba(0, 0, 0, 0.5);
margin-top: 0em;
width: 100%;
}

.Contacto-Titulo {  
font-size: clamp(30px, 2vw + 20px, 40px);
font-family: Georgia, Times, serif;
display: flex;
align-items: center;
justify-content: center;
text-shadow:
0 0 10px rgb(255, 255, 255);
}

.Contacto-Titulo h2 {
margin: 0;
padding-top: 15px;
padding-bottom: 0px;
}

.Contacto-Items {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(0px, calc(10vw - 30px), 70px);
font-family: "Comic Sans", sans-serif;
padding-bottom: 0px;
}

.Contacto-Items h3 {
font-size: clamp(35px, calc(2.86vw + 26.4px), 55px);
}

.Contacto-Items p {
font-size: clamp(22px, calc(1.14vw + 18.6px), 30px);
}

.Contacto-Items img {
height: clamp(100px, calc(7.14vw + 78.6px), 150px);
width: auto;
filter: drop-shadow(clamp(0.1875rem, 0.1339rem + 0.2857vw, 0.3125rem) clamp(0.1875rem, 0.1339rem + 0.2857vw, 0.3125rem) 0px rgba(0,0,0,1));
}

/* Discord */

.Discord {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
}

.Discord h3 {
margin: 0;
color: #515FF5;
-webkit-text-stroke: clamp(1px, 0.2vw, 2px) #2D3BD7;
text-shadow:
4px 4px 0px rgba(0,0,0,1),
0px 0px 10px rgba(0,0,0,1);
}

.Discord p {
margin: 0;
font-weight: bold;
color: #2D3BD7;
text-shadow:
2px 2px 0px rgba(0,0,0,1),
0px 0px 8px rgba(0,0,0,1);
filter: drop-shadow(0px 0px 0px rgb(0,0,0));
}

/* Email */

.Email {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
}

.Email :hover {
cursor: url('/Cursor/Shake.png'), pointer;
}

.Email a {
text-align:  center;
text-decoration: none;
}

.Email h3 {
margin: 0;
color: #ffffff;
-webkit-text-stroke: clamp(1px, 0.2vw, 2px) #FF0000;
text-shadow:
4px 4px 0px rgba(0,0,0,1),
0px 0px 10px rgba(0,0,0,1);
}

.Email p {
margin: 0;
font-weight: bold;
color: #ff0000;
text-shadow:
2px 2px 0px rgba(0,0,0,1),
0px 0px 8px rgba(0,0,0,1);
filter: drop-shadow(0px 0px 0px rgb(0,0,0));
}

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

footer {
display: flex;
justify-content: center;
align-items: center;

width: clamp(240px, calc(170px + 17vw), 340px);

font-family: 'GeorgiaWeb', Georgia;

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

padding: 4px 4px 4px 8.5px; 
border-radius: 12.5px;

background-color: rgba(0, 0, 0, 0.45);
filter: drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.5));

text-align: center;
font-size: clamp(1.1rem, 1.0464rem + 0.2857vw, 1.225rem);
}

footer span {
color: white;
text-shadow: 2.5px 2.5px 0px #000000;
}

footer img {
width: 70px;
height: auto;
margin-left: 6.5px;
padding-bottom: 4px;
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); }
}