@charset "UTF-8";

body {
  margin: 0;
  letter-spacing: 0.03em;
  background-color: #ccffff;
}

#contents {
  position: relative;
  width: 650px;
  margin: 0 auto;
  overflow: hidden;
  background-color: white;
  border-bottom: 2px solid #8962b9;
}

/* stylelint-disable-next-line selector-class-pattern */
#src .ace_invisible {
  color: #ff9393;
  opacity: 0.2;
}

/* stylelint-disable-next-line selector-class-pattern */
.ace_editor .ace_invisible_eol {
  display: none;
}

a:hover {
  opacity: 0.5;
}

h1 {
  margin: 0;
  font-size: 1.2rem;
  text-align: center;
  background-color: #aaffaa;
  border-top: 2px solid #8962b9;
  border-bottom: 2px solid #8962b9;
}

#src {
  padding: 0;
  margin: 0;
}

#log {
  padding: 0;
  margin: 0;
  font-size: 0.9rem;

  & li {
    padding: 3px 10px;
    list-style-type: none;
    border-bottom: 1px solid #84b2e0;
  }
}

#input,
#output {
  font-size: 1rem;
}

#execute-button {
  width: 140px;
  height: 60px;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 20px;

  & img {
    vertical-align: top;
  }
}

#execute-button.enable {
  cursor: pointer;
}

#platform {
  width: 155px;
  height: 40px;
  margin-left: 5px;
  font-size: 0.7rem;
}

button {
  &.init {
    color: #000000;
    background-color: #888888;
    border: 2px solid #333333;
  }

  &.enable {
    color: #000000;
    background-color: #aaffaa;
    border: 3px solid #008000;
  }

  &.disable {
    color: #ffffff;
    background-color: #db5671;
    border: 3px solid #a8233e;
  }
}

.compile-error {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  background-color: rgb(0 255 0);
}

img.favicon {
  width: 16px;
  height: 16px;
  margin: 0 5px;
  vertical-align: middle;
}

div.flex {
  display: flex;
}

.editor-keys {
  display: flex;
  gap: 10px;
  margin: 5px 0 15px 10px;
}

.editor-keys button {
  min-width: 80px;
  height: 70px;
  font-size: 1.2rem;
  touch-action: manipulation;
  cursor: pointer;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.editor-buttons {
  margin: 5px 10px 10px;
}

.editor-buttons button {
  min-width: 170px;
  height: 70px;
  margin-right: 5px;
  font-size: 1.2rem;
  touch-action: manipulation;
  cursor: pointer;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.editor-buttons button:disabled {
  cursor: default;
}

.spacer {
  height: 10px;
}