@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body {
  font-family: 'Press Start 2P';
}

.parallelogram,
.parallelogram-inverted {
  position: relative;
}
.parallelogram::before {
  content: '';
  position: absolute;
  clip-path: polygon(
    0 90%,
    35% 90%,
    65% 60%,
    100% 60%,
    100% 70%,
    65% 70%,
    35% 100%,
    0 100%
  );
  background-color: #950000;
  z-index: 99;
  width: 100%;
  height: 100%;
}

.parallelogram-inverted::before {
  content: '';
  position: absolute;
  clip-path: polygon(
    0 90%,
    35% 90%,
    65% 60%,
    100% 60%,
    100% 70%,
    65% 70%,
    35% 100%,
    0 100%
  );
  clip-path: polygon(0 70%, 35% 70%, 65% 100%, 0 100%);
  background-color: #ff0000;
  z-index: 99;
  width: 100%;
  height: 100%;
}

.triangle {
  width: 0;
  height: 0;
  border-top: 23px solid transparent;
  border-bottom: 23px solid transparent;
  border-left: 23px solid black;
}

.inner-triangle {
  position: relative;
  top: -20px;
  left: -22px;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #ffde00;
}

textarea:focus,
input:focus {
  outline: none;
}

.triangle-up {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid white;
}
.triangle-down {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid white;
}
.triangle-left {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid white;
}
.triangle-right {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid white;
}