@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  /*background: hsl(30, 66%, 89%);*/
  background: rgb(49, 242, 249);
  height: 100vh;
  overflow: hidden;
}

.marquee {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  width: 250px;
  padding: 2px 4px;
  background-color: #f7fc5d;
  resize: horizontal;
  container-type: inline-size;
  color: rgb(245, 7, 7);
  font-size: 20px;
}

h3{
  color: rgb(11, 81, 246);
  font-size: 20px;
}
.marquee > * {
  animation: marquee 5s linear infinite both alternate;
}

@keyframes marquee {
  to {
    transform: translateX(min(100cqw - 100%, 0px));
  }
}