/* Table */
.table {
  margin-top: 2.2em;
  border-bottom: 45px solid #ffffff;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-radius: 15px;
}

.sm-table {
  margin-top: 2.2em;
  border-bottom: 45px solid #ffffff;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-radius: 15px;
}

.sm-front-table {
  margin-top: -0.8em;
  height: 35px;
  background-color: #cecece;
  border-radius: 5px;
}

.front-table {
  margin-top: -1.2em;
  width: 100%;
  height: 35px;
  background-color: #cecece;
  border-radius: 5px;
}

.side-table {
  width: 90%;
  height: 30px;
  background-color: #282828;
  border-radius: 4px;
  box-shadow: inset 4px 3px 1px #000;
}

.screw {
  position: relative;
}

.screw-1 {
  position: absolute;
  margin-top: -26px;
}

.screw-2 {
  position: absolute;
  margin-top: -26px;
}

/* Keyboard */
.keyboard {
  position: relative;
  z-index: 1;
}

.keyboard-top {
  position: absolute;
  width: 38%;
  top: -3em;
  left: 14em;
  border-left: 25px solid transparent;
  border-bottom: 25px solid #2d2d2d;
  border-right: 25px solid transparent;
  border-top-left-radius: 30px;
}

.keyboard-front {
  position: absolute;
  margin-top: -1.5em;
  width: 38%;
  height: 6px;
  left: 14em;
  background-color: #615a5a;
  border-radius: 5px;
}

/* Small device keyboard */
.sm-keyboard-top {
  position: absolute;
  width: 60%;
  top: -3em;
  left: 5em;
  border-left: 25px solid transparent;
  border-bottom: 25px solid #2d2d2d;
  border-right: 25px solid transparent;
  border-top-left-radius: 30px;
}

.sm-keyboard-front {
  position: absolute;
  margin-top: -1.5em;
  width: 60%;
  height: 6px;
  left: 5em;
  background-color: #615a5a;
  border-radius: 5px;
}

/* Mouse */
.mouse {
  position: relative;
}

.mouse-top {
  position: absolute;
  height: 30px;
  width: 50px;
  margin-top: -3em;
  right: -20em;
  background-color: #121212;
  border-top-right-radius: 40px;
  border-top-left-radius: 40px;
}

.mouse-front {
  position: absolute;
  margin-top: -1.5em;
  width: 50px;
  height: 6px;
  right: -20em;
  background-color: #a9a5a5;
  border-radius: 5px;
}

/* Medium mouse */
.md-mouse-top {
  position: absolute;
  height: 30px;
  width: 50px;
  margin-top: -3em;
  background-color: #121212;
  border-top-right-radius: 40px;
  border-top-left-radius: 40px;
}

.md-mouse-front {
  position: absolute;
  margin-top: -1.5em;
  width: 50px;
  height: 6px;
  background-color: #a9a5a5;
  border-radius: 5px;
}

/* Small Mouse */

.sm-mouse-top {
  position: absolute;
  height: 30px;
  width: 40px;
  margin-left: 130px;
  margin-top: -3.5em;
  background-color: #121212;
  border-top-right-radius: 50px;
  border-top-left-radius: 50px;
}

.sm-mouse-front {
  position: absolute;
  margin-top: -2em;
  width: 40px;
  height: 6px;
  background-color: #a9a5a5;
  border-radius: 5px;
  margin-left: 130px;
}

/* Cup */

.cup {
  position: absolute;
  margin-top: -6.2em;
  z-index: 1;
}

/* Design Pencil */
.pencil-wrapper {
  position: relative;
}

.pencils-box {
  position: absolute;
  left: 8em;
  margin-top: -7.5em;
  height: 80px;
  width: 60px;
  height: 0;
  border-left: 20px solid transparent;
  border-right: -20px solid transparent;
  border-top: 90px solid #ffb20f;
  z-index: 2;
}

.pencils-1 {
  position: absolute;
  margin-top: -11.5em;
  margin-left: 8em;
  width: 9px;
  rotate: -15deg;
  height: 95px;
  background-color: rgb(103, 95, 95);
  z-index: 0;
  border-radius: 6px;
}

.pencils-2 {
  position: absolute;
  margin-top: -10.5em;
  margin-left: 9.8em;
  width: 9px;
  rotate: 14deg;
  height: 55px;
  background-color: #363434;
  z-index: 0;
  border-radius: 6px;
}

.pencils-3 {
  position: absolute;
  margin-top: -11.5em;
  margin-left: 10.5em;
  width: 9px;
  rotate: 15deg;
  height: 95px;
  background-color: rgb(198, 45, 45);
  z-index: 0;
  border-radius: 6px;
}

/* Contact Phone */
.phone {
  position: relative;
  z-index: 1;
}

.phone-top {
  position: absolute;
  width: 35%;
  top: -3.4em;
  border-bottom: 25px solid #000;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-radius: 5px;
}

.phone-side {
  position: absolute;
  width: 33%;
  top: -2em;
  margin-left: 1.5px;
  height: 2px;
  background-color: #616161;
  border-radius: 5px;
}

.height {
  position: absolute;
  width: 2px;
  top: -6em;
  margin-left: 19px;
  height: 40px;
  border: 2px dotted #000;
  border-radius: 5px;
}

.circle {
  position: absolute;
  top: -7.5em;
  margin-left: -19px;
  height: 30px;
  border-radius: 5px;
  z-index: 6;
  animation: heartbeat 3s infinite ease-in-out;
}

@keyframes heartbeat {
  0% {
    transform: scale(0.9);
  }
  20% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.9);
  }
  60% {
    transform: scale(1);
  }
  80% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(0.9);
  }
}

.circle p {
  font-size: smaller;
}

.contact-btn {
  background-color: #102e4a;
  border-radius: 5px;
  color: #fff;
}