:root {
  --background-color: #f0ecdf;
  --font-color: #ef3b5d;
  --sender-color: #f36d85;
  --heading-font: "Source Serif Pro";
  --text-font: "Quicksand";
}

* {
  padding: 0;
  margin: 0;
  touch-action: manipulation;
}

body {
  background: var(--background-color);
  color: var(--font-color);
}

.client-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

.big-screen-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: row;

  height: 100lvh;
}

.left-align,
.right-align {
  width: 50%;
  height: 100%;
}

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

.qrcode-container {
  background-image: url(/qrcode.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;

  height: 70%;
  width: 70%;
}

h1 {
  font-family: var(--heading-font);
  font-weight: 700;
}

p,
a,
button {
  font-family: var(--text-font);
}

#incoming-messages-wrapper {
  height: 70lvh;
  overflow-y: scroll;
  overflow-x: hidden;
}

.big-screen-wrapper #incoming-messages-wrapper {
  height: 90lvh;
}

#incoming-messages {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;

  padding: 10px;
}

#incoming-messages .message-left {
  align-self: flex-start;
}

.message {
  margin: 5px 0;

  display: flex;
  align-items: center;
}

.message-right {
  text-align: right;
  flex-direction: row;
  justify-content: flex-end;
}

.message-left {
  text-align: left;
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.message-left .message-text {
  border-bottom-left-radius: 0;
}

.message-right .message-text {
  border-bottom-right-radius: 0;
}

.sender-name {
  font-size: 0.8rem;
  margin: 0 20px 0 20px;
  padding: 0 0 3px 0;

  color: var(--sender-color);
}

.message-text {
  background: var(--background-color);
  color: var(--font-color);
  border: 2px solid var(--font-color);
  text-shadow: 1px 1px 1px black;
  padding: 10px 20px;
  border-radius: 15px;
  font-size: 1.5rem;
}

.profile-picture {
  width: 55px;
  height: 55px;

  margin: 0 10px 0 10px;
}

.bottom-panel {
  position: absolute;
  bottom: 0;

  width: 100%;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

#reply-form {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;

  padding: 0 0 10px 0;
}

#reply-form fieldset {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;

  outline: none;
  border: none;
}

#reply-field {
  font-size: 1rem;

  outline: none;
  border: none;

  padding: 13px 20px;
  border-radius: 15px;
}

#send-reply-button {
  font-size: 1rem;

  background: var(--background-color);
  color: var(--font-color);

  margin: 0 0 0 10px;
  border: 2px solid var(--font-color);
  border-radius: 15px;
  padding: 10px 30px;
  text-decoration: none;
  font-size: 1.1em;
  cursor: pointer;
}

#send-reply-button.disabled {
  border-color: gray;
  color: gray;
}

#error-message-text {
  margin: 0 0 5px 20px;
}

.active-clients {
  font-size: 1.5rem;
  font-weight: 500;

  align-self: center;

  text-align: center;

  margin: 10px 0 0 0;
}

.active-clients.big {
  font-size: 3rem;
}

.quick-pick-buttons {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;

  padding: 0 0 10px 0;
}

.quick-pick-buttons button {
  width: 50px;
  height: 50px;

  background-color: var(--font-color);

  margin: 0 0 0 10px;

  font-size: 1.6rem;
  border-radius: 15px;

  outline: none;
  border: none;
}

.quick-pick-buttons button:hover {
  cursor: pointer;
}

.hide {
  display: none;
}

.message-text {
  animation: pop-in 0.2s ease-out;
}

#text-active-clients {
  animation: wiggle 0.5s ease-out;
  animation-iteration-count: 1;
  display: inline-block;
}

@keyframes pop-in {
    0% {
        transform: scale(0);
    }
    80% {
      transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes wiggle {
    0% {
        transform: rotate(0deg) scale(1);
    }
    25% {
        transform: rotate(10deg) scale(1.1);
    }
    50% {
        transform: rotate(-10deg) scale(2.5);
    }
    75% {
        transform: rotate(10deg) scale(1.1);
    }
    100% {
        transform: rotate(0deg) scale(1.0);
    }
}