*, *::before, *::after {
  box-sizing: inherit;
  font-family: inherit;
  font-size: inherit;
}

:root {
  --small-2-fontsize: 0.750rem;
  --small-1-fontsize: 0.875rem;
  --normal-fontsize:  1.125rem;
  --large-1-fontsize: 1.375rem;
  --large-2-fontsize: 1.750rem;
  
  --spacing-small-2-unit: 0.125rem;
  --spacing-small-1-unit: 0.250rem;
  --spacing-normal-unit:  0.500rem;
  --spacing-large-1-unit: 0.750rem;
  --spacing-large-2-unit: 1.000rem;
  
  --line-size: 0.125rem;
  
  --color-white:  #FFFFFF;
  --color-black:  #000000;
  --color-red:    #FF7C7C;
  --color-green:  #00FF00;
  --color-blue:   #00BFFF;
  --color-yellow: #FFFF00;
  --color-cyan:   #00FFFF;
  --color-purple: #FF66FF;
}

:focus-visible {
  outline: var(--spacing-small-1-unit) solid var(--color-white);
  outline-offset: var(--line-size);
}

html {
  height: 100vh;
  height: 100dvh;
  font-size: 100%;
  font-family: monospace, monospace;
  box-sizing: border-box;
  overflow: hidden;
}

body {
  height: 100%;
  margin: 0;
  font-size: var(--normal-fontsize);
  color: var(--color-white);
  background-color: var(--color-black);
  scrollbar-color: var(--color-white) var(--color-black);
}

header {
  height: 100%;
}

nav {
  height: 100%;
}

main {
  height: 100%;
}

section {
  padding-bottom: var(--spacing-large-1-unit);
}

aside {
  height: 100%;
}

h1 {
  font-size: var(--large-2-fontsize);
  border-bottom: var(--line-size) solid var(--color-white);
  margin-bottom: var(--spacing-normal-unit);
}

h2 {
  font-size: var(--large-1-fontsize);
  border-left: var(--line-size) solid var(--color-white);
  padding-left: var(--spacing-normal-unit);
  margin-bottom: var(--spacing-normal-unit);
}

a {
  color: var(--color-blue);
}

a:visited { 
  color: var(--color-purple);
}

p {
  margin-bottom: var(--spacing-normal-unit);
}

table {
  
  width: 100%;
  
}

th, td {
  padding: var(--spacing-normal-unit);
  vertical-align: bottom;
}

details {
  user-select: none;
  margin-bottom: var(--spacing-normal-unit);
}

button {
  color: var(--color-white);
  background-color: var(--color-black);
  border: var(--line-size) outset var(--color-white);
  -webkit-user-select: none;
  user-select: none;
  padding: var(--spacing-normal-unit);
  margin-bottom: var(--spacing-normal-unit);
}

button:active {
  border: var(--line-size) inset var(--color-white);
}

input {
  margin-bottom: var(--spacing-normal-unit);
  background: var(--color-black);
  border: var(--line-size) outset var(--color-white);
  border-radius: 0;
  color: var(--color-white);
  padding: var(--spacing-normal-unit);
}

textarea {
  margin-bottom: var(--spacing-normal-unit);
  background: var(--color-black);
  border: var(--line-size) outset var(--color-white);
  border-radius: 0;
  color: var(--color-white);
  padding: var(--spacing-normal-unit);
}

select {
  margin-bottom: var(--spacing-normal-unit);
  background: var(--color-black);
  border: var(--line-size) outset var(--color-white);
  border-radius: 0;
  color: var(--color-white);
  padding: var(--spacing-normal-unit);
}

label {
  user-select: none;
}

#body-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-small-1-unit);
  padding-bottom: calc(var(--spacing-large-2-unit) * 2);
  max-width: 1024px;
  margin: auto;
}

#body-container {
  height: 100%;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

#header-wrapper {
  margin: var(--spacing-small-1-unit);
}

#header-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border: var(--line-size) outset var(--color-white);
  padding: var(--spacing-normal-unit);
}

#nav-wrapper {
  flex-shrink: 0;
}

#nav-wrapper.hidden {
  display: none;
}

#nav-container {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: calc(var(--large-2-fontsize) + (var(--spacing-small-1-unit) * 3) + (var(--spacing-normal-unit) * 2));
  bottom: 0;
  left: 0;
  background-color: var(--color-black);
  outline: var(--spacing-small-1-unit) solid var(--color-black);
  border: var(--line-size) outset var(--color-white);
  margin: var(--spacing-large-2-unit);
  margin-bottom: calc((var(--spacing-large-2-unit) * 2) + var(--spacing-large-1-unit));
  gap: var(--spacing-normal-unit);
  padding: var(--spacing-normal-unit);
  overflow-y: scroll;
}

#main-wrapper {
  flex-grow: 1;
  margin: var(--spacing-small-1-unit);
  
}

#main-container {
  height: 100%;
  border: var(--line-size) outset var(--color-white);
  padding: var(--spacing-normal-unit);
  overflow-y: scroll;
}

#notic-wrapper {
  display: block;
  position: relative;
}

#notic-wrapper.hidden {
  display: none;
}

#notic-container {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: calc(var(--large-2-fontsize) + (var(--spacing-small-1-unit) * 3) + (var(--spacing-normal-unit) * 2));
  bottom: 0;
  right: 0;
  background-color: var(--color-black);
  outline: var(--spacing-small-1-unit) solid var(--color-black);
  border: var(--line-size) outset var(--color-white);
  margin: var(--spacing-large-2-unit);
  margin-bottom: calc((var(--spacing-large-2-unit) * 2) + var(--spacing-large-1-unit));
  gap: var(--spacing-normal-unit);
  padding: var(--spacing-normal-unit);
  overflow-y: scroll;
  min-width: calc(var(--normal-fontsize) * 15);
}

#title {
  border: none;
  margin: 0;
}

#title-link,
#title-link:visited {
  color: var(--color-white);
  text-decoration: none;
  margin: 0;
  user-select: none;
}

#nav-button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--large-2-fontsize);
  width: var(--large-2-fontsize);
  padding: 0;
  margin: 0;
  font-size: var(--large-1-fontsize);
}

#sign-wrapper {
  
}

#sign-container {
  
}

#sign-contents {
  
}

#profile-edit-wrapper {
  
}

#profile-edit-container {
  
}

#party-edit-wrapper {
  
}

#party-edit-container {
  
}

#battle-edit-wrapper {
  
}

#battle-edit-container {
  
}

#battle-edit-wrapper {
  
}

#battle-edit-container {
  
}

#room-wrapper {
  
}

#room-container {
  
}

#exploration-wrapper {
  
}

#exploration-container {
  
}

#characters-list-wrapper {
  
}

#characters-list-container {
  
}

#chat-form-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-normal-unit);
  margin-bottom: var(--spacing-normal-unit);
}

#chat-form-container {
  flex-grow: 1;
}

#chat-display-wrapper {
  
}

#chat-display-container {
}

#chat-edit-form {
  display: flex;
  flex-direction: column;
}

#chat-get-wrapper {
  
}

#chat-get-container {
  
}

#character_profile-wrapper {
  
}

#character_profile-container {
  
}

.hidden {
  display: none;
}

.contents-spacing {
  padding-bottom: var(--spacing-large-1-unit);
}

.image-full-wrapper {
  width: 192px;
  height: 192px;
}

.image-separate-wrapper {
  width: 48px;
  height: 48px;
  overflow: hidden;
}

.image-separate-wrapper img {
  object-fit: none;
}

.image-index-0 img {
  object-position: 0px 0px;
}

.image-index-1 img {
  object-position: -48px 0px;
}

.image-index-2 img {
  object-position: -96px 0px;
}

.image-index-3 img {
  object-position: -144px 0px;
}

.image-index-4 img {
  object-position: 0px -48px;
}

.image-index-5 img {
  object-position: -48px -48px;
}

.image-index-6 img {
  object-position: -96px -48px;
}

.image-index-7 img {
  object-position: -144px -48px;
}

.image-index-8 img {
  object-position: 0px -96px;
}

.image-index-9 img {
  object-position: -48px -96px;
}

.image-index-10 img {
  object-position: -96px -96px;
}

.image-index-11 img {
  object-position: -144px -96px;
}

.image-index-12 img {
  object-position: 0px -144px;
}

.image-index-13 img {
  object-position: -48px -144px;
}

.image-index-14 img {
  object-position: -96px -144px;
}

.image-index-15 img {
  object-position: -144px -144px;
}

.sidemenu-link,
.sidemenu-link:visited {
  color: var(--color-white);
  text-decoration: none;
  padding: var(--spacing-normal-unit);
  border: var(--line-size) outset var(--color-white);
  width: calc(var(--normal-fontsize) * 12);
  user-select: none;
}

.notic-message {
  padding: var(--spacing-normal-unit);
  border: var(--line-size) outset var(--color-white);
}

.input-text {
  max-width: 24ch;
  width: 100%
}

.input-text-long {
  max-width: 80ch;
  width: 100%
}

.input-number {
  max-width: 12ch;
  min-width: 6ch;
  width: 100%;
}

.textarea-large {
  max-width: 80ch;
  width: 100%;
  min-height: calc((var(--normal-fontsize) * 5) + (var(--spacing-normal-unit) * 2));
}

.select-icon-name {
  max-width: 24ch;
  width: 100%
}

.select-chat {
  max-width: 56ch;
  width: 100%
}

.chat-button {
  width: 15ch;
  height: 4ch;
  margin-bottom: 0;
  overflow: hidden;
}

.chat-windows {
  display: flex;
  border: var(--line-size) outset var(--color-white);
  padding: var(--spacing-normal-unit);
  margin-bottom: var(--spacing-normal-unit);
  max-width: calc(var(--normal-fontsize) * 24);
  height: calc(var(--normal-fontsize) * 5);
}

.chat-window-icon {
  flex-shrink: 0;
  align-self: center;
}

.chat-face-off-text {
  
}

.chat-face-on-text-wrapper {
  display: flex;
  flex-direction: column;
  margin-left: var(--spacing-normal-unit);
}

.chat-set-td {
  vertical-align: middle;
}

.stock-skills-td {
  vertical-align: text-top;
}

.stock-skill-set-td {
  text-align: right;
}

.overwrite-skills-input {
  max-width: 8ch;
}

.skill-name {
  min-width: 20ch;
  
}

.status-windows {
  display: flex;
  border: var(--line-size) outset var(--color-white);
  padding: var(--spacing-normal-unit);
  margin-bottom: var(--spacing-normal-unit);
}

.pagelinks {
  
}

.pagelink,
.pagelink:visited {
  display: inline-flex;
  justify-content: center;
  padding: var(--spacing-normal-unit);
  border: var(--line-size) outset var(--color-white);
  margin: var(--spacing-normal-unit) 0;
  text-decoration: none;
  color: var(--color-white);
}

.pagelink-current,
.pagelink-current:visited {
  background-color: var(--color-white);
  color: var(--color-black);
}

.battle-value {
  font-size: var(--large-2-fontsize);
}

.battlelog-links,
.battlelog-links:visited {
  color: var(--color-blue);
}

.characters-list-links,
.characters-list-links:visited {
  color: var(--color-blue);
}

@media screen and (min-width:1024px) {
  
  #nav-button {
    display: none;
  }
  
  #body-wrapper {
    
  }
  
  #header-wrapper {
    
  }
  
  #nav-wrapper {
    padding: var(--spacing-small-1-unit);
  }
  
  #nav-wrapper.hidden {
    display: block;
  }
  
  #nav-container {
    height: 100%;
    position: static;
    margin: 0;
  }
  
}