/* Fuentes */

/* LORA */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap');

/* Colores */
:root {
  --primary-color: #00A6D6;
  --secondary-color: #94D2EB;
  --background-color: #F2F6F8;
  --text-color: #333333;

  /* --curriculum-background-color: #464950; */
  /* --upper-bar-navigation: #303236; */
  --curriculum-background-color: #006292FF;
  --upper-bar-navigation: #004C71;

  /* --navigation-background-color: #F5EAE4; */
  --navigation-background-color: #bce6f3;
  --content-background-color: #FFFFFF;
  
  --title-text-color: #04136B;
  --text-color-01: #17085b;
  --line-separator-color: #333333;

  --background-color-001: #464950;
	--background-color-002: #FFFFFF;
	--button-color: #F5EAE4;
	--text-color: #04136B;
	--placeholder-color: #464950;
	--focused-color: #04136B;

  --electricblue-color: #004C71;
  --electricblue-color-off: #00629200;
  --white-color: #FFFFFF;

  --demo-button-background-color: #53917c;
  --demo-button-color: #c1f9ac;
  --demo-button-border-color: #c1f9ac;
  --repository-button-background-color: #537391;
  --repository-button-color: #acd2f9;
  --repository-button-border-color: #acd2f9;  


  --strong-font: 'Lora',serif;
}

/* @media (max-width: 600px) { */
@media (orientation: portrait) {
  :root {
    --curriculum-background-color: rgb(0, 146, 56);
    --upper-bar-navigation: #00713e;
    --navigation-background-color: #bcf3c3;
  }
}

/* Estilos para el encabezado */
header {
  background-color: var(--secondary-color);
  color: var(--background-color);
  text-align: center;
  padding: 2rem;
}

body {
  margin: 0%;
}

/* Estilos para el pie de página */
footer {
  background-color: var(--primary-color);
  color: var(--background-color);
  text-align: center;
  padding: 2rem;
  font-size: 1rem;
}

@media (orientation: portrait) {
  footer {
    font-size: 3rem;
  }
}

/* Estilos propios... */

/* EM = Unidad relativa sobre su padre
REM = Unidad relativa sobre HTML
VW = Unidad relativa sobre ancho pantalla */

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

@media (max-width: 1190px) {
  html {
    font-size: 45%;
  }
}

@media (max-width: 780px) {
  html {
    font-size: 30%;
  }
}

@media (max-width: 420px) {
  html {
    font-size: 25%;
  }
}

@media print {
  header {
    display: none;
  }

  #id_topNavBar, #id_portfolio, #id_certificates, #id_contact * {
    display: none;
  }

  #id_identity h1, #id_identity h2 {
    color: var(--text-color-01);
  }

  #id_curriculum_left_bar {
    padding: 0%;
    margin: 0%;
    margin-top: 2%;
  }

  @media (orientation: portrait) {
    header {
      display: none;
    }  
  }

  footer {
    display: none;
  }

  @media (orientation: portrait) {

  }
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* CSS Defensivo */

img {
  width: 100%;
  object-fit: cover;
  object-position: center;  
}

.breakWordDemo {
  overflow-wrap: break-word;
  min-width: 0;
}

.noWrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gapDemo { 
  gap: 1rem;
  padding: 1rem;
}

.buttonDemo {
  min-width: 4rem;
}

.maxWidhtDemo {
  max-width: 40rem;
}

.buttonsDemo {
  display: flex;
  flex-wrap: wrap;
}

@media (hover: hover) {
  .button:hover {
    background-color: red;
  }
}

/* ///////////// */

/* Generales */

h1 {
  font-size: 5rem;
}

h2 {
  font-size: 3rem;
}

h3 {
  font-size: 2.0rem;
  font-family: 'Arial';
}

/* ///////// */

/* Identidad */

.identity {
  width: 100%;
  text-align: center;
  font-family: 'Georgia';
  font-weight: bold;
  padding: 1%;
  color: var(--text-color-01);
  background-color: var(--curriculum-background-color);
  display: flex;
}

.nameAndTitle {
  width: 100%;
}

.name {
  text-transform: uppercase;
  color: var(--content-background-color);
}

.title {
  width: 100%;
  color: var(--content-background-color);
}

.desc {
  width: 100%;
  color: var(--content-background-color);  
}

@media (orientation: landscape) {
  .desc {
    display: none;
  }
}

@media (orientation: portrait) {
  .title {
    display: none;
  }
}

/* ///////// */

.workExperience {
  width: 66%;
  margin: auto;
  gap: 1rem;
  padding: 1rem;
  transition: .4s, opacity 0.3s ease
}

.we_title {
  font-family: 'Arial Bold';
  font-size: 3.4rem;
  color: var(--title-text-color);
  border-bottom: 0.2rem solid var(--line-separator-color);
  padding-bottom: 1rem;
  padding: 1%;
  background-color: var(--navigation-background-color);
}

.we_list {
  font-size: 2.2rem;
}

.we_list_element {
  color: var(--text-color-01);
  transition: transform .3s ease-out;
}

.we_list_element:hover {
  transform: scale(1.1);
}

.we_list_element_title {
  font-family: 'Arial';
  font-weight: bold;
  font-size: 2.5rem;
  padding: 1%;
}

.we_list_element_title a {
  color: var(--text-color-01);
  text-decoration: none;
}

.we_list_element_title a:hover {
  color: #0088cc;
  text-decoration: underline;
}

.we_list_element_year {
  font-size: 1.8rem;
  font-family: Georgia;
  padding-bottom: 1%;
}

.we_list_element_job {
  font-family: Georgia;
  padding-top: 2%;
}

.we_list_element_content {
  font-family: Georgia;
  padding-bottom: 1%;
}

.we_list_element_content span::before {
  content: '\2022';
  margin-right: 0.5rem;
}

@media (orientation: portrait) {
  .we_list {
    font-size: 4rem;
  }

  .we_list_element {
    transition: none;
  }

  .we_list_element:hover {
    transform: none;
  }

  .we_list_element_title {
    font-size: 4rem;
  }

  .we_list_element_year {
    font-size: 4rem;
  }
}

/* Education */

.education {
  width: 66%;
  margin: auto;
  gap: 1rem;
  padding: 1rem;
  transition: .4s, opacity 0.3s ease
}

.ed_title {
  font-family: 'Arial Bold';
  font-size: 3.4rem;
  color: var(--title-text-color);
  border-bottom: 0.2rem solid var(--line-separator-color);
  padding-bottom: 1rem;
  padding: 1%;
  background-color: var(--navigation-background-color);
}

.ed_list {
  font-size: 2.2rem;
}

.ed_list_element {
  color: var(--text-color-01);
  transition: transform .3s ease-out;  
}

.ed_list_element:hover {
  transform: scale(1.1);
}

.ed_list_element_title {
  font-family: 'Arial';
  font-weight: bold;
  padding: 1%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.ed_list_element_title a {
  color: var(--text-color-01);
  text-decoration: none;
}

.ed_list_element_title a:hover {
  color: #0088cc;
  text-decoration: underline;
}

.ed_list_element_title_link {
  width: 3rem;
}

.ed_list_element_year {
  font-family: Georgia;
  padding: 1%;
}

.ed_list_element_content {
  font-family: Georgia;
  padding: 1%;
}

.ed_list_element_content span::before {
  content: '\2022';
  margin-right: 0.5rem;
}

@media (orientation: portrait) {
  .ed_list {
    font-size: 4rem;
  }

  .ed_list_element {
    transition: none;
  }

  .ed_list_element:hover {
    transform: none;
  }

  .ed_list_element_title {
    font-size: 4rem;
  }

  .ed_list_element_year {
    font-size: 4rem;
  }
}

/* ///////// */

/* Language */

.language {
  width: 66%;
  margin: auto;
  gap: 1rem;
  padding: 1rem;
  transition: opacity 0.3s ease
}

.ln_title {
  font-family: 'Arial Bold';
  font-size: 3.4rem;
  color: var(--title-text-color);
  border-bottom: 0.2rem solid var(--line-separator-color);
  padding-bottom: 1rem;
  padding: 1%;
  background-color: var(--navigation-background-color);
}

.ln_list {
  font-size: 2.2rem;
}

.ln_list_element {
  color: var(--text-color-01);
  transition: transform .3s ease-out;
}

.ln_list_element:hover {
  transform: scale(1.1);
}

.ln_list_element_name {
  font-family: 'Arial';
  font-weight: bold;
  padding: 1%;
}

.ln_list_element_year {
  font-family: Georgia;
  padding: 1%;
}

.ln_list_element_content {
  font-family: Georgia;
  padding: 1%;
}

.ln_list_element_content span::before {
  content: '\2022';
  margin-right: 0.5rem; /*Ojo modificar. No valores absolutos*/
}

@media (orientation: portrait) {
  .ln_list {
    font-size: 4rem;
  }

  .ln_list_element {
    transition: none;
  }

  .ln_list_element:hover {
    transform: none;
  }

  .ln_list_element_title {
    font-size: 4rem;
  }

  .ln_list_element_year {
    font-size: 4rem;
  }
}

/* ///////// */

/* Skills */

.skills {
  width: 66%;
  margin: auto;
  gap: 1rem;
  padding: 1rem;
  transition: opacity 0.3s ease;
  margin-bottom: 2rem;
}

@media (orientation: landscape) {
  .skills {
    display: none;
  }
}

.sk_title {
  font-family: 'Arial Bold';
  font-size: 3.4rem;
  color: var(--title-text-color);
  border-bottom: 0.2rem solid var(--line-separator-color);
  padding-bottom: 1rem;
  padding: 1%;
  background-color: var(--navigation-background-color);
}

/* ///////// */

/* Contact */

.contact2 {
  width: 66%;
  margin: auto;
  gap: 1rem;
  padding: 1rem;
  transition: opacity 0.3s ease;
  margin-bottom: 2rem;
}

@media (orientation: landscape) {
  .contact2 {
    display: none;
  }
}

.cn_title {
  font-family: 'Arial Bold';
  font-size: 3.4rem;
  color: var(--title-text-color);
  border-bottom: 0.2rem solid var(--line-separator-color);
  padding-bottom: 1rem;
  padding: 1%;
  background-color: var(--navigation-background-color);
}


/* Descripcion */

.description {
  width: 80%;
  font-family: Georgia;
  color: var(--title-text-color); 
}

.des_text {
  font-size: 1.8rem;
  padding: 1.5rem;
  object-position: center;
  text-align: center;
}

/* /////////// */

/* Página Contacto */

.contactContent {
  width: 100%;
  margin: auto;
  gap: 1rem;
  padding: 1rem;
  transition: .4s, opacity 0.3s ease;
  background-color: var(--curriculum-background-color);
  display: flex;
  justify-content: center;
}

/* /////////////// */

/* Contacto */

.contactTitle {
  display: flex;
  width: 100%;
  object-position: center;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-end;
  justify-content: center;
  margin: 1rem 0 0 0;
  transition: color 0.3s ease;
}

.contactTitle:hover {
  color: #20435f
}

.contact {
  width: 100%;
}

.cn_element {
  height: 1rem;
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 15% 1fr;
}

.contactLogo {
  width: 3rem;
  height: 3rem;
  border-radius: 90%;
  vertical-align: middle;
  padding: 0.5rem; 
}

.contactText {
  font-size: 1.8rem;
  color: var(--text-color-01);
  font-family: Georgia;
  overflow-wrap: break-word;
  min-width: 0;  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  
}

@media (orientation: portrait) {
  .cn_element{
    height: auto;
  }

  .contactLogo {
    width: 7rem;
    height: 7rem;    
  }

  .contactText {
    font-size: 4rem;
  }
}

/* //////// */

/* Habilidades */

.skillTitle {
  display: flex;
  width: 100%;
  object-position: center;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-end;
  justify-content: center;
  margin: 5rem 0 0 0;
  transition: color 0.3s ease;
}

.skillTitle:hover {
  color: #20435f
}

.skill {
  width: 100%;
  display: flex;
  padding: 0.7rem;
  margin: 0;
  border-radius: 0.5rem;
  border: 0.1rem solid #a6a6a6;
  width: 100%;
  flex-wrap: wrap;
}

.skill p{
  font-size: 1rem;
  margin: 0.4rem 0.3rem;
  border-radius: 0.5rem;
  background: var(--content-background-color);
  color: var(--title-text-color);
  padding: 0.5rem 0.8rem 0.5rem 1rem;
  border: 0.1rem solid #e3d1e1;
  font-family: Georgia;
  font-size: 1.5rem;
  object-position: center;
  text-align: center;
  white-space: nowrap;
  transition: transform .3s ease-out;
}

.skill p:hover {
  transform: scale(1.3);
}

@media (orientation: portrait) {
  .skill p {
    font-size: 4rem;
    transition: none;
  }
  .skill p:hover {
    transform: none;
  }
}

/* ///////// */

/* Estilos generales */

.wholeDocument {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.curriculum {
  width: 100%;
  height: 90%;
  background-color: var(--curriculum-background-color);
  display: flex;
  flex-direction: row;
}

.languageList {
  width: 2.5rem;
}

.languageList ul {
  margin-top: 0%;
  padding: 0%;
  list-style-type: none;
}

.nav {
  /*background-color: #00ff00;*/
  background-color: var(--navigation-background-color);
  width: 20%;
  min-height: 30%;
  height: fit-content;
  padding: 1%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2%;
  transition: .4s, opacity 0.3s ease
}

@media (orientation: portrait) {
  .nav {
    display: none;
  }
}

.hidden {
  width: 0%;
  height: 0%;
  min-height: 0%;
  padding: 0%;
  margin: 0%;
  display: none;
  overflow: hidden
}

.content {
  /* background-color: var(--content-background-color); */
  /* background: linear-gradient(to right, var(--curriculum-background-color), var(--content-background-color)); */
  background: linear-gradient(to right, var(--curriculum-background-color), var(--curriculum-background-color) 1%, var(--content-background-color) 10%, var(--content-background-color) 90%, var(--curriculum-background-color) 100%);
  /* background-size: 10% 100%; */
  width: 80%;
  height: 100%;
  transition: .4s;
}

@media (orientation: portrait) {
  .content {
    width: 100%;
  }
}

.fitScreen {
  width: 100%;
}

.footer {
  background-color: var(--curriculum-background-color);
  width: 100%;
  height: 15%;
  min-height: 100%;
  border-top: 0.5rem solid;
  border-bottom: 0.5rem solid;
  border-color: var(--curriculum-background-color);
}

.BottomNavBarDiv {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  color: var(--content-background-color);
}

.BottomNavBarList {
  width: auto;
  font-size: 1.8rem;
  list-style: none;
}

.BottomNavBarElement {
  padding: 0.5rem
}

.BottomContactList {
  width: auto;
  font-size: 1.8rem;
  list-style: none; 
}

.BottomContactElement {
  padding: 0.5rem;
}

.avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: -webkit-fill-available;  
}

.fixedAvatar {
  width: 25rem;
}

@media (orientation: landscape) {
  .fixedAvatar {
    display: none;
  }
}

.userImage {
  width: 75%;
  border-radius: 50%;
}

/* Barra navegación superior */

.topNavBarDiv {
  width: 100%;
  background-color: var(--upper-bar-navigation); 
  border: solid 0.1rem;
  border-color: var(--curriculum-background-color);
}

.topNavBar ul {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.topNavBar li {
  border-color: var(--navigation-background-color);
  border-left: 0.2rem solid;
  list-style: none;
  text-align: center;
}

.topNavBarList {
  width: 100%;
  background-color: var(--upper-bar-navigation);
  padding: 5px;

  position: fixed;
  top: 0;
  left: 0;
  padding: 5px;
  text-align: center;
  z-index: 1000;
  margin: 0%;
}

.topNavBarElement {
  width: 15%;
  color: var(--content-background-color);
  font-size: 3rem;
  display: flex;
  justify-content: space-evenly;
  align-content: center;
}

.topNavBarElement div a {
  color: var(--background-color);
  transition: transform .3s ease-out;
  text-decoration: none;
}

.topNavBarElement div a:hover {
  cursor: pointer;
  color: var(--navigation-background-color);
  transform: scale(1.3);
}

.topNavBarElement img {
  width: 15%;
}

/* PORTFOLIO */

.portfolio {
  height: 85vh;
  background-color: var(--curriculum-background-color);
  display: flex;
  justify-content: center;
  align-items: center;
}

.porfolioContainer {
  margin: 5rem;
  padding: 2rem;
  display: grid;
  /*grid-template-columns: 50rem 50rem; */
  /*grid: repeat(2, 50rem) / repeat(2, 0.5fr); */
  grid: repeat(2, 1fr) / repeat(2, 1fr);
  gap: 5rem;
  align-items: center;
}

.projectCard {
  position: relative;
  width: 45rem;
  height: 30rem;
  background-color: var(--navigation-background-color);
  border-radius: 0.5rem;
  /*background-image: url('resources/proyecto01.jpg');*/
  background-size: 125%;
  background-position: center;
  animation: zoomIn 0.3s ease-out forwards;
  box-shadow: 0 0 20px rgba(0, 0, 0, 1); /* Sombra: desplazamientoX desplazamientoY desenfoque color */
}

.projectCard:hover {
  animation: zoomOut 0.3s ease-out forwards;
}

.projectWrap {
  content: ""; /* Necesario para que el ::before se muestre */
  position: absolute; /* Se superpone sobre la imagen de fondo */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Color de fondo semi-transparente (negro con 50% de opacidad) */
  animation: getBrighter 0.3s ease-out forwards;  
}

.projectWrap:hover {
  animation: getDarker 0.3s ease-out forwards;
}

@keyframes zoomIn {
  from {
    background-size: 100%; /* Estado inicial de la animación */
  }
  to {
    background-size: 125%; /* Estado final de la animación */
  }
}

@keyframes zoomOut {
  from {
    background-size: 125%; /* Estado inicial de la animación */
  }
  to {
    background-size: 100%; /* Estado final de la animación */
  }
}

@keyframes getDarker {
  from {
    background-color: rgba(0, 0, 0, 0);
  }
  to {
    background-color: rgba(0, 0, 0, 0.5);
  }
}

@keyframes getBrighter {
  from {
    background-color: rgba(0, 0, 0, 0.5);
  }
  to {
    background-color: rgba(0, 0, 0, 0);
  }
}

@keyframes certificateFadeOut {
  from {
    background-color: var(--electricblue-color-off);
  }
  to {
    background-color: var(--electricblue-color);
  }
}

@keyframes certificateFadeIn {
  from {
    background-color: var(--electricblue-color);
  }
  to {
    background-color: var(--electricblue-color-off);
  }
}

.projectCardContent {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  transition: opacity 0.5s ease;
  opacity: 0;
}

.projectCardContent:hover {
  opacity: 1;
}

.projectCardName {
  width: auto;
  height: 50%;
  font-size: 3rem;
  color: var(--white-color);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-text-stroke: 0.1rem #54c6ff;
}

.projectCardSkills {
  width: auto;
  height: 30%;
  font-size: 2rem;
  color: var(--content-background-color);
  display: flex;
  justify-content: space-evenly;
}

.projectCardSkills span{
  margin: 0.4rem 0.3rem;
  border-radius: 0.5rem;
  height: 40%;
  background: var(--content-background-color);
  color: var(--title-text-color);
  padding: 0.5rem 0.8rem 0.5rem 1rem;
  border: 0.1rem solid #e3d1e1;
  font-family: Georgia;
  font-size: 2rem;
  object-position: center;
  text-align: center;
  white-space: nowrap;
  transition: transform .3s ease-out;
}

.projectCardSkills span:hover {
  transform: scale(1.3);
}

.projectCardButtons {
  width: auto;
  height: 20%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.demoButton {
  font-size: 2rem;
  height: 45%;
  background-color: var(--demo-button-background-color);
  color: var(--demo-button-color);
  border-color: var(--demo-button-border-color);
}

.repositoryButton {
  font-size: 2rem;
  height: 45%;
  background-color: var(--repository-button-background-color);
  color: var(--repository-button-color);
  border-color: var(--repository-button-border-color);
}

@media (orientation: portrait) {
  .portfolio {
    height: 100%;
  }

  .porfolioContainer {
    grid: none
  }

  .projectCard {
    width: 95rem;
    height: 75rem;
  }

  .projectCardName {
    font-size: 7rem;
  }

  .projectCardSkills span {
    font-size: 5rem;
  }

  .repositoryButton {
    font-size: 5rem;
  }
}

/* CERTIFICATES */

.certificates {
  /* height: 85vh; */
  height: 100%;
  min-height: 85vh;
  background-color: var(--curriculum-background-color);  
}

.certificatesContainer {
  margin: 5rem;
  padding: 2rem;
  display: flex;
  gap: 5rem;
  align-items: center;
}

.certificate {
  position: relative;
  width: 45rem;
  height: 30rem;
  background-color: var(--navigation-background-color);
  border-radius: 0.5rem;
  background-size: 125%;
  background-position: center;
  animation: zoomIn 0.3s ease-out forwards;
}

.certificate:hover {
  animation: zoomOut 0.3s ease-out forwards;
}

.certificateWrap {
  content: ""; /* Necesario para que el ::before se muestre */
  position: absolute; /* Se superpone sobre la imagen de fondo */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: certificateFadeOut 0.3s ease-out forwards;  
}

.certificateWrap:hover {
  animation: certificateFadeIn 0.3s ease-out forwards;
}

.certificateContent {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  opacity: 1;
}

.certificateContent:hover {
  transition: opacity 0.5s ease;
  opacity: 0;
}

.certificateName {
  width: auto;
  height: 100%;
  font-size: 2.5rem;
  color: var(--white-color);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--strong-font);
}

@media (orientation: portrait) {  
  .certificatesContainer {
    flex-direction: column
  }

  .certificate {
    width: 95rem;
    height: 75rem;
  }

  .certificateName {
    font-size: 7rem;
  }
}

/* CONTACT FORM */

.contactBody {
	height: 100%; 
	font-family: 'Noto Sans', sans-serif;
  background-color: var(--background-color-001); 
}

.contact_form{	
	width: 460px; 
  height: auto;
  margin: 80px auto;
	border-radius: 10px;  
	padding-top: 30px;
	padding-bottom: 20px;  
  background-color: var(--background-color-002); 
  padding-left: 30px; 
}


.formulario input{
	background-color: var(--background-color-002); 
	width: 408px; 
	height: 40px; 
	border-radius: 5px;  
	border-style: solid; 
	border-width: 1px; 
	border-color: var(--background-color-001); 
	margin-top: 10px;  
	padding-left: 10px;
  margin-bottom: 20px; 
}


.formulario textarea{
  background-color: var(--background-color-002); 
	width: 405px; 
	height: 150px; 
	border-radius: 5px;  
	border-style: solid; 
	border-width: 1px; 
	border-color: var(--background-color-001); 
	margin-top: 10px;  
	padding-left: 10px;
  margin-bottom: 20px; 
  padding-top: 15px; 
}


.formulario label{
  display: block; 
	float: center; 	
}


.formulario button{
	height: 45px; 
	padding-left: 5px;
	padding-right: 5px; 	
	margin-bottom: 20px; 
	margin-top: 10px; 	
	text-transform: uppercase;
	background-color: var(--electricblue-color); 
	border-color: var(--electricblue-color); 
	border-style: solid; 
	border-radius: 10px;
	width: 420px;   
  cursor: pointer;  
}


.formulario button p{
	color: var(--button-color); 
  font-size: 2rem;
  vertical-align: center;
  margin: 0%;
}


.formulario span{
	color: var(--background-color-001); 
}


.aviso{
	font-size: 13px;  
	color: var(--text-color);  
}


.formulario h1{
	font-size: 39px;  
	text-align: letf; 
	padding-bottom: 20px; 
	color: var(--background-color-001);
}


.formulario h3{
	font-size: 16px; 
	padding-bottom: 30px;
	color: var(--text-color);   
}


.formulario p{
	font-size: 2rem; 
	color: var(--text-color); 
}

.formulario input {
  font-size: 1.5rem;
}

.formulario textarea {
  font-size: 1.5rem;
}


.formulario ::-webkit-input-placeholder {
 color: var(--placeholder-color);
}


.formulario ::-webkit-textarea-placeholder {
 color: var(--placeholder-color);
}


.formulario input:focus{
	outline:0;
	border: 1px solid var(--focused-color);
}


.formulario textarea:focus{
	outline:0;
	border: 1px solid var(--focused-color);
}

@media (orientation: portrait) {
  .contact_form {
    width: 90%;
  }

  .formulario h1 {
    font-size: 64px;
  }

  .formulario p {
    font-size: 3rem;
  }

  .formulario input {
    width: 90%;
    font-size: 3rem;
  }

  .formulario textarea {
    width: 90%;
    font-size: 3rem;
  }

  .formulario button {
    width: 90%;
  }

  .formulario button p {
    font-size: 3rem;
  }
}