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

/* Comic Sans MS - Regular */

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

/* Comic Sans MS - Bold */
@font-face {
  font-family: 'Comic Sans MS';
  src: url('fonts/comicbd.woff2') format('woff2'),
       url('fonts/comicbd.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

/* Comic Sans MS - Italic */
@font-face {
  font-family: 'Comic Sans MS';
  src: url('fonts/comici.woff2') format('woff2'),
       url('fonts/comici.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

/* Comic Sans MS - Bold Italic */
@font-face {
  font-family: 'Comic Sans MS';
  src: url('fonts/comicz.woff2') format('woff2'),
       url('fonts/comicz.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

/* --- */

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

font-family: "Trebuchet MS", Arial, sans-serif;
font-weight: 400;
font-style: normal;
}

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

  margin: auto;
  row-gap: 2vh;

  height: 125vh;
  width: 60vw;
  background-color: rgba(0, 236, 47, 0.5);

  margin-bottom: 5vh;
}
.Portfolio h3 {
  font-size: 40px;
  line-height: 1;
  margin-top: 0;
  margin-bottom: 0;
}

.Portfolio h4 {
  font-size: 25px;
  line-height: 1;
  margin-top: 0;
  margin-bottom: 0;
}

.Portfolio p {
  font-size: 15px;
  line-height: 1;
  margin-top: 0;
  margin-bottom: 0;
}

.Software {
  height: 25vh;
  width: 52.5vw;
  background-color: rgba(24, 0, 236, 0.5);
}

.Software img {
  height: 7.5vh;
  width: auto;
}

.TresD {
  height: 25vh;
  width: 52.5vw;
  background-color: rgba(236, 0, 0, 0.5)
}

.TresD img {
  height: 7.5vh;
  width: auto;
}

.Programacion {
  height: 25vh;
  width: 52.5vw;
  background-color: rgba(162, 0, 255, 0.5);
}

.Programacion img {
  height: 7.5vh;
  width: auto;
}

.Workflow {
  height: 25vh;
  width: 52.5vw;
  background-color: rgba(0, 238, 255, 0.5);
}

.Workflow img {
  height: 7.5vh;
  width: auto;
}

/*  --------
    Contacto 
    --------  */
    
.Contacto {
  background-color: rgba(0, 0, 0, 0.5);
}

.Contacto-Titulo {
  font-size: 37.5px;
  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: 20px;
  padding-bottom: 10px;
}

.Contacto-Items {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0px, calc(10vw - 30px), 70px);
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  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(5px 7.5px 0px rgba(0,0,0,1));
}

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

  /* Ver hitbox 
  background-color: rgba(0, 255, 255, 0.5);
  */
}

.Discord h3 {
  margin: 0;
  color: #515FF5;
  -webkit-text-stroke: 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);
}

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

  /* Ver hitbox 
  background-color: rgba(255, 0, 0, 0.5);
  */
}

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

.Email h3 {
  margin: 0;
  color: #ffffff;
  -webkit-text-stroke: 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);
}

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


.YoutubeMomo {
  width: auto;
  height: auto;
}