@import "https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap";


:root {
--note:#FFEEDD;
--background:#FFD8BE;
--black:#0e0e0e;
--button-primary:#766ac3;
--button-secondary:#ccccff;
--ghost-white:#F8F7FF;
--question:#40319f;
--rand-1: #bed8ff;
--rand-2: #f2beff;
--rand-3: #fff9be;
--rand-4: #cbffbe;
--rand-5: #d2beff;
}

* {
box-sizing:border-box;
}

body {
align-items:center;
background-color:var(--background);
display:flex;
flex-direction:column;
font-family:'Patrick Hand',cursive;
font-size:16px;
justify-content:center;
margin:50px;
min-height:100vh;
padding:0;
touch-action: manipulation;
}

h1,h2 {
color:var(--black);
font-variant:small-caps;
font-weight:700;
letter-spacing:2px;
margin:0 auto;
max-width:800px;
text-align:center;
width:100%
}

h1 {
font-size:64px;
margin-bottom:-20px;
margin-top:0
}

h2 {
font-size:24px;
margin-bottom:20px;
margin-top:0
}

p {
color:var(--black);
font-size:20px;
font-variant:small-caps;
letter-spacing:1px;
margin-bottom:0;
margin-top:0;
max-width:450px;
overflow-wrap:break-word;
text-align:center;
width:100%
}

h4 {
color:var(--question);
font-size:32px;
letter-spacing:2px;
margin-bottom:20px;
margin-top:20px;
max-width:800px;
text-align:center;
width:100%
}

h5 {
color:var(--black);
font-size:16px;
font-variant:small-caps;
letter-spacing:0;
margin-bottom:0;
margin-top:20px;
max-width:800px;
text-align:center;
width:100%
}

p {
font-size:.8em;
font-variant:small-caps;
font-weight:100;
margin-bottom:0;
margin-top:0
}

.container {
max-width:100%;
padding:20px
}

.add-button {
  background-color: var(--button-primary);
  border: none;
  border-radius: 5%;
  color: var(--ghost-white);
  cursor: pointer;
  font-size: 18px;
  font-family:'Patrick Hand',cursive;
  height: 30px;
  width: auto;
  margin: 10xpx 20px;
  text-align: center;
}


.add-button:hover {
background-color:var(--button-secondary)
}

.clear-button {
background-color:var(--button-primary);
border:none;
border-radius:14px;
color:var(--ghost-white);
cursor:pointer;
display:block;
font-family:'Patrick Hand',cursive;
font-size:18px;
height:20%;
margin:auto;
margin-top:5px;
text-align:center;
width:51%
}

.clear-button:hover {
background-color:red
}

input[type="answer"] {
  background-color: var(--note);
  border: .5px var(--black);
  border-radius: 5px;
  box-sizing: border-box;
  color: var(--black);
  cursor: pointer;
  font-family: 'Patrick Hand', cursive;
  font-size: 32px;
  height: 125px;
  margin: 10px;
  padding: 10px;
  /* fix for the issue */
  white-space: pre-wrap;
  /* added the following two lines to limit the input to 500 characters */
  text-overflow: ellipsis;
  max-width: 100%;
}

textarea {
  background-color: var(--note);
  border: .5px var(--black);
  border-radius: 5px;
  box-sizing: border-box;
  color: var(--black);
  cursor: pointer;
  font-family: 'Patrick Hand', cursive;
  font-size: 32px;
  height: 125px;
  margin: 10px;
  padding: 10px;
  /* fix for the issue */
  white-space: pre-wrap;
  /* added the following two lines to limit the input to 500 characters */
  text-overflow: ellipsis;
  max-width: 100%;
}




.box {
  background-color: var(--rand-1);
  border-radius:5%;
  border-style:outset;
  box-sizing:border-box;
  display:inline-block;
  font-size:28px;
  margin:10px;
  max-width: 100%;
  min-height: 100px;
  padding:10px;
  text-align:left;
  text-align:top;
  vertical-align:top;
}

.box-container {
  display:grid;
  gap:10px;
  grid-auto-columns: 1fr;
  grid-auto-rows: max-content;
}


@media screen and (min-width: 480px) {
  .box-container {
    grid-template-columns: repeat(2, 1fr); /* 2 columns for screens wider than 480px */
  }
}

@media screen and (min-width: 768px) {
  .box-container {
    grid-template-columns: repeat(3, 1fr); /* 3 columns for screens wider than 768px */
  }
}

@media screen and (min-width: 992px) {
  .box-container {
    grid-template-columns: repeat(4, 1fr); /* 4 columns for screens wider than 992px */
  }
}

@media screen and (min-width: 1200px) {
  .box-container {
    grid-template-columns: repeat(6, 1fr); /* 6 columns for screens wider than 1200px */
  }
}