body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background: rgb(112, 196, 227);
    }
    .toolbar {
      background-color: rgb(239, 239, 239);
      padding: 10px;
      border-bottom: 1px solid #ccc;
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }
    .toolbar button, .toolbar select {
      padding: 5px 10px;
      cursor: pointer;
    }
    #editor {
      padding: 20px;
      min-height: 500px;
      outline: none;
      background-color: white;
      font-size: 20px;
    }
    .editor-container {
      border: 1px solid #ccc;
      margin: 20px;
      background-color: white;
      position: relative;
    }
    .emoji-menu {
      display: none;
      position: absolute;
      top: 50px;
      left: 10px;
      background-color: white;
      border: 1px solid #ccc;
      padding: 10px;
      z-index: 100;
      box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
      width: 300px;
      max-height: 200px;
      overflow-y: scroll;
      border-radius: 5px;
    }
    .emoji-menu span {
      font-size: 22px;
      padding: 5px;
      cursor: pointer;
      display: inline-block;
    }
    .emoji-menu span:hover {
      background-color: #eee;
      border-radius: 4px;
    }
    .footer {
      background-color: #C4C4C4;
      border-top: 1px solid #69bcd1;
      padding: 8px 20px;
      font-size: 14px;
      color: #333;
      text-align: right;
    }