body  { background-color: #000000; overflow-x:hidden;  overflow-y:scroll;  height:auto; width:500px;  padding:1px; margin:0;}
.box{width:auto; height:auto;}

  .textbox {
    padding:2px;
    background:#ffffff;
    display:flex;
    text-align:left;
    width:515px;
    height:auto;
    color:black;
    font-family:'MaruMonica';
    font-size:14px;
    border-bottom:1px solid black;
    }
  
  .namebox-item-somnium {
    justify-content: center;
    align-items: center;
    display:flex;
    margin-right:5px;
    text-align:center;
    width:100px;
    min-height:15px;
    max-height:200px;
    height:auto;
    color:white;
    padding:2px;
    font-family:'MaruMonica';
    font-size:15px;
    font-weight:700;
    background: #e9ffe6;
    background: linear-gradient(180deg,rgba(0, 173, 127, 1) 0%, rgba(0, 112, 82, 1) 50%, rgba(0, 64, 48, 1) 100%);    border:1px solid black;
    float:left;    }
    
  .namebox-item {
    justify-content: center;
    align-items: center;
    display:flex;
    margin-right:5px;
    text-align:center;
    width:100px;
    min-height:15px;
    max-height:200px;
    height:auto;
    color:black;
    padding:2px;
    font-family:'MaruMonica';
    font-size:15px;
    font-weight:700;
    background: #e9ffe6;
    background: linear-gradient(180deg,rgba(194, 255, 194, 1) 0%, rgba(0, 255, 0, 1) 50%, rgba(0, 148, 0, 1) 100%);
    border:1px solid black;
    float:left;    }
    
  .namebox-input {
    justify-content: center;
    align-items: center;
    display:flex;
    margin-right:5px;
    text-align:center;
    width:100px;
    min-height:15px;
    max-height:200px;
    height:auto;
    color:white;
    padding:2px;
    font-family:'MaruMonica';
    font-size:15px;
    font-weight:700;
    background: #e9ffe6;
    background: linear-gradient(180deg,rgba(79, 144, 255, 1) 0%, rgba(17, 85, 204, 1) 50%, rgba(12, 58, 138, 1) 100%);
    border:1px solid black;
    float:left;    }
    
  .namebox-choice {
    justify-content: center;
    align-items: center;
    display:flex;
    margin-right:5px;
    text-align:center;
    width:100px;
    min-height:15px;
    max-height:200px;
    height:auto;
    color:black;
    padding:2px;
    font-family:'MaruMonica';
    font-size:15px;
    font-weight:700;
    background: #e9ffe6;
    background: linear-gradient(180deg,rgba(255, 79, 79, 1) 0%, rgba(204, 17, 17, 1) 50%, rgba(138, 12, 12, 1) 100%);
    border:1px solid black;
    float:left;    }
    
  .namebox-escapeitem {
    justify-content: center;
    align-items: center;
    display:flex;
    margin-right:5px;
    text-align:center;
    width:100px;
    min-height:15px;
    max-height:200px;
    height:auto;
    color:#00ff00;
    padding:2px;
    font-family:'MaruMonica';
    font-size:15px;
    font-weight:700;
    background: #e9ffe6;
    background: linear-gradient(180deg,rgba(51, 29, 125, 1) 0%, rgba(32, 18, 77, 1) 50%, rgba(15, 8, 36, 1) 100%);
    border:1px solid black;
    float:left;    }
    
  .namebox-aiba {
    justify-content: center;
    align-items: center;
    display:flex;
    margin-right:5px;
    text-align:center;
    width:auto;
    max-width:150px;
    min-width:100px;
    height:auto;
    min-height:15px;
    max-height:500px;
    color:white;
    padding:2px;
    font-family:'MaruMonica';
    font-size:15px;
    font-weight:700;
    background: #ffe9bd;
    background: linear-gradient(180deg,rgba(255, 212, 125, 1) 0%, rgba(255, 184, 38, 1) 50%, rgba(255, 170, 0, 1) 100%);
    border:1px solid black;
    float:left;    }
    
  .namebox-date {
    justify-content: center;
    align-items: center;
    display:flex;
    margin-right:5px;
    text-align:center;
    width:auto;
    max-width:150px;
    min-width:100px;
    height:auto;
    min-height:15px;
    max-height:500px;
    color:white;
    padding:2px;
    font-family:'MaruMonica';
    font-size:15px;
    font-weight:700;
    background: linear-gradient(180deg,rgba(185, 99, 255, 1) 0%, rgba(133, 15, 228, 1) 50%, rgba(86, 0, 156, 1) 100%);
    border:1px solid black;
    float:left;    }
    
  .namebox-falco {
    justify-content: center;
    align-items: center;
    display:flex;
    margin-right:5px;
    text-align:center;
    width:auto;
    max-width:150px;
    min-width:100px;
    height:auto;
    min-height:15px;
    max-height:500px;
    color:white;
    padding:2px;
    font-family:'MaruMonica';
    font-size:15px;
    font-weight:700;
    background: linear-gradient(180deg,rgba(204, 0, 0, 1) 0%, rgba(129, 0, 0, 1) 50%, rgba(92, 0, 0, 1) 100%);
    border:1px solid black;
    float:left;    }
    
  .namebox-saito {
    justify-content: center;
    align-items: center;
    display:flex;
    margin-right:5px;
    text-align:center;
    width:auto;
    max-width:150px;
    min-width:100px;
    height:auto;
    min-height:15px;
    max-height:500px;
    color:white;
    padding:2px;
    font-family:'MaruMonica';
    font-size:15px;
    font-weight:700;
    background: linear-gradient(180deg,rgba(120, 148, 161, 1) 0%, rgba(72, 91, 97, 1) 50%, rgba(43, 54, 59, 1) 100%);
    border:1px solid black;
    float:left;    }
    
  .namebox-ryuki {
    justify-content: center;
    align-items: center;
    display:flex;
    margin-right:5px;
    text-align:center;
    width:auto;
    max-width:150px;
    min-width:100px;
    height:auto;
    min-height:15px;
    max-height:500px;
    color:white;
    padding:2px;
    font-family:'MaruMonica';
    font-size:15px;
    font-weight:700;
    background: linear-gradient(180deg,rgba(255, 168, 97, 1) 0%, rgba(255, 139, 42, 1) 50%, rgba(255, 115, 0, 1) 100%);
    border:1px solid black;
    float:left;    }
    
  .namebox-iris {
    justify-content: center;
    align-items: center;
    display:flex;
    margin-right:5px;
    text-align:center;
    width:auto;
    max-width:150px;
    min-width:100px;
    height:auto;
    min-height:15px;
    max-height:500px;
    color:white;
    padding:2px;
    font-family:'MaruMonica';
    font-size:15px;
    font-weight:700;
    background: linear-gradient(180deg,rgba(245, 147, 173, 1) 0%, rgba(224, 124, 150, 1) 50%, rgba(191, 80, 110, 1) 100%);
    border:1px solid black;
    float:left;    }
    
  .namebox-akemi {
    justify-content: center;
    align-items: center;
    display:flex;
    margin-right:5px;
    text-align:center;
    width:auto;
    max-width:150px;
    min-width:100px;
    height:auto;
    min-height:15px;
    max-height:500px;
    color:white;
    padding:2px;
    font-family:'MaruMonica';
    font-size:15px;
    font-weight:700;
    background: linear-gradient(180deg,rgba(210, 150, 255, 1) 0%, rgba(179, 86, 250, 1) 50%, rgba(164, 46, 255, 1) 100%);
    border:1px solid black;
    float:left;    }
    
  .namebox-hitomi {
    justify-content: center;
    align-items: center;
    display:flex;
    margin-right:5px;
    text-align:center;
    width:auto;
    max-width:150px;
    min-width:100px;
    height:auto;
    min-height:15px;
    max-height:500px;
    color:white;
    padding:2px;
    font-family:'MaruMonica';
    font-size:15px;
    font-weight:700;
    background: linear-gradient(180deg,rgba(227, 193, 159, 1) 0%, rgba(189, 152, 126, 1) 50%, rgba(156, 110, 86, 1) 100%);
    border:1px solid black;
    float:left;    }
    
  .namebox-pewter {
    justify-content: center;
    align-items: center;
    display:flex;
    margin-right:5px;
    text-align:center;
    width:auto;
    max-width:150px;
    min-width:100px;
    height:auto;
    min-height:15px;
    max-height:500px;
    color:white;
    padding:2px;
    font-family:'MaruMonica';
    font-size:15px;
    font-weight:700;
    background: linear-gradient(180deg,rgba(101, 219, 99, 1) 0%, rgba(74, 189, 72, 1) 50%, rgba(54, 158, 52, 1) 100%);
    border:1px solid black;
    float:left;    }
    
  .namebox-who {
    justify-content: center;
    align-items: center;
    display:flex;
    margin-right:5px;
    text-align:center;
    width:auto;
    max-width:150px;
    min-width:100px;
    height:auto;
    min-height:15px;
    max-height:500px;
    color:white;
    padding:2px;
    font-family:'MaruMonica';
    font-size:15px;
    font-weight:700;
    background: linear-gradient(180deg,rgba(191, 191, 191, 1) 0%, rgba(145, 145, 145, 1) 50%, rgba(99, 99, 99, 1) 100%);
    border:1px solid black;
    float:left;    }
    
  .namebox-hina {
    justify-content: center;
    align-items: center;
    display:flex;
    margin-right:5px;
    text-align:center;
    width:auto;
    max-width:150px;
    min-width:100px;
    height:auto;
    min-height:15px;
    max-height:500px;
    color:white;
    padding:2px;
    font-family:'MaruMonica';
    font-size:15px;
    font-weight:700;
    background: linear-gradient(180deg,rgba(255, 230, 102, 1) 0%, rgba(237, 208, 62, 1) 50%, rgba(196, 162, 0, 1) 100%);
    border:1px solid black;
    float:left;    }
    
  .namebox-boss {
    justify-content: center;
    align-items: center;
    display:flex;
    margin-right:5px;
    text-align:center;
    width:auto;
    max-width:150px;
    min-width:100px;
    height:auto;
    min-height:15px;
    max-height:500px;
    color:white;
    padding:2px;
    font-family:'MaruMonica';
    font-size:15px;
    font-weight:700;
    background: linear-gradient(180deg,rgba(255, 87, 87, 1) 0%, rgba(235, 29, 29, 1) 50%, rgba(166, 10, 10, 1) 100%);
    border: 1px solid black;
    float:left;    }    

  .namebox-tama {
    justify-content: center;
    align-items: center;
    display:flex;
    margin-right:5px;
    text-align:center;
    width:auto;
    max-width:150px;
    min-width:100px;
    height:auto;
    min-height:15px;
    max-height:500px;
    color:white;
    padding:2px;
    font-family:'MaruMonica';
    font-size:15px;
    font-weight:700;
    background: linear-gradient(180deg,rgba(255, 46, 88, 1) 0%, rgba(213, 0, 44, 1) 50%, rgba(179, 0, 36, 1) 100%);
    border:1px solid black;
    float:left;    }  
    
  .namebox-bibi {
    justify-content: center;
    align-items: center;
    display:flex;
    margin-right:5px;
    text-align:center;
    width:auto;
    max-width:150px;
    min-width:100px;
    height:auto;
    min-height:15px;
    max-height:500px;
    color:white;
    padding:2px;
    font-family:'MaruMonica';
    font-size:15px;
    font-weight:700;
    background: linear-gradient(180deg,rgba(217, 128, 128, 1) 0%, rgba(191, 90, 90, 1) 50%, rgba(148, 46, 46, 1) 100%);
    border:1px solid black;
    float:left;    }
    
  .namebox-tearer {
    justify-content: center;
    align-items: center;
    display:flex;
    margin-right:5px;
    text-align:center;
    width:auto;
    max-width:150px;
    min-width:100px;
    height:auto;
    min-height:15px;
    max-height:500px;
    color:white;
    padding:2px;
    font-family:'MaruMonica';
    font-size:15px;
    font-weight:700;
    background: linear-gradient(180deg,rgba(148, 129, 120, 1) 0%, rgba(109, 95, 88, 1) 50%, rgba(87, 73, 67, 1) 100%);
    border:1px solid black;
    float:left;    }   
    
  .namebox-kizuna {
    justify-content: center;
    align-items: center;
    display:flex;
    margin-right:5px;
    text-align:center;
    width:auto;
    max-width:150px;
    min-width:100px;
    height:auto;
    min-height:15px;
    max-height:500px;
    color:white;
    padding:2px;
    font-family:'MaruMonica';
    font-size:15px;
    font-weight:700;
    background: linear-gradient(180deg,rgba(255, 133, 117, 1) 0%, rgba(255, 71, 89, 1) 50%, rgba(209, 10, 63, 1) 100%);
    border:1px solid black;
    float:left;    }    
    
  .namebox-gen {
    justify-content: center;
    align-items: center;
    display:flex;
    margin-right:5px;
    text-align:center;
    width:auto;
    max-width:150px;
    min-width:100px;
    height:auto;
    min-height:15px;
    max-height:500px;
    color:white;
    padding:2px;
    font-family:'MaruMonica';
    font-size:15px;
    font-weight:700;
    background: linear-gradient(180deg,rgba(118, 145, 196, 1) 0%, rgba(83, 111, 163, 1) 50%, rgba(52, 73, 112, 1) 100%);
    border:1px solid black;
    float:left;    }   
    
  .namebox-lien {
    justify-content: center;
    align-items: center;
    display:flex;
    margin-right:5px;
    text-align:center;
    width:auto;
    max-width:150px;
    min-width:100px;
    height:auto;
    min-height:15px;
    max-height:500px;
    color:white;
    padding:2px;
    font-family:'MaruMonica';
    font-size:15px;
    font-weight:700;
    background: linear-gradient(180deg,rgba(103, 73, 186, 1) 0%, rgba(71, 44, 143, 1) 50%, rgba(52, 31, 110, 1) 100%);
    border:1px solid black;
    float:left;    }  
    
  .namebox-tokiko {
    justify-content: center;
    align-items: center;
    display:flex;
    margin-right:5px;
    text-align:center;
    width:auto;
    max-width:150px;
    min-width:100px;
    height:auto;
    min-height:15px;
    max-height:500px;
    color:white;
    padding:2px;
    font-family:'MaruMonica';
    font-size:15px;
    font-weight:700;
    background: linear-gradient(180deg,rgba(191, 165, 209, 1) 0%, rgba(149, 129, 163, 1) 50%, rgba(118, 98, 133, 1) 100%);
    border:1px solid black;
    float:left;    }    
    
  .namebox-sakura {
    justify-content: center;
    align-items: center;
    display:flex;
    margin-right:5px;
    text-align:center;
    width:auto;
    max-width:150px;
    min-width:100px;
    height:auto;
    min-height:15px;
    max-height:500px;
    color:white;
    padding:2px;
    font-family:'MaruMonica';
    font-size:15px;
    font-weight:700;
    background: linear-gradient(180deg,rgba(156, 147, 173, 1) 0%, rgba(114, 110, 122, 1) 50%, rgba(87, 82, 97, 1) 100%);
    border:1px solid black;
    float:left;    }    
    
  .namebox-mama {
    justify-content: center;
    align-items: center;
    display:flex;
    margin-right:5px;
    text-align:center;
    width:auto;
    max-width:150px;
    min-width:100px;
    height:auto;
    min-height:15px;
    max-height:500px;
    color:white;
    padding:2px;
    font-family:'MaruMonica';
    font-size:15px;
    font-weight:700;
    background: linear-gradient(180deg,rgba(243, 148, 255, 1) 0%, rgba(238, 108, 255, 1) 50%, rgba(229, 28, 255, 1) 100%);  
    border:1px solid black;
    float:left;    }    
    
  .namebox-ritsuko {
    justify-content: center;
    align-items: center;
    display:flex;
    margin-right:5px;
    text-align:center;
    width:auto;
    max-width:150px;
    min-width:100px;
    height:auto;
    min-height:15px;
    max-height:500px;
    color:white;
    padding:2px;
    font-family:'MaruMonica';
    font-size:15px;
    font-weight:700;
    background: linear-gradient(180deg,rgba(255, 173, 251, 1) 0%, rgba(255, 134, 249, 1) 50%, rgba(255, 105, 247, 1) 100%);
    border:1px solid black;
    float:left;    }   
    
  .namebox-kagami {
    justify-content: center;
    align-items: center;
    display:flex;
    margin-right:5px;
    text-align:center;
    width:auto;
    max-width:150px;
    min-width:100px;
    height:auto;
    min-height:15px;
    max-height:500px;
    color:white;
    padding:2px;
    font-family:'MaruMonica';
    font-size:15px;
    font-weight:700;
    background: linear-gradient(180deg,rgba(150, 185, 212, 1) 0%, rgba(118, 150, 175, 1) 50%, rgba(90, 121, 145, 1) 100%);
    border:1px solid black;
    float:left;    }    
    
  .namebox-sejima {
    justify-content: center;
    align-items: center;
    display:flex;
    margin-right:5px;
    text-align:center;
    width:auto;
    max-width:150px;
    min-width:100px;
    height:auto;
    min-height:15px;
    max-height:500px;
    color:white;
    padding:2px;
    font-family:'MaruMonica';
    font-size:15px;
    font-weight:700;
    background: linear-gradient(180deg,rgba(101, 120, 102, 1) 0%, rgba(70, 90, 71, 1) 50%, rgba(44, 54, 45, 1) 100%);
    border:1px solid black;
    float:left;    }    
    
  .namebox-mizuki {
    justify-content: center;
    align-items: center;
    display:flex;
    margin-right:5px;
    text-align:center;
    width:auto;
    max-width:150px;
    min-width:100px;
    height:auto;
    min-height:15px;
    max-height:500px;
    color:white;
    padding:2px;
    font-family:'MaruMonica';
    font-size:15px;
    font-weight:700;
    background: linear-gradient(180deg,rgba(255, 255, 102, 1) 0%, rgba(214, 214, 17, 1) 50%, rgba(162, 171, 0, 1) 100%);
    border:1px solid black;
    float:left;    }

/** button style **/

.btn {
        justify-content: center;
    align-items: center;
    display:flex;
    margin-right:5px;
    text-align:center;
    width:100px;
    min-height:15px;
    max-height:200px;
    height:auto;
    color:white;
    padding:5px;
    font-family:'MaruMonica';
    font-size:15px;
    font-weight:500;
    font-style:italic;
   background: #ffe9bd;
    background: linear-gradient(180deg,rgba(92, 134, 224, 1) 0%, rgba(56, 94, 176, 1) 50%, rgba(11, 46, 122, 1) 100%);
    border:1px solid #000;
    float:left;    
  cursor: pointer;