@import url("input-area.css");
@import url("info-area.css");

:root {
  --main-font: "Poppins", sans-serif;
  /* Primary */

--purple: #854dff;
--light-red: #ff5757;

/* Neutral */

--white: #ffffff;
--off-white: #f0f0f0;
--light-grey: #dbdbdb;
--smokey-grey: #716f6f;
--off-black: #141414;
}

body {
  font-family: var(--main-font);
  box-sizing: border-box;
}

.container {
  background-color: var(--light-grey);
  width: 100vw;
  height: 100vh;
  padding: 5rem 0; /*draft, need to correct .main align*/
}

.main {
  padding: 2rem;
  background-color: var(--white);
  width: 70%;
  margin: auto;
  border-radius: 15px;
  border-bottom-right-radius: 80px;
}

.input-area {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .main {
    max-width: 500px;
  }
}