/* vars */
:root {
  --radius-xl: 1.5rem;
  --radius-m: 0.5rem;
  --blue: #255EEC;
  --black: #3D4046;
  --gray: #4D4F66;
  --avatar-size: 8.75rem;
}

.gray {
  color: var(--gray);
}

.black {
  color: var(--black);
}

.blue {
  color: var(--blue);
}

/* setup */

html {
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
}

body {
  margin: 0px;
  padding: 0px;
}

.action-block {
  display: flex;
}

/* Typography classes */

.text-center{
  text-align: center;
}

h1, .h1 {
  font-size: 1.75rem;
  line-height: 1.3;
  font-weight: 400;
  margin: 0px;
}

p, .body-copy, a {
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 400;
}

p {
  color: var(--black);
  margin-top: 0px;
  margin-bottom: 0px;
}

.small-copy {
  font-size: 0.875rem;
  line-height: 1.3;
}

a {
  color: var(--blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:visited {
  color: var(--blue);
}

.action {
  background-color: var(--blue);
  color: white !important;
  border-radius: var(--radius-m);
  padding: .75rem .5rem;
  display: block;
  text-decoration: none;
  text-align: center;
  transition:  all .2s ease-in-out;
}

.action:hover {
  text-decoration: none;
  transform: scale(1.05);
  transition:  all .3s ease-in-out;
}

.action * {
  font-size: .875rem;
  line-height: .1 !important;
  cursor: pointer;
}

.contact-link {
  display: flex;
  margin-bottom: 1.75rem;
}

.idle {
  pointer-events: none;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}

/* Image classes */

.avatar {
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: var(--avatar-size);
  border: 5px solid white;
}

.contact-link > img {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 1rem;
  display: inline-block;
  vertical-align: middle;
}

.action > img {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: .25rem;
  margin-bottom: .125rem;
  display: inline-block;
  vertical-align: middle;
}

.map-image {
  display: flex;
  background-image: url('../assets/waze-maps_pin.png');
  background-size: cover;
  background-position: center;
  height: 8.5rem;
}

.cover {
  background-image: url('../assets/background-mobile2.png');

}

/* Desktop style */

@media screen and (min-width: 768px) {
  body {
    background-image: url('../assets/background-desktop-vertical.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .eduard-bondoc {
    margin-top: 5.5rem;
    margin-bottom: 2rem;
    background-color: white;
    border-radius: var(--radius-xl);
    max-width: 380px !important;
    padding: 0rem 1.5rem .25rem !important;
  }

  .avatar {
    margin-top: calc(var(--avatar-size) / 2 * -1);
  }

  .map-image {
    border-radius: 0px 0px 1rem 1rem;
    margin-bottom: 0.5625rem;
  }
}

@media screen and (max-width: 768px) {
  .cover {
    width: 100%;
    height: 12.5rem;
    overflow: hidden;
    background-image: url('../assets/background-mobile2.png');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    clip-path: ellipse(100% 100% at 50% 0px);
    position: relative;
    z-index: -1;
  }

  .eduard-bondoc {
    width: auto !important;
    margin-top: calc(var(--avatar-size) / 2 * -1);
  }

  .action {
    padding: .75rem .25rem;
  }

  .action > img {
    margin-right: 0px;
  }

}