@font-face {
  font-family: ugh;
  src: url(fonts/ugh.ttf);
}

* {
  font-family: ugh;
}

body {
  background: blue;
  color: white;
  max-height: 100vh;
  max-width: 100%;
  overflow: hidden;
  cursor: none;
}

@keyframes rotate {
  0% {
    transform: rotate(69deg);
  }
  25% {
    transform: rotate(1deg);
  }
  50% {
    transform: rotate(240deg);
  }
  100% {
    transform: rotate(360deg) een;
  }
}

@keyframes wobble {
  from {
    transform: rotate(4deg) scale(1.05);
  }

  to {
    transform: rotate(8deg) scale(1.1);
  }
}

@keyframes shake {
  from {
    transform: rotate(-6deg);
  }

  to {
    transform: rotate(-2deg);
  }
}

.header {
  margin: 4rem 3rem 0 3rem;
  display: flex;
  justify-content: space-between;
}

.header-left {
  animation-name: rotate;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.header-right {
  display: flex;
  gap: 1rem;
}

.header-right-btn {
  cursor: not-allowed;
  background: palevioletred;
  padding: 10px;
  height: fit-content;
  font-size: 0.9rem;
  color: white;
}

.btn-one {
  transform: skewY(15deg);
}

.btn-two {
  transform: skewY(-25deg);
}

.header-right-btn:active {
  transform: scale(0.95);
}

#main-container {
  background: brown;
  height: 65vh;
  margin-top: 3rem;
  border: 10px black solid;
  display: flex;
  flex-direction: column;
  padding: 3rem;
}

.chat-area {
  height: 80vh;
  background: red;
  position: relative;
  display: flex;
  flex-direction: column;
}

.chat-input {
  width: 100%;
  display: flex;
}

.chat-input input {
  width: 100%;
  box-sizing: border-box;
  font-size: 2rem;
}

.submit {
  background: blue;
  color: white;
  cursor: pointer;
}

.submit:active {
  transform: scale(0.8);
}

.userMessageDiv {
  background: white;
  color: black;
  border-radius: 100%;
  padding: 0.6rem 0.9rem;
  max-width: 45%;
  align-self: flex-end;
  margin: 0.5rem;
  color: black;
  text-align: center;
  position: absolute;
  transform: rotate(6deg) scale(1.05);
  box-shadow: 6px 6px 0 black;
  animation: wobble 0.3s infinite alternate;
}

.GPTMessageDiv {
  background: yellow;
  color: blue;
  border-radius: 100%;
  padding: 0.6rem 0.9rem;
  max-width: 45%;
  align-self: flex-start;
  margin: 0.5rem;
  color: black;
  text-align: center;
  position: absolute;
  box-shadow: -6px 6px 0 black;
  transform: rotate(-5deg) scale(0.95);
  animation: shake 0.15s infinite alternate;
}

.cursor {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 128px;
  transform: translate(-50%, -50%);
  height: 128px;
  z-index: 99;
}