@import "normalize.css";
@import "fonts.css";

:root {
  --desk-bg-color: #4f4f4f;
  --card-1-bg-color: #ffffff;
  --card-2-bg-color: #e3f3ee;
  --card-3-bg-color: #d64000;
  --card-4-bg-color: #00452a;
  --font-black: #000000;
  --font-green: #00452a;
  --font-orange: #d64000;
  --font-black: #000000;
}

body {
  background-color: var(--desk-bg-color);
  display: flex;
  font-family: Clario-light, sans-serif;
  justify-content: center;
}

a {
  text-decoration: none;
}

#nombre {
  color:var(--font-green);
  font-family: Clario-Medium, sans-serif;
  padding-left: 4.75rem;
}

#puesto {
  font-family: Clario-Light, sans-serif;
  padding-left: 4.75rem;
}

main {
  background-color: var(--card-1-bg-color);
  padding: .5rem 1rem;
}

section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: var(--card-2-bg-color);
}

footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: var(--card-4-bg-color);
}

#card {
  min-width: 320px;
  max-width: 480px;
}

#photo {
  display: block;
  line-height: 0rem;
  margin: 0rem;
  position: relative;
  width: 100%;
}

.logo-up {
  height: 4rem;
  margin-bottom: 1rem;
}
.logo-down {
  padding: 1rem;
  text-align: center;
}
.logo-down img {
  position: relative;
  width: 100%;
}

.contact-up {
  padding-left: 4.75rem;
  padding-bottom: 1rem;
}
.contact-down {
  background-color: var(--card-3-bg-color);
  text-align: right;
  padding: 1rem;
  width:68.5%;
}

.add-contact {
    color: #4db299;
    background-color: var(--card-4-bg-color);
    padding: .5rem 1rem;
    padding-left: 5.75rem;
}
.add-contact a {color:#4db299;}

.icon-up {
  height: 3rem;
  margin-right: .5rem;
  width: auto;
}
.icon-down {
  height: 2rem;
  margin-top: .3rem;
  margin-right: .25rem;
}

.text {
  position: relative;
  background-color: var(--card-2-bg-color);
  font-family: Clario-Medium, sans-serif;
  padding: 1rem 1rem 0rem 5.75rem;
}
.green-text {
  color:var(--font-green);
}
.orange-text {
  color:var(--font-orange);
}
.black-text {
  color:var(--font-black);
  font-size: .75rem;
  text-align: right;
  padding-right: .5rem;
}

.vignette {
  position: relative;
  background-image: url(../img/vignettes/vignete-05.webp);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 50%;
}

@media screen and (max-width: 2560px) {
  #nombre, .text {
    font-size: calc(.778rem + 1vw);
  }
  #puesto {
    font-size: calc(.275rem + 1vw);
  }
}
@media screen and (max-width: 1920px) {
  #nombre, .text {
    font-size: calc(1.175rem + 1vw);
  }
  #puesto {
    font-size: calc(.275rem + 1vw);
  }
}
@media screen and (max-width: 1664px) {
  #nombre, .text {
    font-size: calc(1.317rem + 1vw);
  }
  #puesto {
    font-size: calc(.55rem + 1vw);
  }
}
@media screen and (max-width: 1440px) {
  #nombre, .text {
    font-size: calc(1.4723rem + 1vw);
  }
  #puesto {
    font-size: calc(.55rem + 1vw);
  }
}
@media screen and (max-width: 1366px) {
  #nombre, .text {
    font-size: calc(1.5223rem + 1vw);
  }
  #puesto {
    font-size: calc(.575rem + 1vw);
  }
}
@media screen and (max-width: 1280px) {
  #nombre, .text {
    font-size: calc(1.5523rem + 1vw);
  }
  #puesto {
    font-size: calc(.65rem + 1vw);
  }
}
@media screen and (max-width: 1194px) {
  #nombre, .text {
    font-size: calc(1.631rem + 1vw);
  }
  #puesto {
    font-size: calc(.7178rem + 1vw);
  }
}
@media screen and (max-width: 1180px) {
  #nombre, .text {
    font-size: calc(1.641rem + 1vw);
  }
  #puesto {
    font-size: calc(.7178rem + 1vw);
  }
}
@media screen and (max-width: 1080px) {
  #nombre, .text {
    font-size: calc(1.6609rem + 1vw);
  }
  #puesto {
    font-size: calc(.7278rem + 1vw);
  }
}
@media screen and (max-width: 1024px) {
  #nombre, .text {
    font-size: calc(1.7259rem + 1vw);
  }
  #puesto {
    font-size: calc(.7878rem + 1vw);
  }
}
@media screen and (max-width: 960px) {
  #nombre, .text {
    font-size: calc(1.7759rem + 1vw);
  }
  #puesto {
    font-size: calc(.8478rem + 1vw);
  }
}
@media screen and (max-width: 950px) {
  #nombre, .text {
    font-size: calc(1.7859rem + 1vw);
  }
  #puesto {
    font-size: calc(.8478rem + 1vw);
  }
}
@media screen and (max-width: 900px) {
  #nombre, .text {
    font-size: calc(1.7859rem + 1vw);
  }
  #puesto {
    font-size: calc(.8478rem + 1vw);
  }
}
@media screen and (max-width: 883px) {
  #nombre, .text {
    font-size: calc(1.8405rem + 1vw);
  }
  #puesto {
    font-size: calc(.9578rem + 1vw);
  }
}
@media screen and (max-width: 834px) {
  #nombre, .text {
    font-size: calc(1.8569rem + 1vw);
  }
  #puesto {
    font-size: calc(.9578rem + 1vw);
  }
}
@media screen and (max-width: 820px) {
  #nombre, .text {
    font-size: calc(1.8659rem + 1vw);
  }
  #puesto {
    font-size: calc(.9478rem + 1vw);
  }
}
@media screen and (max-width: 800px) {
  #nombre, .text {
    font-size: calc(1.8569rem + 1vw);
  }
  #puesto {
    font-size: calc(.9478rem + 1vw);
  }
}
@media screen and (max-width: 768px) {
  #nombre, .text {
    font-size: calc(1.8559rem + 1vw);
  }
  #puesto {
    font-size: calc(.9478rem + 1vw);
  }
}
@media screen and (max-width: 740px) {
  #nombre, .text {
    font-size: calc(1.8855rem + 1vw);
  }
  #puesto {
    font-size: calc(.9578rem + 1vw);
  }
}
@media screen and (max-width: 667px) {
  #nombre, .text {
    font-size: calc(1.958rem + 1vw);
  }
  #puesto {
    font-size: calc(1.05rem + 1vw);
  }
}
@media screen and (max-width: 600px) {
  #nombre, .text {
    font-size: calc(1.978rem + 1vw);
  }
  #puesto {
    font-size: calc(1.05rem + 1vw);
  }
}
@media screen and (max-width: 428px) {
  #nombre {
    font-size: calc(1.955rem + 1vw);
  }
  #puesto {
    font-size: calc(1.05rem + 1vw);
  }
  .text {
    font-size: calc(1.48rem + 1vw);
    margin-bottom: 1rem;
  }
  #web {
    font-size: calc(.75rem - .5vw);
  }
}
@media screen and (max-width: 414px) {
  #nombre {
    font-size: calc(1.955rem + 1vw);
  }
  #puesto {
    font-size: calc(1.05rem + 1vw);
  }
  .text {
    font-size: calc(1.35rem + 1vw);
    margin-bottom: 1rem;
  }
  #web {
    font-size: calc(.75rem - .5vw);
  }
}
@media screen and (max-width: 412px) {
  #nombre {
    font-size: calc(1.955rem + 1vw);
  }
  #puesto {
    font-size: calc(1.05rem + 1vw);
  }
  .text {
    font-size: calc(1.3rem + 1vw);
    margin-bottom: 1rem;
  }
  #web {
    font-size: calc(.75rem - .5vw);
  }
}
@media screen and (max-width: 393px) {
  #nombre {
    font-size: calc(1.955rem + 1vw);
  }
  #puesto {
    font-size: calc(1.05rem + 1vw);
  }
  .text {
    font-size: calc(1.099rem + 1vw);
    margin-bottom: 1rem;
  }

  #web {
    font-size: calc(.75rem - .6vw);
  }

}
@media screen and (max-width: 390px) {
  #nombre {
    font-size: calc(1.955rem + 1vw);
  }
  #puesto {
    font-size: calc(1.05rem + 1vw);
  }
  .text {
    font-size: calc(1.1rem + 1vw);
    margin-bottom: 1rem;
  }

  #web {
    font-size: calc(.75rem - .8vw);
  }

}
@media screen and (max-width: 384px) {
  #nombre {
    font-size: calc(1.955rem + 1vw);
  }
  #puesto {
    font-size: calc(1.05rem + 1vw);
  }
  .text {
    font-size: calc(1.039rem + 1vw);
    margin-bottom: 1rem;
  }

  #web {
    font-size: calc(.75rem - .8vw);
  }

}
@media screen and (max-width: 375px) {
  #nombre {
    font-size: calc(1.955rem + 1vw);
  }
  #puesto {
    font-size: calc(1.05rem + 1vw);
  }
  .text {
    font-size: calc(.96rem + 1vw);
    margin-bottom: 1rem;
  }
  #web {
    font-size: calc(.75rem - 1vw);
  }
}
@media screen and (max-width: 360px) {
  #nombre {
    font-size: calc(1.955rem + 1vw);
  }
  #puesto {
    font-size: calc(1.05rem + 1vw);
  }
  .text {
    font-size: calc(.835rem + 1vw);
    margin-bottom: 1rem;
  }
  #web {
    font-size: calc(.75rem - 1.3vw);
  }
}
@media screen and (max-width: 320px) {
  #nombre {
    font-size: calc(1.655rem + 1vw);
  }
  #puesto {
    font-size: calc(1.05rem + 1vw);
  }
  .text {
    font-size: calc(1.01rem + 1vw);
    margin-bottom: 1rem;
    margin-left: -3.75rem;
  }
  #web {
    font-size: calc(.75rem - 1.3vw);
  }
  .icon-up {
    width: 2.5rem;
    margin-right: .15rem;
  }
}