html {
  font-size: 16px;
}

body {
  height: 100vh;
  margin: 0;
  font-family: far29,sahel, lalezar, "b titr";
  background: #f0f0f0;
  color: #212428;
}

body {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 1rem;
}

#wrp {
  width: 100%;
}

* {
  box-sizing: border-box;
}

input {
  display: block;
  width: 100%;
  font-family: var(--family);
  font-weight: var(--weight, 400);
  background: transparent;
  border: none;
  color: inherit;
}
.font {
  margin-bottom: 1rem;
  padding: 0.5rem;
  font-family: var(--family);
}

.font-header {
  display: flex;
  justify-content: space-between;
  background: linear-gradient(currentColor,currentColor) no-repeat center/ 100% 1px;
  color: #888a8c;
}

.font-copy {
  cursor: pointer;
  line-height: 1;
  padding: 0.25em 0.5em;
  border-radius: 20rem;
  background: #f0f0f0;
  color: #000;
}
.font:hover > .font-header > .font-copy {
  background: blueviolet;
  color: #fff;
  transition: 125ms ease-in-out;
}

.font-label {
  /*! opacity: 0.5; */
  user-select: all;
  background: #f0f0f0;
  padding-left: .5em;
}

.font-input {
  font-size: 2rem;

}
.tools {
  top: 1rem;
  left: 1rem;
}
.tool {
  display: flex;
  gap: 1rem;
}