*,
::before,
::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

:root {
  /* Khaki */
  --khaki-100: #ffa500;

  /* Scarlet red */
  --scarletRed-100: #e91e63;
}

/* ---------- */
/* Main Style */
/* ---------- */
.box {
  position: relative;
  width: 800px;
  height: 250px;
  margin: auto;
  margin-top: 2rem;
  background-color: var(--scarletRed-100);
  overflow: hidden;
  z-index: -3;
  font-family: 'Cairo', sans-serif;
  border-top: 6px solid;
  border-bottom: 6px solid;
  border-color: var(--scarletRed-100);
}

.box::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border: 44rem solid;
  border-color: transparent white transparent transparent;
  z-index: -2;
}

.box::after {
  content: '';
  position: absolute;
  right: 6rem;
  border: 125px solid;
  border-color: transparent var(--scarletRed-100) transparent transparent;
  z-index: -1;
}

p.box__content {
  position: absolute;
  top: 50%;
  left: 9rem;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  padding: 0.5rem;
  font-weight: bold;
  color: white;
  background-color: var(--scarletRed-100);
}

p.box__content::before {
  content: 'Elzero Web School';
  position: absolute;
  left: 8.2rem;
  width: 11rem;
  color: black;
  font-weight: 400;
}

p.box__content::after {
  content: '';
  position: absolute;
  width: 2rem;
  height: 2rem;
  left: 26.3rem;
  top: 0.4rem;
  border-radius: 50%;
  background-color: var(--khaki-100);
}
/* --------------- */
/* Personal Footer */
/* --------------- */

.personal-footer {
  width: 800px;
  margin: 3rem auto;
  font-family: 'Cairo', sans-serif;
  line-height: 1.5;
  text-align: center;
}
.platform {
  font-weight: 600;
  color: #2eca7f;
}

.coder {
  font-weight: 600;
  color: #cf2937;
}

a {
  text-decoration: none;
}