@font-face {
  font-weight: normal;
  src: url("fonts/Neue Haas Grotesk Display Pro 55 Regular.eot");
  src: url("fonts/Neue Haas Grotesk Display Pro 55 Regular.eot?#iefix")
      format("embedded-opentype"),
    url("fonts/Neue Haas Grotesk Display Pro 55 Regular.woff2") format("woff2"),
    url("fonts/Neue Haas Grotesk Display Pro 55 Regular.woff") format("woff"),
    url("fonts/Neue Haas Grotesk Display Pro 55 Regular.ttf") format("truetype"),
    url("fonts/Neue Haas Grotesk Display Pro 55 Regular.svg#Neue Haas Grotesk Display Pro 55 Regular")
      format("svg");
  font-family: "Haas";
}

@font-face {
  font-weight: bold;
  src: url("fonts/Neue Haas Grotesk Display Pro 75 Bold.eot");
  src: url("fonts/Neue Haas Grotesk Display Pro 75 Bold.eot?#iefix")
      format("embedded-opentype"),
    url("fonts/Neue Haas Grotesk Display Pro 75 Bold.woff2") format("woff2"),
    url("fonts/Neue Haas Grotesk Display Pro 75 Bold.woff") format("woff"),
    url("fonts/Neue Haas Grotesk Display Pro 75 Bold.ttf") format("truetype"),
    url("fonts/Neue Haas Grotesk Display Pro 75 Bold.svg#Neue Haas Grotesk Display Pro 75 Bold")
      format("svg");
  font-family: "Haas";
}

* {
  margin: 0;
  padding: 0;
  line-height: normal;
}

html,
body {
  background-color: rgb(26, 29, 28);
  width: 100%;
  height: 100%;
  font-family: "Haas", "Rubik", "IcoFont", sans-serif;
}

a {
  color: rgb(32, 147, 204);
  text-decoration: none;
}

a[disabled] {
  color: #999;
}

a:not([disabled]):hover {
  color: rgb(108, 168, 199);
}

/* Main content area with padding. */
#content {
  box-sizing: border-box;
  padding-top: 30px;
  padding-right: max(calc(5% + 10px), 30px);
  padding-bottom: 20px;
  padding-left: max(5%, 20px);
  width: 100%;
  min-width: 480px;
  height: 88%;
  min-height: 360px;
}

/* Main content area without padding. */
#content-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

/* Poster box wrapper for sizing and box shadow. */
.poster-box-sizing-wrapper {
  box-shadow: 5px 5px 0px 1px rgb(207, 207, 253),
    10px 10px 0px 1px rgb(176, 176, 252), 15px 15px 0px 1px #88d;
  border: 4px solid #eee;
}

/* Poster box area with padding. */
.poster-box {
  box-sizing: border-box;
  background-color: rgb(42, 50, 95);
  padding-top: 4%;
  padding-right: calc(4% * 8.5 / 11);
  padding-bottom: 4%;
  padding-left: calc(4% * 8.5 / 11);
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  color: rgb(255, 255, 254);
}

/* Poster box area without padding. */
.poster-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  /* 100% of the font-size set dynamically on .poster-box. */
  font-size: 100%;
}

/**
 * Content box settings.
 */

.content-box {
  word-wrap: break-word;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -o-user-select: none;
  -webkit-user-select: none;
  display: inline-block;
  position: absolute;
  box-sizing: border-box;
  min-width: 1em;
  max-width: 100%;
  touch-action: none;
  user-select: none;
  word-break: break-all;
  overflow-wrap: break-word;
}

.content-box:empty::before {
  display: block;
  width: 100%;
  content: "...";
  text-align: center;
}

.content-box:focus {
  outline: none;
}

.content-box:hover {
  outline: rgb(176, 176, 252) solid 1px !important;
  outline-offset: 5px !important;
}

.content-box:active {
  outline: rgb(176, 176, 252) dotted 1px !important;
  outline-offset: 5px !important;
}

.content-box.content-box-seal:not(.ck-editor__editable) {
  width: 15%;
  min-width: 10%;
  height: calc(15% * 8.5 / 11);
  min-height: calc(10% * 8.5 / 11);
}

.content-box.content-box-seal.ck-editor__editable {
  width: 50% !important;
}

.content-box.ck-editor__editable {
  -khtml-user-select: inherit;
  -moz-user-select: -moz-inherit;
  -o-user-select: inherit;
  -webkit-user-select: inherit;
  outline: rgb(176, 176, 252) dotted 1px !important;
  outline-offset: 5px !important;
  overflow: visible !important;
  user-select: inherit;
}

.ck-editor__editable,
.ck-editor__editable * {
  margin: 0 !important;
  padding: 0 !important;
}

.ck-button__label {
  line-height: normal !important;
}

.ck-blurred,
.ck-focused,
.ck-balloon-panel {
  box-shadow: none !important;
  border: none !important;
}

.ck.ck-toolbar-container {
  margin-top: -7px !important;
  margin-left: -6px !important;
}

.ck.ck-toolbar {
  min-width: 200px;
}

.ck.ck-character-grid .ck-button__label {
  font-family: "IcoFont", sans-serif !important;
}

/**
 * Seal styles.
 */

.seal {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid white;
  border-radius: 50%;
  color: white;
  font-family: "IcoFont", sans-serif;
}

.seal-text {
  color: white;
  font-family: "Cormorant Garamond", serif;
  text-transform: uppercase;
}

.seal-inner {
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid white;
  border-radius: 50%;
  color: white;
}

/**
 * Footer styles.
 */

#footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 12%;
  color: #999;
  font-size: 1.25vh;
}

#footer button {
  cursor: pointer;
  border: none;
  background: none !important;
  padding: 0 !important;
  color: rgb(32, 147, 204);
  font-family: inherit;
}

#footer button:hover {
  color: rgb(108, 168, 199);
}

.slash-spacer::before {
  content: "//";
}

.slash-spacer {
  margin-right: 0.5em;
  margin-left: 0.5em;
  color: #eee;
}

#published {
  display: none;
}