/* ------------------------
JasRockr CSS Root Default
  ---------->>
  01. Inicializacion Root
    Paleta de colores
    Fuentes
  02. Box Sizing
  03. Body Init
  04. Globals
  <<----------
------------------------ */
/** 01. Inicializacion **/
* 
{
  margin: 0;
  padding: 0;
}

:root 
{
  /* Paleta de colores */
  --white: #FFFFFF;
  --whiteClarity: rgba(255, 255, 255, .6);
  --black: rgba(0, 0, 0, 0);
  --blackClarity: rgba(0, 0, 0, 0.55);
  --primary: rgba(255, 0, 0, .6);
  --secondary: rgba(128, 255, 128, 0.8);
  /* --gradientBG: radial-gradient(#000000, #ff0000); */
  --bg: rgba(0, 0, 0, 1);
  --shadow: 
      0 0 1ex rgb(255, 82, 51),
      0 0 .2rem rgba(255, 255, 255, 0.8);
  --shadowBlack: 
  0 0 1ex rgb(26, 0, 0),
  0 0 .2rem rgba(255, 255, 255, 0.1);
  --shadowRed: 
  0 0 1ex rgba(255, 51, 51, 51),
  0 0 .2rem rgba(255, 255, 255, 0.8);

  /* Fuentes */
  --font1: 'Zeyada', monospace;
  --font2: 'Prompt', monospace;
  --font3: 'Baloo Thambi 2', monospace;

}
 
/** 02. Box Sizing **/
html 
{
  box-sizing: border-box;
  font-size: 62.5%; /* 1rem = 10px */
}
*,*:before,*:after 
{
  box-sizing: inherit;
}

/** 03. Inicializacion Body **/
body 
{
  background-color: var(--blackClarity);
  font-family: var(--font2);
}

/* ------------------------
          Styles
  -------------------->> */

/** Body **/
body 
{
  /* General */
  min-height: 100vh;
  font-size: 3.5rem;
  color: var(--primary);
  text-shadow: var(--shadow);
  
  /* Backgroud */
  /* background-color: var(--black);
  background-image: var(--bg), url("https://media.giphy.com/media/oEI9uBYSzLpBK/giphy.gif");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed; */

  /* Flexbox */
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: space-between;
  align-content: center;
}

/** Background Signal **/
.noise 
{
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  flex-basis: 100%;
  height: 100%;
  background-image: url("https://media.giphy.com/media/oEI9uBYSzLpBK/giphy.gif");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -5;
  opacity: .02;
}

.overlay 
{
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  flex-basis: 100%;
  height: 100%;
  background:
      repeating-linear-gradient(
      180deg,
      var(--black) 0,
      var(--blackClarity) 50%,
      var(--black) 100%);
  background-size: auto .3rem;
  z-index: -4;
}

.overlay::before 
{
  content: "";
  pointer-events: none;
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  flex-basis: 100%;
  height: 100%;
  background-image: linear-gradient(
      0deg,
      transparent 0%,
      rgba(97, 33, 33, 0.13) 2%,
      rgba(112, 0, 0, 0.493) 3%,
      rgba(97, 33, 33, 0.13) 3%,
      transparent 100%);
  background-repeat: no-repeat;
  animation: scan 7.5s linear 0s infinite;
}

@keyframes scan 
{
  0%        { background-position: 0 -100vh; }
  35%, 100% { background-position: 0 100vh; }
}


/** Header **/

.head 
{
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  
}

.head .title
{
  align-self: center;
  font-family:  var(--font1);
  font-size: 12rem;
  padding: 10rem 0 0;
}

@media (max-width: 1024px ) 
{
  .head .title
  {
    font-size: 9rem;
  } 
}

@media (max-width: 520px ) 
{
  .head .title
  {
    font-size: 5rem;
  } 
}

.head .title a
{
  text-decoration: none;
  color: var(--white);
  text-shadow: var(--shadowBlack);  
}

.head .title a:hover
{
  color: var(--primary);
  text-shadow: var(--shadowRed);
}

.head .subtitle
{
  align-self: center;
  font-family:  var(--font2);
  font-size: 5rem;
}

@media (max-width: 1024px ) 
{
  .head .subtitle
  {
    font-size: 3.5rem;
  } 
}

@media (max-width: 520px ) 
{
  .output p
  {
    font-size: 1.8rem;
  }
}

.highlighted 
{
  color: var(--white);
}

/* .profile {
  border-radius: 50%;
  fle: 18rem;
  box-shadow: 0 1rem 2rem .5rem rgba(0,0,0,.5);
  
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
} */



/** Container CLI **/
.cli 
{
  position: relative;
  flex-basis: 100%;
  height: auto;
  padding: 1.5rem 10%;
  text-transform: uppercase;
  line-height: 3rem;

  /* Flexbox */
  display: flex;
  flex-wrap: nowrap;
  align-self: center;
}

.output-content
{
  padding: 4rem;
}

.output p
{
  color: var(--white);
  text-shadow: var(--shadowBlack);
  text-align: justify;
  font-size: 1.8rem;
}

.output p::before 
{
  content: "\2023";
}

@media (max-width: 1024px ) 
{
  .output p
  {
    font-size: 1.4rem;
  }
}

@media (min-width: 2048px ) 
{
  .output p
  {
    padding: 0 30%;
    align-self: center;
  }
}

@media (max-width: 520px ) 
{
  .output p
  {
    line-height: 2.3rem;
    font-size: 1.2rem;
  }
}

.contact a
{
  text-decoration: none;
  color: var(--white);
  text-shadow: none;
  font-size: 6rem;
  padding: 0 2.5rem;
}

.contact a:hover
{
  color: var(--primary);
  text-shadow: var(--shadowRed);
}


@media (max-width: 1024px ) 
{
  .contact a
  {
    font-size: 3rem;
    padding: 0 1rem;
  }
}

@media (max-width: 520px ) 
{
  .contact a
  {
    font-size: 2rem;
    padding:  0 .5rem;
  }
}

.skills
{
  display: flex;
  flex-direction: row;
  justify-content: center;

  padding-top: 4rem;
}

.skills i
{
  /* text-decoration: none; */
  color: var(--white);
  text-shadow: none;
  font-size: 6rem;
  padding: 0 2.5rem;
}

.skills i:hover
{
  color: var(--secondary);
  text-shadow: var(--shadowBlack);
}

/* Color  Hover Skills*/
.skills .fa-html5:hover
{
  color: #F16529; 
}

.skills .fa-css3-alt:hover
{
  color: #409AD6; 
}

.skills .fa-js:hover
{
  color: #F6DD1C; 
}

.skills .fa-git-alt:hover
{
  color: #F34F29; 
}

.skills .fa-terminal:hover
{
  color: #000000; 
}

.skills .fa-database:hover
{
  color: #E31C25; 
}

.skills .fa-php:hover
{
  color: #6D73D1; 
}

.skills .fa-node-js:hover
{
  color: #2EA452; 
}

.skills .fa-python:hover
{
  color: #3673A6; 
}

@media (max-width: 1024px ) 
{
  .skills i
  {
    font-size: 3rem;
    padding: 0 1rem;
  }
}

@media (max-width: 520px ) 
{
  .skills i
  {
    font-size: 2rem;
    padding:  0 .5rem;
  }
}

/** Footer **/

.nav
{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  
  font-family: var(--font3);
  font-size: 2.5rem; 
  /* padding: 5rem 10%; */

}

@media (max-width: 1024px ) 
{
  .nav
  {
    font-size: 2rem;
    flex-flow: column;
    align-items: center;
    /* padding: 5rem 10%; */
  }
  
}

.nav a 
{
  color: var(--white);
  text-shadow: var(--shadowBlack);
  text-decoration: none;
  padding: .4rem 1.4rem .6rem;
}

.nav a:hover
{
  color: var(--primary);
  text-shadow: var(--shadowRed);
}

.nav a:hover::before {
  content: "[";
}

.nav a:hover::after {
  content: "]";
}


.bullet
{
  color: var(--blackClarity);
  padding: 0rem 3rem;
}

@media (max-width: 1024px ) 
{
  .bullet
  {
    /* visibility:hidden; */
    display: none;
  }
  
}


/** Footer **/
footer 
{
  flex-basis: 100%;
}

/* Copyright */
.copyright {
  flex-basis: 100%;
  border-top: .1rem dashed var(--primary);
  background-color: var(--blackClarity);
  color: var(--white);
  text-align: center;
  font-size: 1.2rem;
  padding: 1rem 0;
/*
  background-image: url("/img/bg_footer.png") ;

  background-repeat: no-repeat;
  background-size: cover;
  opacity: .8;
  */
}

.creditos-theme
{
  font-size: 1rem;
}

.creditos-theme a
{
  color: var(--white);
  text-shadow: var(--shadowRed);
  text-decoration: none;
}

/*
@media (max-width: 998px) 
{
  footer 
  {
    padding: 4rem;
  }
}
*/