@font-face {
  font-family: Poppins;
  src: url('./fonts/Poppins/Poppins-Regular.ttf') format('truetype');
}

@font-face {
  font-family: Playfair_Display;
  src: url('./fonts/Playfair_Display/static/PlayfairDisplay-Regular.ttf') format('truetype');
}

/* mobile version */

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.desk,
.geometry,
.dots,
.geo4,
.geo5,
.geo6,
.geo7,
.geo8,
.geo9,
.teal,
.msglabel {
  display: none;
}

.box01,
.box02,
.box03,
.box04,
.box05,
.box06 {
  display: none;
}

.pc,
.pc1,
.pc2,
.pc3,
.pc4,
.pc5 {
  display: none;
}

.content {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.flex-item {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  flex-wrap: nowrap;
}

#mobile > header {
  display: flex;
  justify-content: space-between;
}

.mobile-menu {
  width: 20px;
  height: 14px;
  margin-top: 19px;
  margin-right: 16px;
  background: #fff;
}

/* dropdown-menu */

.dropdown-menu {
  position: fixed;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
}

.menu-header {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
}

.hide-menu {
  visibility: hidden;
}

.dropdown-menu a {
  text-decoration: none;
  color: #000;
}

.dropdown-menu li {
  font-family: 'Poppins', 'Times New Roman', Times, serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 300%;
  list-style: none;
}

.close-menu {
  margin-top: 24px;
  margin-right: 20px;
  align-self: flex-start;
  background: transparent;
  border: none;
  font-size: 25px;
  top: 0;
}

#presentation {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 366px;
}

h1 {
  border: none;
  height: 100px;
  font-family: 'Playfair_Display', 'Times New Roman', Times, serif;
  font-style: normal;
  font-weight: 400;
  font-size: 50px;
  line-height: 100%;
  color: #1a2236;
}

#phrase {
  height: 126px;
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.01em;
  color: #1a2236;
  display: block;
}

.txtbutton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 288px;
  height: 50px;
  left: 0;
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 50px;
  text-align: center;
  color: #fff;
  background-color: #1a2236;
  cursor: pointer;
  text-decoration: none;
}

#graphics {
  margin-top: 32px;
}

.botton {
  width: 100%;
}

.project {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}

.project h2 {
  font-family: 'Playfair_Display', 'Times New Roman', Times, serif;
  font-style: normal;
  font-weight: 400;
  font-size: 50px;
  line-height: 100%;
  color: #1a2236;
}

.img-mobile {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  background-color: #1a2236;
  padding: 16px;
}

.box-title {
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 20px;
  line-height: 80%;
  color: #fff;
}

.box p,
.box ul {
  margin: 0;
  padding: 0;
}

.box-list {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  gap: 10px;
}

.box li {
  list-style: none;
}

.box button {
  appearance: auto;
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 10.3334px;
  line-height: 80%;
  text-align: center;
  cursor: default;
  background-color: #98dede;
  border-color: #98dede;
}

.html {
  width: 69px;
  height: 20px;
}

.ruby {
  width: 87px;
  height: 20px;
}

.js {
  width: 74px;
  height: 20px;
}

.pjbutton {
  display: flex;
  position: relative;
  width: 178px;
  height: 40px;
  background-color: #1a2236;
  border: solid #fff;
}

.pjbutton .actbutton {
  position: relative;
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  top: 10px;
  left: 10px;
}

.narrow {
  position: absolute;
  top: 10px;
  left: 146px;
}

.box1 {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.phrase {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 0 38px;
  padding: 0 16px;
}

.box1 .pjbutton {
  display: flex;
  position: relative;
  width: 288px;
  height: 50px;
  background-color: #1a2236;
  margin: 20px;
}

.pjbutton .actbutton1 {
  position: absolute;
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  top: 13px;
  left: 79px;
}

.narrow0 {
  position: absolute;
  top: 13px;
  left: 185px;
}

.project #square1 {
  width: 289px;
  height: 289px;
  left: 16px;
  top: 3220px;
  background: #1c528a;
  margin: 8px 15px 8px 16px;
}

.project #square2 {
  width: 289px;
  height: 289px;
  left: 16px;
  top: 3525px;
  background: #e2505c;
  margin: 8px 15px 8px 16px;
}

.project #square3 {
  width: 289px;
  height: 289px;
  left: 16px;
  top: 3830px;
  background: #febf52;
  margin: 8px 15px 8px 16px;
}

.project .chart {
  width: 178px;
  height: 135px;
  margin: 21px 45px 53px 34px;
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: -0.0525em;
  color: #fff;
}

.project h3 {
  position: relative;
  width: 116px;
  height: 30px;
  left: 50px;
  top: 20px;
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 800;
  font-size: 20px;
  line-height: 30px;
  color: #fff;
}

.project #narrow1,
.project #narrow2,
.project #narrow3 {
  position: relative;
  width: 102px;
  height: 102px;
  left: 187px;
  bottom: 72px;
}

/* conatct form */

.ux {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  flex-wrap: nowrap;
}

#uxlogo {
  margin: 0 0 0 0;
  justify-self: flex-start;
  align-self: flex-start;
}
.ux h2 {
  font-family: 'Playfair_Display', 'Times New Roman', Times, serif;
  font-style: normal;
  font-weight: 400;
  font-size: 50px;
  line-height: 100%;
  color: #1a2236;
}

.ux .phrase {
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.01em;
  color: #1a2236;
}

.data {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.liname {
  top: 0;
  border-radius: 4px;
  background: #fff;
  border: 1px solid #1a2236;
  box-sizing: border-box;
}

.name input {
  margin-left: 16px;
  top: 23px;
  background: #fff;
  border: none;
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: #1a2236;
}

.data .namelabel {
  margin-left: 16px;
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  line-height: 15px;
  color: #7d7c84;
}

.liemail {
  margin-top: 8px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid #1a2236;
  box-sizing: border-box;
}

.data .emaillabel {
  height: 15px;
  margin-left: 16px;
  margin-top: 8px;
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  line-height: 15px;
  color: #7d7c84;
}

.email input {
  width: 220px;
  height: 21px;
  top: 23px;
  margin-left: 16px;
  border-radius: 4px;
  background: #fff;
  border: none;
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: #1a2236;
}

.limsg {
  width: 288px;
  height: 112px;
  margin-top: 8px;
  margin-left: 18px;
  border-radius: 4px;
  padding: 0;
  border: 1px solid #dfdfe0;
  box-sizing: border-box;
}

#msg textarea {
  width: 253px;
  height: 90px;
  margin-top: 15px;
  margin-left: 16px;
  border: none;
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: #7d7c84;
}

.data .txtbutton {
  width: 288px;
  height: 44px;
  margin: 20px 14px 64px 18px;
}

.email:invalid {
  border: 2px solid red;
}

small {
  position: relative;
  top: -62px;
  left: 40px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: red;
}

footer {
  height: 150px;
  top: 631px;
  background-color: #1a2236;
  width: 100%;
}

footer .pjbutton1 {
  display: block;
  position: relative;
  width: 165px;
  height: 22px;
  top: 32px;
  left: 16px;
  border-radius: 0;
}

footer .actbutton2 {
  position: relative;
  width: 137px;
  height: 24px;
  top: 0;
  left: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #92dcdc;
}

.narrow1 {
  position: relative;
  width: 22px;
  height: 22px;
  top: 0;
  left: 0;
}

.icons {
  position: relative;
  height: 24px;
  list-style-type: none;
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  gap: 29px;
  top: 0;
  left: 0;
}

/* button interactions */

.txtbutton:hover {
  background: #fff;
  border: 1px solid #1a2236;
  box-sizing: border-box;
  color: #1a2236;
}

.txtbutton:disabled {
  background: #1a2236;
  border: 1px solid #1a2236;
  box-sizing: border-box;
}

.txtbutton:active {
  background: #fff;
  border: 2px solid #1a2236;
  box-sizing: border-box;
}

/*  popup-window mobile */

.popup-window {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f9f9fa;
  display: grid;
  grid-template-rows: auto auto auto auto auto auto auto;
  grid-template-columns: 100%;
  overflow: scroll;
  z-index: 10;
}

.close-popup {
  display: flex;
  justify-content: flex-end;
  margin: 10px 10px;
  border: none;
  background-color: transparent;
}

.close-popup img {
  padding: 9px 8px;
}

.popup-title {
  margin-left: 20px;
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 80%;
  color: #1a2236;
}

.popup-window ul {
  position: relative;
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  top: 0;
  margin-block-start: 0;
  margin-block-end: 18px;
  margin-inline-start: 20px;
  margin-inline-end: 50px;
  zoom: normal;
  list-style: none;
}

.popup-window ul button {
  appearance: auto;
  writing-mode: horizontal-tb;
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 10.3334px;
  line-height: 80%;
  text-transform: none;
  text-indent: 0;
  text-shadow: none;
  display: inline-block;
  text-align: center;
  align-items: flex-start;
  cursor: default;
  box-sizing: border-box;
  background-color: #fff;
  margin: 0;
  padding: 1px 6px;
  border-width: 0.516669px;
  border-style: outset;
  border-color: #1a2236;
  border-image: initial;
}

.popup-window ul > .html {
  position: absolute;
  width: 69px;
  height: 20px;
  left: 0;
}

.popup-window ul > .ruby {
  position: absolute;
  width: 87px;
  height: 20px;
  left: 79px;
}

.popup-window > .js {
  position: absolute;
  width: 74px;
  height: 20px;
  left: 176px;
}

.carousel__contenedor {
  position: relative;
  margin: 18px 20px 0 20px;
  width: 279px;
  height: 162px;
  overflow: hidden;
}

.carousel__anterior {
  position: absolute;
  display: block;
  width: 30px;
  height: 30px;
  border: none;
  top: calc(40%);
  cursor: pointer;
  line-height: 12.56px;
  text-align: center;
  background: none;
  color: #fff;
  opacity: 100%;
}

.carousel__siguiente {
  position: absolute;
  display: block;
  width: 30px;
  height: 30px;
  border: none;
  top: calc(40%);
  left: 250px;
  cursor: pointer;
  line-height: 12.56px;
  text-align: center;
  background: none;
  color: #fff;
  opacity: 100%;
}

.carousel__anterior:hover,
.carousel__siguiente:hover {
  opacity: 100%;
}

.carousel__lista {
  overflow: hidden;
}

.carousel__elemento img {
  width: 278px;
  height: 162px;
}

.carousel__indicadores {
  display: flex;
  flex-direction: row;
  width: 278px;
  height: 40px;
  margin: 0 20px 0 20px;
  overflow: hidden;
}

.carousel__indicador img {
  width: 69px;
  height: 40px;
}

.popup-p {
  width: 291px;
  height: 432px;
  margin: 16px;
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 27px;
  color: #1a2236;
}

.see-live,
.see-source {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 246px;
  height: 51px;
  margin: 15px 37px 15px;
  left: 37px;
  border: 1px solid #1a2236;
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
  background-color: #fff;
  text-decoration: none;
  color: #1a2236;
}

.previus,
.next {
  display: none;
}

/* button interactions */

.see-source:hover,
.see-live:hover {
  background: #1a2236;
  border: 1px solid #fff;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
}

.see-source:disabled,
.see-live:disabled {
  background: #fff;
  border: 1px solid #1a2236;
  box-sizing: border-box;
}

.see-source:active,
.see-live:active {
  background: #fff;
  border: 2px solid #1a2236;
  box-sizing: border-box;
}

.hidePopup {
  display: none;
}

/* desk-version */
@media (min-width: 800px) {
  /* Accessibility PAIR  PROGRAMMING */
  #mobile,
  .img-mobile {
    display: none;
  }

  .flex-item {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }

  .desk {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 8.42%;
  }

  .navbar {
    list-style-type: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    gap: 16px;
    height: 24%;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1em;
    color: #1a2236;
    cursor: pointer;
  }

  .navbar a {
    text-decoration: none;
    list-style-type: none;
    color: #1a2236;
  }

  #presentation {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 33.61%;
    left: 11.11%;
    top: 16.18%;
  }

  #presentation > article {
    width: 100%;
  }

  h1 {
    border: none;
    margin: 0;
    width: 100%;
    height: 60.43%;
    font-family: 'Playfair_Display', 'Times New Roman', Times, serif;
    font-style: normal;
    font-weight: 400;
    font-size: 6.875em;
    color: #1a2236;
    zoom: normal;
  }

  #phrase {
    width: 100%;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 0.875em;
    line-height: 1.313em;
    letter-spacing: -0.01em;
    color: #1a2236;
  }

  .txtbutton {
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    width: 52.48%;
    height: 14.2%;
    left: 0;
    top: 85.8%;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1em;
    line-height: 3.125em;
    text-align: center;
    color: #fff;
    background-color: #1a2236;
    cursor: pointer;
    text-decoration: none;
  }

  .geometry {
    display: block;
    position: absolute;
    width: 48.75%;
    height: 80.68%;
    top: 8.42%;
    left: 51.25%;
    right: 0;
    margin: 0;
    padding: 0;
    animation-duration: 3s;
    animation-name: project;
  }

  #graphics {
    display: none;
  }

  .dots {
    display: block;
    position: absolute;
    width: 12.15%;
    height: 14.74%;
    top: 73.78%;
    left: 39.1%;
    right: 48.75%;
  }

  .project .dots {
    position: absolute;
    width: 11.11%;
    height: 14.37%;
    top: 1187px;
    left: 21.74%;
  }

  .project .geo4 {
    display: block;
    position: absolute;
    width: 35.49%;
    height: 19.56%;
    top: 1745px;
    left: 32.22%;
  }

  .project .geo5 {
    display: block;
    position: absolute;
    width: 44.43%;
    height: 17.52%;
    top: 2285px;
    left: 55.56%;
  }

  .project .geo6 {
    display: block;
    position: absolute;
    width: 14.7%;
    height: 13.39%;
    top: 2560px;
    left: 0;
  }

  .project .geo7 {
    display: block;
    position: absolute;
    width: 6.09%;
    height: 12.39%;
    top: 2560px;
    left: 49.44%;
  }

  .project .teal {
    position: absolute;
    display: block;
    width: 15.42%;
    height: 222px;
    top: 3410px;
    left: 35.83%;
  }

  .project h2 {
    position: absolute;
    width: 27.64%;
    height: 110px;
    left: 0;
    top: 1327px;
    margin: 0;
    font-family: 'Playfair_Display', 'Times New Roman', Times, serif;
    font-style: normal;
    font-weight: 400;
    font-size: 110px;
    line-height: 100%;
    color: #1a2236;
    transform: rotate(-90deg);
    zoom: normal;
  }

  .pc {
    display: block;
    position: absolute;
    width: 66.67%;
    height: 558px;
    top: 1187px;
    left: 33.33%;
    border: solid 5px #1a2236;
  }

  .pc1 {
    display: block;
    position: absolute;
    width: 32.29%;
    height: 270px;
    top: 1825px;
    left: 0;
    border: solid 5px #1a2236;
  }

  .pc2 {
    display: block;
    position: absolute;
    width: 55.56%;
    height: 465px;
    top: 2095px;
    left: 0;
    border: solid 5px #1a2236;
  }

  .pc3 {
    display: block;
    position: absolute;
    width: 32.29%;
    height: 270px;
    top: 2560px;
    left: 55.49%;
    border: solid 5px #1a2236;
  }

  .pc4 {
    display: block;
    position: absolute;
    width: 32.29%;
    height: 270px;
    top: 2015px;
    left: 67.71%;
    border: solid 5px #1a2236;
  }

  .pc5 {
    display: block;
    position: absolute;
    width: 32.29%;
    height: 270px;
    top: 1745px;
    left: 67.71%;
    border: solid 5px #1a2236;
  }

  .box {
    display: none;
  }

  .box01 {
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    width: 66.67%;
    height: 353px;
    top: 1392px;
    left: 33.33%;
    background: rgba(26, 34, 54, 0.95);
    backdrop-filter: blur(24px);
  }

  .box01 p {
    position: relative;
    width: 100%;
    height: 48px;
    margin-block-start: 60px;
    margin-block-end: 16px;
    margin-inline-start: 60px;
    margin-inline-end: 36px;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 60px;
    line-height: 80%;
    color: #fff;
  }

  .box01 button {
    appearance: auto;
    writing-mode: horizontal-tb;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 80%;
    text-transform: none;
    text-indent: 0;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    align-items: flex-start;
    cursor: default;
    box-sizing: border-box;
    background-color: #98dede;
    margin: 0;
    padding: 1px 6px;
    border-width: 2px;
    border-style: outset;
    border-color: #98dede;
    border-image: initial;
  }

  .box01 .html {
    position: absolute;
    width: 132px;
    height: 40px;
    top: 142px;
    left: 60px;
  }

  .box01 .ruby {
    position: absolute;
    width: 169px;
    height: 40px;
    top: 142px;
    left: 212px;
  }

  .box01 .js {
    position: absolute;
    width: 144px;
    height: 40px;
    top: 142px;
    left: 401px;
  }

  .box01 .pjbutton {
    display: flex;
    position: absolute;
    width: 212px;
    height: 51px;
    left: 60px;
    top: 242px;
    background-color: #fff;
    border: solid #fff;
  }

  .box01 .pjbutton .actbutton {
    position: absolute;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
    text-align: center;
    color: #1a2236;
    cursor: pointer;
    text-decoration: none;
  }

  .box01 .narrow {
    position: absolute;
    width: 20.57px;
    height: 15.35px;
    top: 17.95px;
    left: 174px;
  }

  .box02 {
    display: block;
    flex-wrap: wrap;
    position: absolute;
    width: 32.29%;
    height: 218px;
    top: 1797px;
    left: 67.71%;
    background: rgba(26, 34, 54, 0.95);
    backdrop-filter: blur(24px);
  }

  .box03 {
    display: block;
    flex-wrap: wrap;
    position: absolute;
    width: 32.29%;
    height: 218px;
    top: 2067px;
    left: 67.71%;
    background: rgba(26, 34, 54, 0.95);
    backdrop-filter: blur(24px);
  }

  .box04 {
    display: block;
    flex-wrap: wrap;
    position: absolute;
    width: 32.29%;
    height: 218px;
    top: 1877px;
    left: 0;
    background: rgba(26, 34, 54, 0.95);
    backdrop-filter: blur(24px);
  }

  .box05 {
    display: block;
    flex-wrap: wrap;
    position: absolute;
    width: 32.29%;
    height: 218px;
    top: 2612px;
    left: 55.49%;
    background: rgba(26, 34, 54, 0.95);
    backdrop-filter: blur(24px);
  }

  .box02 p,
  .box03 p,
  .box04 p,
  .box05 p {
    position: absolute;
    width: 100%;
    height: auto;
    margin-block-start: 30px;
    margin-block-end: 24px;
    margin-inline-start: 30px;
    margin-inline-end: 20px;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    line-height: 80%;
    color: #fff;
  }

  .box01 ul,
  .box02 ul,
  .box03 ul,
  .box04 ul,
  .box05 ul,
  .box06 ul {
    list-style: none;
    zoom: normal;
  }

  .box02 button,
  .box03 button,
  .box04 button,
  .box05 button {
    appearance: auto;
    writing-mode: horizontal-tb;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 80%;
    text-transform: none;
    text-indent: 0;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    align-items: flex-start;
    cursor: default;
    box-sizing: border-box;
    background-color: #98dede;
    margin: 0;
    padding: 1px 6px;
    border-width: 2px;
    border-style: outset;
    border-color: #98dede;
    border-image: initial;
  }

  .box02 .html,
  .box03 .html,
  .box04 .html,
  .box05 .html {
    position: absolute;
    width: 132px;
    height: 40px;
    top: 82px;
    left: 30px;
  }

  .box02 .ruby,
  .box03 .ruby,
  .box04 .ruby,
  .box05 .ruby {
    position: absolute;
    width: 169px;
    height: 40px;
    top: 82px;
    left: 177px;
  }

  .box02 .js,
  .box03 .js,
  .box04 .js,
  .box05 .js {
    position: absolute;
    width: 57px;
    height: 40px;
    top: 82px;
    left: 361px;
  }

  .box02 .pjbutton,
  .box03 .pjbutton,
  .box04 .pjbutton,
  .box05 .pjbutton {
    display: flex;
    position: absolute;
    width: 212px;
    height: 51px;
    left: 30px;
    top: 137px;
    background-color: #fff;
    border: solid #fff;
  }

  .box02 .pjbutton .actbutton,
  .box03 .pjbutton .actbutton,
  .box04 .pjbutton .actbutton,
  .box05 .pjbutton .actbutton {
    position: absolute;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
    text-align: center;
    color: #1a2236;
    cursor: pointer;
    text-decoration: none;
  }

  .box02 .narrow,
  .box03 .narrow,
  .box04 .narrow,
  .box05 .narrow {
    position: absolute;
    width: 20.57px;
    height: 15.35px;
    top: 17.95px;
    left: 174px;
  }

  .box06 {
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    width: 55.56%;
    height: 365px;
    top: 2195px;
    left: 0;
    background: rgba(26, 34, 54, 0.95);
    backdrop-filter: blur(24px);
  }

  .box06 p {
    position: relative;
    width: 100%;
    height: 48px;
    margin-block-start: 60px;
    margin-block-end: 16px;
    margin-inline-start: 60px;
    margin-inline-end: 36px;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 60px;
    line-height: 80%;
    color: #fff;
  }

  .box06 button {
    appearance: auto;
    writing-mode: horizontal-tb;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 80%;
    text-transform: none;
    text-indent: 0;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    align-items: flex-start;
    cursor: default;
    box-sizing: border-box;
    background-color: #98dede;
    margin: 0;
    padding: 1px 6px;
    border-width: 2px;
    border-style: outset;
    border-color: #98dede;
    border-image: initial;
  }

  .box06 .html {
    position: absolute;
    width: 132px;
    height: 40px;
    top: 142px;
    left: 60px;
  }

  .box06 .ruby {
    position: absolute;
    width: 169px;
    height: 40px;
    top: 142px;
    left: 212px;
  }

  .box06 .js {
    position: absolute;
    width: 144px;
    height: 40px;
    top: 142px;
    left: 401px;
  }

  .box06 .pjbutton {
    display: flex;
    position: absolute;
    width: 212px;
    height: 51px;
    left: 60px;
    top: 242px;
    background-color: #fff;
    border: solid #fff;
  }

  .box06 .pjbutton .actbutton {
    position: absolute;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
    text-align: center;
    color: #1a2236;
    cursor: pointer;
    text-decoration: none;
  }

  .box06 .narrow {
    position: absolute;
    width: 20.57px;
    height: 15.35px;
    top: 17.95px;
    left: 174px;
  }

  .box1 {
    position: absolute;
    width: 30.97%;
    height: 336px;
    top: 3074px;
    left: 57.92%;
  }

  .box1 h2 {
    position: absolute;
    width: 295px;
    height: 110px;
    top: 0;
    left: 0;
    transform: rotate(0deg);
    zoom: normal;
  }

  .box1 .phrase {
    position: absolute;
    width: 446px;
    height: 84px;
    top: 140px;
    left: 0;
    right: 160px;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #1a2236;
  }

  .box1 .pjbutton {
    display: flex;
    position: relative;
    width: 254px;
    height: 70px;
    left: 0;
    top: 266px;
    background-color: #1a2236;
  }

  .pjbutton .actbutton1 {
    position: absolute;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    top: 22px;
    left: 55px;
  }

  .narrow0 {
    position: absolute;
    top: 23px;
    left: 175px;
  }

  .project #square1 {
    position: absolute;
    width: 289px;
    height: 289px;
    left: 160px;
    top: 3046px;
    background: #1c528a;
  }

  .project #square2 {
    position: absolute;
    width: 289px;
    height: 289px;
    left: 449px;
    top: 3046px;
    background: #e2505c;
  }

  .project #square3 {
    position: absolute;
    width: 289px;
    height: 289px;
    left: 160px;
    top: 3335px;
    background: #febf52;
  }

  .project .chart {
    position: absolute;
    width: 178px;
    height: 135px;
    left: 50px;
    top: 101px;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 27px;
    letter-spacing: -0.0525em;
    color: #fff;
  }

  .project h3 {
    position: relative;
    width: 116px;
    height: 30px;
    left: 50px;
    top: 50px;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 20px;
    line-height: 30px;
    color: #fff;
  }

  .project #narrow1 {
    position: absolute;
    width: 102px;
    height: 102px;
    top: 187px;
    left: 187px;
  }

  .project #narrow2 {
    position: absolute;
    width: 102px;
    height: 102px;
    top: 187px;
    left: 187px;
  }

  .project #narrow3 {
    position: absolute;
    width: 102px;
    height: 102px;
    top: 187px;
    left: 187px;
  }

  /* conatct form */
  .ux {
    position: absolute;
    width: 100%;
    height: 950px;
    top: 3782px;
    left: 0;
    right: 0;
    background: #f9f9fa;
  }

  #uxlogo {
    display: none;
  }

  .ux .geo8 {
    position: absolute;
    display: block;
    width: 18.27%;
    height: 350.84px;
    top: 0;
    left: 0;
  }

  .ux .geo9 {
    position: absolute;
    display: block;
    width: 24.36%;
    height: 350.84px;
    top: 596px;
    left: 75.63%;
  }

  .ux h2 {
    position: absolute;
    width: 38.06%;
    height: 110px;
    top: 168px;
    left: 446px;
    margin: 0;
    padding: 0;
    font-family: 'Playfair_Display', 'Times New Roman', Times, serif;
    font-style: normal;
    font-weight: 400;
    font-size: 110px;
    line-height: 100%;
    text-align: center;
    color: #1a2236;
    zoom: normal;
  }

  .ux .phrase {
    position: absolute;
    margin: 0;
    padding: 0;
    max-width: 38.06%;
    max-height: 63px;
    overflow: hidden;
    top: 318px;
    left: 446px;
    right: 446px;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: -0.01em;
    color: #1a2236;
  }

  .data {
    position: absolute;
    display: block;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 37.64%;
    height: 374px;
    list-style-type: none;
    top: 441px;
    left: 449px;
    right: 449px;
    margin: 0;
    padding: 0;
  }

  .liname {
    flex: 1;
    position: absolute;
    width: 254px;
    height: 60px;
    top: 0;
    left: 0;
    background: #f9f9fa;
    border-style: none;
  }

  .name {
    position: absolute;
    width: 254px;
    height: 60px;
    left: 0;
    top: 23px;
    border-radius: 4px;
    background: #fff;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #1a2236;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
    overflow: hidden;
  }

  .name input {
    position: absolute;
    top: 18px;
    left: 20px;
  }

  .data .namelabel {
    position: absolute;
    width: 66px;
    height: 1px;
    left: 0;
    top: 4px;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #7d7c84;
  }

  .liemail {
    flex: 1;
    position: absolute;
    width: 253px;
    height: 60px;
    top: -8px;
    left: 289px;
    background: #f9f9fa;
    border-style: none;
  }

  .data .emaillabel {
    position: absolute;
    width: 64px;
    height: 18px;
    left: 0;
    top: 0;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #7d7c84;
  }

  .email {
    position: absolute;
    width: 253px;
    height: 60px;
    top: 23px;
    left: 0;
    border-radius: 4px;
    background: #fff;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #1a2236;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
    overflow: hidden;
  }

  .email input {
    position: absolute;
    top: 18px;
    left: 19.55px;
  }

  .limsg {
    position: absolute;
    width: 542px;
    height: 140px;
    top: 92px;
    left: 0;
    margin: 0;
    padding: 0;
    border-style: none;
    background: #f9f9fa;
  }

  #msg {
    position: absolute;
    width: 542px;
    height: 140px;
    top: 22px;
    border-radius: 4px;
    background: #fff;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
  }

  .msglabel {
    display: block;
    position: absolute;
    width: 140.83px;
    height: 18px;
    top: 0;
    left: 0;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #7d7c84;
  }

  #msg textarea {
    position: absolute;
    width: 500px;
    height: 100px;
    top: 18px;
    left: 20px;
    border: none;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #7d7c84;
  }

  small {
    position: relative;
    top: 295px;
    left: 170px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: red;
  }

  .data .txtbutton {
    position: absolute;
    width: 254px;
    height: 70px;
    top: 300px;
    left: 144px;
  }

  footer {
    display: block;
    position: absolute;
    width: 100%;
    height: 123px;
    top: 947px;
    background-color: #1a2236;
  }

  footer .pjbutton1 {
    position: absolute;
    max-width: 165px;
    height: 22px;
    top: 40px;
    left: 160px;
    border-radius: 0;
  }

  footer .actbutton2 {
    position: absolute;
    width: 137px;
    height: 24px;
    top: 0;
    left: 67px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #92dcdc;
  }

  .narrow1 {
    position: absolute;
    width: 22px;
    height: 22px;
    top: 0;
    left: 215px;
  }

  .icons {
    position: absolute;
    flex: 1;
    max-width: 288px;
    height: 24px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    gap: 29px;
    top: 0;
    left: 840px;
  }

  /* button interactions */
  .txtbutton:hover {
    background: #fff;
    border: 1px solid #1a2236;
    box-sizing: border-box;
    color: #1a2236;
  }

  .txtbutton:disabled {
    background: #1a2236;
    border: 1px solid #1a2236;
    box-sizing: border-box;
  }

  .txtbutton:active {
    background: #fff;
    border: 2px solid #1a2236;
    box-sizing: border-box;
  }

  /*  popup-window desk */
  .popup-window {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f9f9fa;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    overflow-x: hidden;
    border: 70px solid rgba(26, 34, 54, 0.95);
    z-index: 10;
  }

  .close-popup {
    justify-content: flex-end;
    margin: 73px 61px;
    border: none;
    background-color: transparent;
  }

  .close-popup img {
    padding: 9px 8px;
  }

  .popup-title {
    position: absolute;
    width: 726px;
    height: 48px;
    margin-left: 60px;
    margin-top: 60px;
    margin-right: 421px;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 60px;
    line-height: 80%;
    color: #1a2236;
  }

  .popup-window ul {
    position: relative;
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 20px;
    top: 0;
    margin-block-start: 0;
    margin-block-end: 18px;
    margin-inline-start: 60px;
    margin-inline-end: 755px;
    zoom: normal;
    list-style: none;
  }

  .popup-window ul button {
    appearance: auto;
    writing-mode: horizontal-tb;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 10.3334px;
    line-height: 80%;
    text-transform: none;
    text-indent: 0;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    align-items: flex-start;
    cursor: default;
    box-sizing: border-box;
    background-color: #fff;
    margin: 0;
    padding: 1px 6px;
    border-width: 0.516669px;
    border-style: outset;
    border-color: #1a2236;
    border-image: initial;
  }

  .popup-window ul > .html {
    position: absolute;
    width: 132px;
    height: 40px;
    left: 0;
  }

  .popup-window ul > .ruby {
    position: absolute;
    width: 169px;
    height: 40px;
    left: 79px;
  }

  .popup-window > .js {
    position: absolute;
    width: 144px;
    height: 40px;
    left: 401px;
  }

  .carousel__contenedor {
    position: relative;
    width: 1169px;
    height: 685px;
    margin: 18px 20px;
    overflow: hidden;
  }

  .carousel__anterior {
    position: absolute;
    display: block;
    width: 30px;
    height: 53px;
    border: none;
    top: calc(40%);
    cursor: pointer;
    line-height: 12.56px;
    text-align: center;
    background: none;
    color: #fff;
    opacity: 20%;
  }

  .carousel__siguiente {
    position: absolute;
    display: block;
    width: 30px;
    height: 53px;
    border: none;
    top: calc(40%);
    left: 1136px;
    cursor: pointer;
    line-height: 12.56px;
    text-align: center;
    background: none;
    color: #fff;
    opacity: 20%;
  }

  .carousel__anterior:hover,
  .carousel__siguiente:hover {
    opacity: 100%;
  }

  .carousel__lista {
    position: absolute;
    margin: 0;
    display: flex;
    overflow: hidden;
  }

  .carousel__elemento img {
    width: 1179px;
    height: 685px;
    margin: 0;
    padding: 0;
  }

  .carousel__indicadores {
    display: flex;
    flex-direction: row;
    width: 1179px;
    height: 171px;
    margin: 0 20px;
    padding: 0;
    overflow: hidden;
  }

  .carousel__indicador img {
    width: 293px;
    height: 117px;
  }

  .popup-p {
    position: absolute;
    width: 700px;
    height: 216px;
    justify-self: center;
    align-self: center;
    top: 1148px;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    color: #1a2236;
  }

  .see-buttons {
    display: grid;
    grid-template-columns: auto auto;
    gap: 40px;
    position: absolute;
    width: 522px;
    height: 51px;
    top: 1404px;
    left: 225px;
  }

  .see-live {
    justify-content: space-around;
    align-items: center;
    width: 246px;
    height: 51px;
    margin: 0;
    border: 1px solid #1a2236;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
    background-color: #fff;
    text-decoration: none;
    color: #1a2236;
  }

  .see-source {
    justify-content: space-around;
    align-items: center;
    width: 246px;
    height: 51px;
    margin: 0;
    border: 1px solid #1a2236;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
    background-color: #fff;
    text-decoration: none;
    color: #1a2236;
  }

  .narrow-buttons {
    display: grid;
    grid-template-columns: auto auto;
    gap: 372px;
    position: absolute;
    width: 522px;
    height: 51px;
    top: 1575px;
    left: 225px;
    padding-bottom: 109px;
  }

  .previus {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 183px;
    height: 51px;
    border: none;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
    background-color: #fff;
  }

  .next {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 161px;
    height: 51px;
    border: none;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
    background-color: #fff;
  }

  /* button interactions */
  .see-source:hover,
  .see-live:hover {
    background: #1a2236;
    border: 1px solid #fff;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
  }

  .see-source:disabled,
  .see-live:disabled {
    background: #fff;
    border: 1px solid #1a2236;
    box-sizing: border-box;
  }

  .see-source:active,
  .see-live:active {
    background: #fff;
    border: 2px solid #1a2236;
    box-sizing: border-box;
  }

  /*
    Animations and transitions
    PAIR PROGRAMING ACTIVITY

    1. Add scale fuction to icons in footer.
    2. Add animations to .box01 to .box06.
    */
  .icons img:hover {
    transform: scale(0.7);
  }

  .box01,
  .box02,
  .box03,
  .box04,
  .box05,
  .box06 {
    transition: all 500ms ease-out;
    opacity: 0;
    visibility: visible;
  }

  figure:hover > .box01,
  figure:hover > .box02,
  figure:hover > .box03,
  figure:hover > .box04,
  figure:hover > .box05,
  figure:hover > .box06 {
    opacity: 1;
    visibility: visible;
    cursor: pointer;
  }

  @keyframes project {
    from {
      width: 0%;
    }

    50% {
      width: 150%;
    }

    75% {
      width: 150%;
    }

    to {
      width: 100%;
    }
  }

  .hidePopup {
    display: none;
  }
}