@charset "utf-8";

html {
  font-size: 62.5%;
  scrollbar-color: white blueviolet;
  scrollbar-width: auto;
  scroll-behavior: smooth;
}

body {
  cursor: url(../cursor.png), auto;
  font-family: Meiryo,sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
  margin: 0;
  color: navy;
  background: ivory;
}

h1 {
  text-align: center;
  margin: 1rem auto;
}

nav {
  text-align: center;
}

a {
  text-decoration: none;
  color: blue;
}

a:hover {
  cursor: url(../cursor.png), pointer;
  color: red;
}

p {
  margin: 1rem auto;
  width: 70%;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem auto;
  width: 70%;
}

.memo-box {
  padding: 1rem;
}

.memo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.title-input {
  border: none;
  outline: none;
  font-size: 1.6rem;
  font-weight: bold;
  background: transparent;
  width: 70%;
}

textarea {
  box-sizing: border-box;
  resize: vertical;
  padding: 1rem;
  font-size: 1.6rem;
  width: 100%;
  height: 17rem;
}

textarea:focus {
  outline: none;
}

.reset-btn {
  cursor: url(../cursor.png), auto;
}

#memo-box-01 {
  border: 3px solid darkturquoise;
  background: aquamarine;
}

#title-01,#title-01::placeholder {
  color: black;
}

#reset-01 {
  border: 1px solid black;
  color: black;
  background: orange;
}

#reset-01:hover {
  color: red;
  background: yellow;
}

#content-01 {
  border: 1px solid darkturquoise;
}

#memo-box-02 {
  border: 3px solid mediumslateblue;
  background: lavender;
}

#title-02,#title-02::placeholder {
  color: black;
}

#reset-02 {
  border: 1px solid black;
  color: black;
  background: orange;
}

#reset-02:hover {
  color: red;
  background: yellow;
}

#content-02 {
  border: 1px solid mediumslateblue;
}

#memo-box-03 {
  border: 3px solid deepskyblue;
  background: lightcyan;
}

#title-03,#title-03::placeholder {
  color: black;
}

#reset-03 {
  border: 1px solid black;
  color: black;
  background: orange;
}

#reset-03:hover {
  color: red;
  background: yellow;
}

#content-03 {
  border: 1px solid deepskyblue;
}

#memo-box-04 {
  border: 3px solid darkcyan;
  background: darkturquoise;
}

#title-04,#title-04::placeholder {
  color: black;
}

#reset-04 {
  border: 1px solid black;
  color: black;
  background: orange;
}

#reset-04:hover {
  color: red;
  background: yellow;
}

#content-04 {
  border: 1px solid darkcyan;
}

#memo-box-05 {
  border: 3px solid blueviolet;
  background: mediumslateblue;
}

#title-05,#title-05::placeholder {
  color: black;
}

#reset-05 {
  border: 1px solid black;
  color: black;
  background: orange;
}

#reset-05:hover {
  color: red;
  background: yellow;
}

#content-05 {
  border: 1px solid blueviolet;
}

#memo-box-06 {
  border: 3px solid royalblue;
  background: deepskyblue;
}

#title-06,#title-06::placeholder {
  color: black;
}

#reset-06 {
  border: 1px solid black;
  color: black;
  background: orange;
}

#reset-06:hover {
  color: red;
  background: yellow;
}

#content-06 {
  border: 1px solid royalblue;
}

#memo-box-07 {
  border: 3px solid darkturquoise;
  background: aquamarine;
}

#title-07,#title-07::placeholder {
  color: black;
}

#reset-07 {
  border: 1px solid black;
  color: black;
  background: orange;
}

#reset-07:hover {
  color: red;
  background: yellow;
}

#content-07 {
  border: 1px solid darkturquoise;
}

#memo-box-08 {
  border: 3px solid mediumslateblue;
  background: lavender;
}

#title-08,#title-08::placeholder {
  color: black;
}

#reset-08 {
  border: 1px solid black;
  color: black;
  background: orange;
}

#reset-08:hover {
  color: red;
  background: yellow;
}

#content-08 {
  border: 1px solid mediumslateblue;
}

#memo-box-09 {
  border: 3px solid deepskyblue;
  background: lightcyan;
}

#title-09,#title-09::placeholder {
  color: black;
}

#reset-09 {
  border: 1px solid black;
  color: black;
  background: orange;
}

#reset-09:hover {
  color: red;
  background: yellow;
}

#content-09 {
  border: 1px solid deepskyblue;
}

#memo-box-10 {
  border: 3px solid darkcyan;
  background: darkturquoise;
}

#title-10,#title-10::placeholder {
  color: black;
}

#reset-10 {
  border: 1px solid black;
  color: black;
  background: orange;
}

#reset-10:hover {
  color: red;
  background: yellow;
}

#content-10 {
  border: 1px solid darkcyan;
}

#memo-box-11 {
  border: 3px solid blueviolet;
  background: mediumslateblue;
}

#title-11,#title-11::placeholder {
  color: black;
}

#reset-11 {
  border: 1px solid black;
  color: black;
  background: orange;
}

#reset-11:hover {
  color: red;
  background: yellow;
}

#content-11 {
  border: 1px solid blueviolet;
}

#memo-box-12 {
  border: 3px solid royalblue;
  background: deepskyblue;
}

#title-12,#title-12::placeholder {
  color: black;
}

#reset-12 {
  border: 1px solid black;
  color: black;
  background: orange;
}

#reset-12:hover {
  color: red;
  background: yellow;
}

#content-12 {
  border: 1px solid royalblue;
}

#memo-box-13 {
  border: 3px solid darkturquoise;
  background: aquamarine;
}

#title-13,#title-13::placeholder {
  color: black;
}

#reset-13 {
  border: 1px solid black;
  color: black;
  background: orange;
}

#reset-13:hover {
  color: red;
  background: yellow;
}

#content-13 {
  border: 1px solid darkturquoise;
}

#memo-box-14 {
  border: 3px solid mediumslateblue;
  background: lavender;
}

#title-14,#title-14::placeholder {
  color: black;
}

#reset-14 {
  border: 1px solid black;
  color: black;
  background: orange;
}

#reset-14:hover {
  color: red;
  background: yellow;
}

#content-14 {
  border: 1px solid mediumslateblue;
}

#memo-box-15 {
  border: 3px solid deepskyblue;
  background: lightcyan;
}

#title-15,#title-15::placeholder {
  color: black;
}

#reset-15 {
  border: 1px solid black;
  color: black;
  background: orange;
}

#reset-15:hover {
  color: red;
  background: yellow;
}

#content-15 {
  border: 1px solid deepskyblue;
}

#memo-box-16 {
  border: 3px solid darkcyan;
  background: darkturquoise;
}

#title-16,#title-16::placeholder {
  color: black;
}

#reset-16 {
  border: 1px solid black;
  color: black;
  background: orange;
}

#reset-16:hover {
  color: red;
  background: yellow;
}

#content-16 {
  border: 1px solid darkcyan;
}

#memo-box-17 {
  border: 3px solid blueviolet;
  background: mediumslateblue;
}

#title-17,#title-17::placeholder {
  color: black;
}

#reset-17 {
  border: 1px solid black;
  color: black;
  background: orange;
}

#reset-17:hover {
  color: red;
  background: yellow;
}

#content-17 {
  border: 1px solid blueviolet;
}

#memo-box-18 {
  border: 3px solid royalblue;
  background: deepskyblue;
}

#title-18,#title-18::placeholder {
  color: black;
}

#reset-18 {
  border: 1px solid black;
  color: black;
  background: orange;
}

#reset-18:hover {
  color: red;
  background: yellow;
}

#content-18 {
  border: 1px solid royalblue;
}

#memo-box-19 {
  border: 3px solid black;
  background: white;
}

#title-19,#title-19::placeholder {
  color: black;
}

#reset-19 {
  border: 1px solid black;
  color: black;
  background: orange;
}

#reset-19:hover {
  color: red;
  background: yellow;
}

#content-19 {
  border: 1px solid black;
}

footer {
  text-align: center;
  margin: 1rem auto;
}

/* =========== for Mobile =========== */
@media (max-width: 767px) {

p {
  width: 90%;
}

.container {
  grid-template-columns: 1fr;
  width: 90%;
}

}