* {
  color: var(--text_color);
  margin: 0;
  padding: 0;
  font-family: Poppins, sans-serif;
  transition: all .3s;
}

:hover {
  transition: all .3s;
}

h1, h2, h3, h4, h5, h6 {
  z-index: 2;
  font-family: Raleway, sans-serif;
  position: relative;
}

.subtitle {
  font-family: Poppins, sans-serif;
  font-weight: 400;
}

body {
  background: var(--background_gradient);
  width: 100vw;
  margin: 70px 0 0;
  overflow-x: hidden;
}

#modal ::-webkit-scrollbar {
  width: 1vw;
  min-width: 10px;
  max-width: 15px;
  padding: 10vh;
  position: absolute;
  right: 10px;
}

html::-webkit-scrollbar {
  width: 1vw;
  min-width: 10px;
  max-width: 15px;
  padding: 10vh;
  position: absolute;
  right: 10px;
}

#modal ::-webkit-scrollbar-track {
  background: var(--background_color);
}

html::-webkit-scrollbar-track {
  background: var(--background_color);
}

#modal ::-webkit-scrollbar-thumb {
  background: var(--accent_color_hover);
  border-radius: 8px;
  box-shadow: inset 0 0 5px #00000080;
}

html::-webkit-scrollbar-thumb {
  background: var(--accent_color_hover);
  border-radius: 8px;
  box-shadow: inset 0 0 5px #00000080;
}

#seccion_mis_trabajos, #seccion_contacto, #banner_mi_persona, #seccion_escaneame {
  text-align: center;
  flex-direction: row;
  align-items: center;
  min-height: 90vh;
  position: relative;
}

#seccion_mis_trabajos, #seccion_contacto, #seccion_escaneame {
  padding-top: 10vh;
}

#header {
  box-sizing: border-box;
  background-color: var(--background_with_transparency);
  z-index: 99;
  width: 100vw;
  max-height: fit-content;
  padding: 25px;
  position: fixed;
  top: 0;
  left: 0;
}

#header ul {
  text-align: center;
  grid-template-columns: 1fr 5fr 1fr;
  width: 100%;
  max-height: fit-content;
  display: grid;
}

#header ul li {
  list-style: none;
}

#idiomas_disponibles, #container_boton_header_volver_atras {
  height: fit-content !important;
  display: inline-block !important;
}

#idiomas_disponibles li, #container_boton_header_volver_atras li {
  background-color: var(--language_unselected);
  box-shadow: 0 0 8px var(--language_unselected);
  cursor: pointer;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  margin: 0 5px;
  padding: .5em;
  display: inline-block;
}

#idiomas_disponibles li:hover, #container_boton_header_volver_atras li:hover {
  background-color: var(--language_selected);
  box-shadow: 0 0 10px var(--language_selected);
}

#idiomas_disponibles .idioma_seleccionado {
  cursor: not-allowed;
  background-color: var(--language_selected);
  box-shadow: 0 0 10px var(--language_selected);
}

#idiomas_disponibles li a, #idiomas_disponibles li a img, #container_boton_header_volver_atras li a, #container_boton_header_volver_atras li a i {
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

#logo {
  filter: invert(99%) sepia(43%) saturate(3%) hue-rotate(288deg) brightness(111%) contrast(90%);
  max-width: 75px;
}

#three_container {
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

#three_canvas {
  z-index: -10;
  pointer-events: none;
  width: 100vw;
  height: fit-content;
  min-height: 100vh;
  transition: all;
  position: relative;
}

#three_background_texture, #three_overlay {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
}

#three_background_texture {
  mix-blend-mode: screen;
  background-image: url("bokeh_background.8ee38d84.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  animation: 10s ease-in-out infinite blurry;
  height: 100% !important;
}

@keyframes blurry {
  0% {
    filter: blur(1px);
    opacity: .5;
  }

  50% {
    filter: blur(20px);
    opacity: .25;
  }

  100% {
    filter: blur(1px);
    opacity: .5;
  }
}

#three_overlay {
  pointer-events: none;
  flex-direction: row;
  align-items: center;
  display: flex;
}

#three_background_texture {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}

#loading_container {
  box-sizing: border-box;
  text-align: center;
  width: 200px;
  height: 200px;
  padding: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(100%, -50%);
}

.fade-out {
  animation: 2s ease-in-out fade-out;
}

.short-fade-out {
  animation: 1s ease-in-out fade-out;
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

#loading_container label, #loading_container progress {
  width: 100%;
  display: block;
}

.spacer-1, .spacer-2, .spacer-3, .spacer-4 {
  height: 50px;
}

.spacer-1 {
  flex-grow: 1 !important;
}

.spacer-2 {
  flex-grow: 2 !important;
}

.spacer-3 {
  flex-grow: 3 !important;
}

.spacer-4 {
  flex-grow: 4 !important;
}

.mt-1 {
  margin-top: 20px;
}

#hero_section {
  align-items: row;
  text-align: left;
  flex-direction: column;
  flex-grow: 3;
  display: flex;
}

#title {
  font-size: 6em;
  font-style: 700;
  background: -webkit-linear-gradient(300deg, var(--title_gradient_origin) 10%, var(--title_gradient_end) 40%);
  -webkit-text-fill-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 200%;
  background-clip: text;
  margin: 0;
  animation: 3s ease-in-out infinite alternate title_gradient_anim;
}

@-webkit-keyframes title_gradient_anim {
  0% {
    background-position: 50% -10%;
  }

  100% {
    background-position: 0 10%;
  }
}

#subtitle {
  font-family: Space Mono, monospace;
}

#banner_mi_persona {
  background-image: url("foto_perfil_julian.2f772414.png");
  background-position: 100% 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-clip: content-box;
  align-items: center;
  padding-top: 0;
  display: flex;
}

#container_banner_mi_persona {
  z-index: 1;
  flex-flow: column wrap;
  justify-content: space-evenly;
  display: flex;
}

#container_banner_mi_persona > * {
  flex: 1;
}

#extracto_banner {
  text-align: left;
  flex-grow: 1;
  font-size: 1em;
}

#mis_trabajos_background {
  background: var(--porfolio_gradient);
  filter: var(--porfolio_gradient_filter);
  opacity: .5;
  z-index: -1;
  background-size: 200% 200%;
  border-radius: 50%;
  width: 50vh;
  height: 50vh;
  -webkit-animation-name: gradient-Anim;
  -webkit-animation-duration: 10s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-play-state: running;
  position: absolute;
  top: calc(50% - 25vh);
  left: calc(50% - 25vh);
}

@-webkit-keyframes gradient-Anim {
  0% {
    background-position: 0%;
    top: calc(50% - 25vh - 100px);
    left: calc(50% - 25vh - 100px);
    transform: rotate(0);
  }

  50% {
    background-position: 100%;
  }

  100% {
    background-position: 0%;
    top: calc(50% - 25vh + 100px);
    left: calc(50% - 25vh + 100px);
    transform: rotate(90deg);
  }
}

#porfolio_bloque_interior {
  flex-direction: column;
  width: 100%;
  height: 100%;
  display: flex;
}

#porfolio_bloque_interior .subtitle {
  height: 10%;
}

#bloque_trabajos {
  width: 100%;
  height: 80vh;
  padding-top: 20vh;
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: scroll;
}

#bloque_trabajos::-webkit-scrollbar {
  width: 0;
}

#bloque_trabajos_container {
  flex-direction: column;
  width: 100%;
  height: 100%;
  display: flex;
}

.flex_row {
  flex-direction: row;
  flex-grow: 2;
  flex-shrink: 0;
  width: 100%;
  height: 50%;
  display: flex;
}

.card_trabajo {
  text-align: center;
  flex: 3 0;
  height: 100%;
  transition: all 1s;
  position: relative;
  transform: scale(1);
}

.img_trabajo {
  border-radius: 8px;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.img_trabajo:hover {
  transition: all 1s;
}

#overlay_gradiente_trabajos, #overlay_gradiente_mi_persona, #overlay_gradiente_hero {
  background: var(--about_overlay_gradient);
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: -2px;
  left: 0;
}

#overlay_gradiente_mi_persona, #overlay_gradiente_hero {
  height: calc(100% + 2px);
}

#overlay_gradiente_hero {
  z-index: 99;
  background: var(--hero_overlay_gradient);
  bottom: 0;
}

.title_trabajo {
  text-align: center;
  width: 100%;
  position: absolute;
  top: -3em;
  left: 0;
}

#bloque_de_trabajos {
  display: flex;
}

.porfolio_prev_button, .porfolio_next_button {
  cursor: pointer;
  flex-direction: row;
  align-items: center;
  height: 100%;
  padding: 0 5vw;
  display: flex;
  position: absolute;
  top: 0;
}

.porfolio_prev_button i, .porfolio_next_button i {
  background-color: var(--containers_color);
  border-radius: 50%;
  width: 25px;
  height: 25px;
  padding: 25px;
}

.porfolio_prev_button i:before, .porfolio_next_button i:before {
  position: relative;
  top: 20%;
}

.porfolio_prev_button i:hover, .porfolio_next_button i:hover {
  background-color: var(--containers_color_hovered);
}

.porfolio_prev_button {
  background: var(--porfolio_overlay_gradient_horizontal_left);
  right: 0;
}

.porfolio_next_button {
  background: var(--porfolio_overlay_gradient_horizontal_right);
  left: 0;
}

#botones_mas_trabajos {
  align-items: center;
  width: 100%;
  padding: 20px 0;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
}

.text_shadow_standard {
  text-shadow: 0 0 6px #000c;
}

.shadow_standard {
  box-shadow: 0 0 8px #0009;
}

.shadow_elevated {
  box-shadow: 0 5px 8px #0003;
}

.shadow_elevated:hover {
  transform: scale(1.1);
  box-shadow: 0 25px 16px #0003;
}

.boton_gris {
  background-color: var(--containers_color);
  border-radius: 8px;
  flex-grow: 1;
  padding: 15px 0;
  text-decoration: none;
}

.boton_gris:hover {
  background-color: var(--containers_color_hovered);
}

#modal_overlay, #modal {
  z-index: 100;
  position: fixed;
}

#modal_overlay {
  background-color: var(--background_with_transparency);
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
}

#modal {
  background-color: var(--background_color);
  border: 2px solid var(--containers_color_hovered);
  border-radius: 8px;
  width: 60vw;
  height: 90vh;
  margin: 0;
  padding: 0;
  top: 5vh;
  left: 20vw;
  box-shadow: 0 0 25px #0000009f;
}

#modal * {
  box-sizing: border-box;
}

#modal iframe {
  border-radius: 8px;
  width: 100%;
  height: 100%;
}

#modal_img_overlay {
  background: linear-gradient(0deg, #141414 0%, #14141440 50%, #35275500 100%);
  width: 100%;
  height: 25%;
  position: absolute;
}

#modal_img {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 25%;
}

#modal_title {
  text-align: center;
  width: 100%;
  margin-top: 25px;
}

#modal_category {
  text-align: center;
  width: 100%;
}

#modal_keywords_title {
  text-align: left;
}

#modal_keywords, #modal_tools {
  margin: 1em 0 3em;
  padding: 0;
}

#modal_description {
  margin-bottom: 3em;
}

#modal_keywords_title, #modal_description_title {
  margin: 1em 0;
}

#modal_keywords * {
  border: 1px solid var(--accent_color);
  color: var(--accent_color);
  border-radius: 4px;
  margin: .25em .5em;
  padding: .25em .5em;
  text-decoration: none;
  display: inline-block;
}

#modal_keywords :hover {
  color: var(--complementary_accent_color);
  border-color: var(--complementary_accent_color);
}

#modal_tools * {
  border: 1px solid var(--complementary_blue);
  color: var(--complementary_blue);
  border-radius: 4px;
  margin: 0 .5em;
  padding: .25em .5em;
  text-decoration: none;
  display: inline-block;
}

#modal_tools :hover {
  color: var(--title_gradient_origin);
  border-color: var(--title_gradient_origin);
}

#modal_description_container {
  text-align: justify;
  width: 100%;
  max-height: 50%;
  padding: 50px 5vw 0;
  overflow: auto;
}

#modal_description {
  width: 100%;
}

#close_modal {
  cursor: pointer;
  position: absolute;
  top: .5em;
  right: 1em;
}

#bloque_contacto {
  flex-direction: row;
  margin: 50px 0;
  padding: 0 10vw;
  display: flex;
}

#contacto_extra, #form_contacto_container {
  flex: 10;
}

#form_contacto_container {
  flex-direction: column;
  align-items: center;
  display: flex;
}

#form_contacto_container #div_form_contacto_container, #contacto_extra div {
  box-sizing: border-box;
  text-align: left;
  background-color: var(--containers_color);
  border-radius: 8px;
  flex-direction: column;
  flex-grow: 1;
  place-items: center;
  width: 90%;
  height: 100%;
  margin: 0 10%;
  padding: 20px 10% 10%;
  display: flex;
}

#form_contacto_container div h3 {
  margin: 1em 0 2em;
}

#form_contacto_container div form {
  width: 100%;
  position: relative;
}

#form_contacto_container form label {
  text-align: left;
  width: 100%;
  font-size: 1.1em;
}

#form_contacto_container form input, #form_contacto_container form textarea, #contacto_extra #contacto_extra_input {
  background-color: var(--containers_color_hovered);
  border: none;
  border-radius: 8px;
  width: 94%;
  height: 2em;
  margin-bottom: 2em;
  padding: 0 3%;
  display: block;
}

#contacto_extra #contacto_extra_input {
  min-height: 20vh;
}

#contacto_extra #contacto_extra_input::placeholder {
  text-align: left;
}

#form_contacto_container form textarea {
  max-width: 100%;
  height: 6em;
}

#form_contacto_container form input::placeholder, #form_contacto_container form textarea::placeholder, #contacto_extra #contacto_extra_input::placeholder {
  color: var(--dimmed_text_color);
}

#form_contacto_container form input, #form_contacto_container form textarea, #contacto_extra #contacto_extra_input {
  padding-top: .5em;
}

#contacto_extra #contacto_extra_input::placeholder {
  color: var(--text_color);
}

#form_captcha, #form_captcha div {
  text-align: center;
  flex-direction: column;
  align-items: center;
  width: 100%;
  display: flex;
  margin-bottom: 1em !important;
  padding: 0 !important;
}

#contacto_extra img {
  filter: drop-shadow(0 0 25px #e3a8ff);
  max-width: 25%;
  padding: 2em;
}

#contacto_extra small {
  color: var(--dimmed_text_color);
  margin: 1em 0;
}

#error_msj {
  display: none;
  color: var(--red_bright_desaturated) !important;
  margin: .5em 0 1em !important;
}

#submit_button, #modal_link, #contacto_extra button {
  background-color: var(--accent_color_hover);
  cursor: pointer;
  border: none;
  border-radius: 8px;
  width: 100%;
  padding: 1em 0;
  font-weight: 800;
}

#contacto_extra button {
  background-color: var(--language_unselected);
}

#submit_button .fa-spinner {
  animation: 3s linear infinite constant_rotation;
}

@keyframes constant_rotation {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

#submit_button:hover, #modal_link:hover, #contacto_extra button:hover {
  background-color: var(--accent_color);
  transition: all 1s;
}

#footer {
  text-align: center;
  border-top: 1px solid var(--background_color);
  color: var(--dimmed_text_color);
  width: 100%;
  padding: 2em 0;
  box-shadow: 0 -2px 10px #0000009f;
}

#footer a {
  text-decoration: none;
}

.tooltip {
  background-color: var(--text_color);
  border-radius: 8px;
  padding: 1em;
  font-weight: 400;
  animation: 10s ease-in-out fade_in_out;
  position: absolute;
  box-shadow: 0 0 16px #0006;
}

.tooltip p {
  margin-left: 1em;
}

@keyframes fade_in_out {
  0% {
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.tooltip i, .tooltip p {
  display: inline;
}

#modal_link {
  text-align: center;
  width: 25%;
  text-decoration: none;
  position: absolute;
  bottom: 5%;
  left: 37.5%;
}

.smaller {
  font-size: .75em;
}
/*# sourceMappingURL=index.77a9bc14.css.map */