@font-face {
	font-family: 'browny';
	src: url('../font/Gistesy.ttf') format('truetype'); /* Cambia la ruta según tu archivo */
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'APPsBlack';
	src: url('../font/Simonetta-Black.ttf') format('truetype'); /* Cambia la ruta según tu archivo */
	font-weight: normal;
	font-style: normal;
}

:root {
    
    --sizzling-sunrise: hsl(51, 95%, 54%);
    --scarlet: hsl(13, 96%, 47%);
    --black: hsl(0, 0%, 0%);
    --white: hsl(0, 0%, 100%);


    --ff-browny: 'browny', Arial, sans-serif;
    --ff-apps: 'APPsBlack', Arial, sans-serif;
    --ff-saira-stencil-one: "Saira Stencil One", sans-serif;
    --ff-poppins: 'Poppins', sans-serif;
    --ff-roboto: 'Roboto', sans-serif;
    --ff-bungee: "Bungee Hairline", sans-serif;

    --fs-1: 2rem;
    --fs-2: calc(1.813rem + 1vw);
    --fs-3: calc(1.313rem + 1vw);
    --fs-4: 1.4rem;
    --fs-5: 1rem;
    --fs-6: 0.813rem;
    --fs-7: 0.75rem;

    --fw-400: 400;
    --fw-700: 700;

    --transition-1: 0.25s ease-in-out;

    --section-padding: 80px;

    --radius-4: 4px;
    --radius-12: 12px;

}

body.dark_theme {

    --bg-image: url('../fondo-fuego-6.jpg');

    --raw-seinna: hsl(206.25deg 100% 91.09%);

    --bg-primary: hsl(214.77deg 23.62% 8.33%);    
    --bg-secondary: hsl(198.75deg 96% 9.8% / 80%);
    --bg-secondary2: hsl(198.75deg 96% 9.8% / 40%);

    --color-primary: hsl(0, 0%, 100%);
    --color-secondary: hsl(0, 0%, 62%);
    --card-shadow: hsla(0, 0%, 0%, 0.4);
    --input-bg: hsl(0, 0%, 16%);

    --shadow-1: 10px 10px 40px var(--card-shadow);
}

body.light_theme {

    --bg-image: url('../fondo-fuego-2-light.jpg');
    
    --raw-seinna: hsl(206.25deg 39.2% 36.13%);

    --bg-primary: hsl(190.38deg 100% 85.06%);  
    --bg-secondary: hsl(0deg 0% 100% / 38%);
    --bg-secondary2: hsl(0deg 0% 100% / 38%);
    
    --color-primary: hsl(0, 0%, 0%);
    --color-secondary: hsl(0, 0%, 37%);
    --card-shadow: hsla(0, 0%, 0%, 0.1);
    --input-bg: hsl(0, 0%, 93%);

    --shadow-1: 10px 10px 40px var(--card-shadow);
}



*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

a,
img,
time,
span,
input,
label,
select,
button,
textarea,
ion-icon {
    display: block;
}

input,
button,
select,
textarea {
    background: none;
    border: none;
    font: inherit;
}

button,
select {
    cursor: pointer;
}

input,
textarea {
    width: 100%;
}

ion-icon {
    pointer-events: none;
}

:is(a, button, select) {
    outline-color: var(--scarlet);
    outline-offset: 3px;
}

::selection {
    background: var(--color-primary);
    color: var(--bg-primary);
}

html {
    font-family: var(--ff-roboto);
    scroll-behavior: smooth;
}

body {
    background: var(--bg-primary);
    transition: var(--transition-1);

    background-image: var(--bg-image);
    background-attachment: fixed; /* Hace que el fondo se quede fijo al hacer scroll */
    /*background-size: cover;      /* Ajusta la imagen para que cubra toda la pantalla */
    background-position: top; /* Centra la imagen en la pantalla */
    background-repeat: repeat; /* Evita que la imagen se repita */    

}

@media all and 
(max-width: 700px) and 
(min-width: 0px) {

    
}

body.active {
    overflow: hidden;
}




/*-----------------------------------*\
 * #MEDIA QUERIES
\*-----------------------------------*/

/**
 * responsive for larger than 550px screen
 */

 @media (min-width: 550px) {

    /**
     * REUSED STYLE
     */
  
    .container {
      max-width: 550px;
      margin-inline: auto;
    }
  
    .section-title { max-width: 380px; }
  
  
  
    /**
     * PROJECT
     */
  
    .project-list {
      column-count: 2;
      column-gap: 25px;
    }
  
    .project-list > li:first-child { column-span: all; }
  
  }
  
  
  
  
  
  /**
   * responsive for larger than 768px screen
   */
  
  @media (min-width: 768px) {
  
    /**
     * REUSED STYLE
     */
  
    .container { max-width: 720px; }
  
    .section-title { max-width: 430px; }
  
  
  
    /**
     * STATS
     */
  
    .stats-list { grid-template-columns: 1fr 1fr; }
  
  
  
    /**
     * ABOUT
     */
  
    .btn-group {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 20px;
    }
  
    .about .btn { max-width: max-content; }
  
    .about .btn-secondary { margin-bottom: 0; }
  
  
  
    /**
     * CONTACT
     */
  
    .contact-form {
      max-width: 450px;
      margin-inline: auto;
    }
  
  }
  
  
  
  
  
  /**
   * responsive for larger than 992px screen
   */
  
  @media (min-width: 992px) {
  
    /**
     * CUSTOM PROPERTY
     */
  
    :root {
  
      /**
       * typography
       */
  
      --fs-2: 3rem;
  
      /**
       * spacing
       */
  
      --section-padding: 100px;
  
    }
  
  
  
    /**
     * REUSED STYLE
     */
  
    .container { max-width: 980px; }
  
    .section-content {
      position: relative;
      padding-left: 40px;
    }
  
    .section-subtitle {
      position: absolute;
      top: 0;
      left: 0;
      transform: rotate(0.75turn) translateX(-100%);
      transform-origin: left top;
      margin-bottom: 0;
    }
  
    .section-subtitle::after {
      top: 8px;
      left: auto;
      right: calc(100% + 20px);
    }
  
  
  
    /**
     * HEADER
     */
  
    .header { padding-block: 30px; }
  
    .header.active { padding-block: 15px; }
  
    .navbar-actions {
      order: 1;
      margin-left: 0;
    }
  
    .nav-toggle-btn { display: none; }
  
    .navbar { all: unset; }
  
    .navbar-link {
      transform: translateY(0);
      font-size: unset;
      padding-inline: 5px;
    }
  
    .navbar-list > li {
      margin: 0;
      padding: 0;
      overflow: visible;
    }
  
    .navbar-list {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
    }
  
    .navbar-link::before { height: 2px; }
  
  
  
    /**
     * HERO
     */
  
    .hero {
      position: relative;
      padding-top: 0;
      height: 100vh;
    }
  
    .hero-banner {
      max-width: unset;
      height: 100%;
      margin-bottom: 0;
    }
  
    .hero img {
      height: 100%;
      width: auto;
      margin-inline: auto;
    }
  
    .hero-content {
      --color-primary: var(--white);
  
      position: absolute;
      top: 50%;
      filter: drop-shadow(2px 4px 10px var(--black));
    }
  
    .hero .btn-primary:is(:hover, :focus) { color: hsl(0, 0%, 12%); }
  
    .hero-social-list {
      display: block;
      position: absolute;
      bottom: 92px;
      left: -30px;
    }
  
    .hero-social-list::after {
      content: "";
      position: absolute;
      bottom: -40px;
      left: 13px;
      width: 2px;
      height: 30px;
      background: var(--color-secondary);
    }
  
    .hero-social-link {
      position: relative;
      color: var(--color-secondary);
      margin-block: 5px;
      padding: 5px;
      font-size: 18px;
      transition: var(--transition-1);
    }
  
    .hero-social-link:is(:hover, :focus) { color: var(--color-primary); }
  
    .hero-social-link .tooltip {
      --trans-x: 10px;
  
      left: calc(100% + 10px);
      top: 50%;
      transform: translateY(-50%) translateX(var(--trans-x));
    }
  
    .hero-social-link:is(:hover, :focus) .tooltip {
      --trans-x: 0;
      opacity: 1;
    }
  
    .scroll-down {
      display: block;
      position: absolute;
      bottom: 80px;
      right: -30px;
      color: var(--color-secondary);
      font-size: 1.125rem;
      text-transform: uppercase;
      transform: rotate(90deg);
      transform-origin: top right;
    }
  
    .scroll-down::after {
      content: "";
      position: absolute;
      top: 8px;
      right: -50px;
      width: 30px;
      height: 2px;
      background: var(--color-secondary);
    }
  
  
  
    /**
     * STATS
     */
  
    .stats-list { grid-template-columns: repeat(3, 1fr); }
  
    .stats-card { height: 100%; }
  
  
  
  
    /**
     * ABOUT
     */
  
    .about {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 30px;
    }
  
    .about-banner { margin-bottom: 0; }
  
  
  
  
    /**
     * SKILLS
     */
  
    .skills {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 50px;
    }
  
    .skills-content { margin-bottom: 0; }
  
    .skills-toggle { margin-inline: 0; }
  
  
  
    /**
     * PROJECT
     */
  
    .project-list { column-count: 3; }
  
    .project-list > li:first-child {
      column-span: unset;
      margin: 25px;
      margin-left: 0;
    }
  
  
  
    /**
     * CONTACT
     */
  
    .contact {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
    }
  
    .contact-content { margin-bottom: 0; }
  
    .contact-form { width: 100%; }
  
    .contact-list { margin-left: -40px; }
  
  
  
    /**
     * FOOTER
     */
  
    .footer .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  
    .footer .logo { margin-bottom: 0; }
  
  }
  
  
  
  
  
  /**
   * responsive for larger than 1200px screen
   */
  
  @media (min-width: 1200px) {
  
    /**
     * REUSED STYLE
     */
  
    .container { max-width: 1150px; }
  
    .section-title { max-width: 460px; }
  
  
  
  
    /**
     * HERO
     */
  
    .hero-social-list { left: -80px; }
  
    .scroll-down { right: -80px; }
  
  
  
  
    /**
     * ABOUT
     */
  
    .about-banner { max-width: 450px; }
  
  }