@charset "UTF-8";

/*
Theme Name: JALE 2026
Theme URI: https://luizjal.es
Author: Luiz Jales
Author URI: luizjal.es/
Description: Tema desenvolvido para portfolio
Version: 4.0
Text Domain: luizjales
*/


@keyframes slideUp {
  0% {
    transform: translateY(15px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes slideUp-load {
  0% {
    transform: translateY(-25px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}


@keyframes slideLeft-load-1 {
  0% {
    opacity: 0;
    transform: translateX(15px);
  }
  15% {
    opacity: 0;
    font-variation-settings: "wght" 600;
    transform: translateX(15px);
  }
  75% {
    transform: translateX(15px);
    opacity: 1;
    font-variation-settings: "wght" 800;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
    font-variation-settings: "wght" 400;
  }
}

@keyframes slideLeft-load-2 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
    font-variation-settings: "wght" 600;
    transform: translateX(15px);
  }
  75% {
    transform: translateX(15px);
    opacity: 1;
    font-variation-settings: "wght" 800;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
    font-variation-settings: "wght" 400;
  }
}

@keyframes slideLeft-load-3 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
    font-variation-settings: "wght" 600;
    transform: translateX(15px);
  }
  75% {
    transform: translateX(15px);
    opacity: 1;
    font-variation-settings: "wght" 900;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
    font-variation-settings: "wght" 400;
  }
}


@media (min-width: 768px) {
#i-1 {
  animation: slideLeft-load-1 2.6s ease-out;
}
#i-2 {
  animation: slideLeft-load-2 3s ease-out;
}
#i-3 {
  animation: slideLeft-load-3 3.2s ease-out;
}
}


/* ----------------- */
/* ---- GERAIS  ---- */

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  line-height: 1.6;
  transition: 1.25s;
}

:root {
  --branco: rgb(250, 250, 250);
  --preto: rgba(10,10,10,1);
  --transparente: rgba(250,250,250,0);
}

body, header {
  background-color: var(--branco);
  -webkit-font-smoothing: antialiased;
  line-height: 1.4;
}

.overflow-hidden {
  overflow: hidden;
}

h1, h2, h3, h4, h5, p, li, input {
  font-family: "cofo-gothic-variable", sans-serif;
  color: var(--preto);
}

hr {
  border-width: 2px;
  color: var(--preto);
  opacity: 1;
}

p {
  font-family: "cofo-gothic-variable", sans-serif;
  font-variation-settings: "wght" 400;
  font-weight: 400;
  font-style: normal;
  font-size: 1.4em;
  line-height: 2rem;
}

h1 {
  font-family: "cofo-gothic-variable", sans-serif;
  font-variation-settings: "wght" 600;
  font-style: normal;
  font-size: 52px;
  line-height: 56px;
}


h2 {
  font-family: "iki-mono-variable", sans-serif;
font-variation-settings: "wdth" 100, "wght" 300;
  text-transform: uppercase;
  font-size: calc(.5rem);
  line-height: calc(.5rem);
  letter-spacing: 1px;
    animation: slideUp-load 2s ease-out;
}

h3 {
  font-family: "cofo-gothic-variable", sans-serif;
  font-variation-settings: "wght" 400;
  font-size:  calc(2rem + 2vw);
	line-height: calc(2rem + 2vw);
}

h4 {
  font-family: "schoolbook", serif;
  font-weight: 400;
  text-decoration: none;
  font-size: calc(2rem);
  line-height: calc(2rem + 4px);
  font-weight: 400;
}

h4:hover {
  opacity: 1;
}

h5 {
  text-decoration: none;
  color: var(--preto);
  font-size: 1em;
  font-weight: 500;
  line-height: 1.4;
}

a {
  margin: 0;
  padding: 0;
  text-decoration: none;
  color: var(--preto);
  font-weight: 500;
  transition: 1s;
}





#hr-header, header .col-md-3 {
  animation: slideUp-load 2s ease-out;
}



.profile {
  display: flex;
  padding: 5vw;
  justify-content: ; /* pushes the two columns apart */
  align-items: flex-end;        /* align items at the top */
  gap: 2rem;                      /* space between columns */
}

@media (max-width: 768px) {
	.profile {
  display: block;
}
}

.info h2 {
	padding-bottom: 10px;
	padding-top: 5px;
}