@supports((display: -ms-grid) or (display: grid)) {
:root {
  /* Header */
  --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Abroken-masquerade/new_scp_logo.png");
  --header-subtitle: "Safety Continues in Public";
  /* Standard Colors */
  --pale-accent: 255, 7, 7;
  --bright-accent: 214, 0, 0;
  --medium-accent: 119, 119, 119;
  --dark-accent: 42, 42, 42;
  /* Header Colors */
  --header-gradient-color-bottom: 66, 66, 66;
  --header-gradient-color-middle: var(--black-monochrome);
  --header-gradient-color-top: var(--black-monochrome);
  /* Primary Menu Colors */
  --swatch-menubg-hover-color: var(--pale-accent);
  /* Primary Header Colors */
  --swatch-headerh2-color: var(--pale-accent);
  --swatch-topmenu-border-color: var(--gray-monochrome);
  --swatch-topmenu-bg-color: var(--very-light-gray-monochrome);
  /* Link Colors */
  --link-color: var(--swatch-primary);
  --visited-link-color: var(--swatch-primary);
  --hover-link-color: var(--pale-accent);
  /* Ayer's Info Bar */
  --barColour: rgb(var(--link-color));
}

/* Anchor Links */
a {
  color: rgb(214, 0, 0);
  color: rgb(var(--link-color));
}
a:visited {
  color: rgb(214, 0, 0);
  color: rgb(var(--visited-link-color));
}
a.newpage {
  color: rgb(221, 102, 17);
  color: rgb(var(--newpage-color));
}
a:hover {
  color: rgb(255, 7, 7);
  color: rgb(var(--hover-link-color));
}

/* Buttons */
div#page-options-bottom > a,
div#page-options-bottom-2 > a,
div.buttons input,
input.button,
button,
file,
a.button,
.owindow .button-bar a {
  background-color: rgba(119, 119, 119, 1);
  background-color: rgba(var(--swatch-primary-darker), 1);
  border-color: rgba(66, 66, 72, 1);
  border-color: rgba(var(--swatch-menubg-medium-dark-color), 1);
}
div#page-options-bottom > a:hover,
div#page-options-bottom > a:active,
div#page-options-bottom-2 > a:hover,
div#page-options-bottom-2 > a:active,
div.buttons input:hover,
input.button:hover,
button:hover,
file:hover,
a.button:hover,
.owindow .button-bar a:hover {
  background-color: rgba(214, 0, 0, 1);
  background-color: rgba(var(--swatch-primary), 1);
  border-color: rgba(66, 66, 72, 1);
  border-color: rgba(var(--swatch-menubg-medium-dark-color), 1);
}

/* Header */
#header {
  background-position: left 0.75rem top 1.1875rem;
  background-size: auto -webkit-calc(var(--header-height-on-desktop) - 2.125rem);
  background-size: auto -moz-calc(var(--header-height-on-desktop) - 2.125rem);
  background-size: auto calc(var(--header-height-on-desktop) - 2.125rem);
}
#header h1 a,
#header h2 span {
  margin-left: 11rem;
}
#search-top-box-form input[type="submit"],
#search-top-box-form input[type="submit"]:hover,
#search-top-box-form input[type="submit"]:focus {
  background: rgb(214, 0, 0);
  background: rgb(var(--swatch-primary));
}

/* Top-Bar */
#top-bar div.top-bar > ul > li:hover,
#top-bar div.mobile-top-bar > ul > li:hover,
#top-bar div.top-bar > ul > li.sfhover,
#top-bar div.mobile-top-bar > ul > li.sfhover,
#top-bar div.top-bar > ul > li:focus-within,
#top-bar div.mobile-top-bar > ul > li:focus-within {
  background-color: rgb(252, 252, 252);
  background-color: rgb(var(--swatch-menubg-color));
}
#top-bar div.top-bar > ul > li > a,
#top-bar div.mobile-top-bar > ul > li > a,
#top-bar div.top-bar > ul > li > ul > li > a,
#top-bar div.mobile-top-bar > ul > li > ul > li > a {
  color: rgb(12, 12, 12);
  color: rgb(var(--swatch-menutxt-dark-color));
}
#top-bar div.top-bar > ul > li > a::before,
#top-bar div.top-bar > ul > li > a::after,
#top-bar div.mobile-top-bar > ul > li > a::before,
#top-bar div.mobile-top-bar > ul > li > a::after {
  background-color: rgba(214, 0, 0, 0.75);
  background-color: rgba(var(--swatch-primary), 0.75);
}
#top-bar div.top-bar > ul > li > ul,
#top-bar div.mobile-top-bar > ul > li > ul {
  background-color: rgba(252, 252, 252, 0.93);
  background-color: rgba(var(--swatch-menubg-color), 0.93);
}
#top-bar div.top-bar > ul > li > ul > li:hover,
#top-bar div.mobile-top-bar > ul > li > ul > li:hover,
#top-bar div.top-bar > ul > li > ul > li > ul > li:hover,
#top-bar div.mobile-top-bar > ul > li > ul > li > ul > li:hover {
  background-color: transparent;
  background-color: rgba(var(--pale-accent), 0.05);
}
#top-bar div.top-bar > ul > li > ul > li > a::before,
#top-bar div.top-bar > ul > li > ul > li > ul > li > a::before,
#top-bar div.top-bar > ul > li > ul > li > a:hover::before {
  background-color: rgba(255, 7, 7, 0.65);
  background-color: rgba(var(--pale-accent), 0.65);
}
#top-bar > div.mobile-top-bar > div.open-menu > p > a {
  color: rgb(160, 160, 160) !important;
  color: rgb(var(--light-gray-monochrome)) !important;
}

/* Side-Bar */
#side-bar div.menu-item a {
  -webkit-transition: background-color 80ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms ease;
  -moz-transition: background-color 80ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms ease;
  -o-transition: background-color 80ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms ease;
  transition: background-color 80ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms ease;
}
#side-bar div.menu-item a:hover {
  color: rgb(252, 252, 252);
  color: rgb(var(--swatch-menutxt-light-color));
}
#side-bar div.menu-item a::before,
#side-bar div.menu-item a:hover::before {
  background-color: rgba(214, 0, 0, 0.75);
  background-color: rgba(var(--bright-accent), 0.75);
}

/* Blockquote */
.gray1 blockquote,
.gray2 blockquote {
  margin: 1em 0;
  border: 0.1875rem solid rgb(214, 0, 0);
  border: 0.1875rem solid rgb(var(--bright-accent));
  border-radius: 0.625rem;
}
.gray1 blockquote {
  background-color: rgb(244, 244, 244);
}
.gray2 blockquote {
  background-color: rgb(232, 232, 232);
}

/* Flashing Lights */
div#extra-div-1,
div#extra-div-2 {
  position: absolute;
  top: 2.5rem;
  width: 6rem;
  height: 1rem;
  border-radius: 0.0625rem;
}
div#extra-div-1 {
  --light-on: -1rem 0.0625rem 4rem rgba(255, 0, 0, 1), 1rem 0.0625rem 4rem rgba(255, 0, 0, 1), 0 0.0625rem 1.5rem rgba(255, 0, 0, 1) inset;
  --light-off: -0.0625rem 0.0625rem 0.375rem rgba(255, 0, 0, 0.2), 0.0625rem 0.0625rem 0.375rem rgba(255, 0, 0, 0.2), 0 0.0625rem 0.125rem rgba(255, 0, 0, 0.2) inset;
  left: 55%;
  background-color: rgba(255, 0, 0, 0.75);
  -webkit-animation: flash-1 1s infinite;
  -moz-animation: flash-1 1s infinite;
  -o-animation: flash-1 1s infinite;
  animation: flash-1 1s infinite;
}
@keyframes flash-1 {
  0% {
    opacity: 0.2;
    box-shadow: var(--light-off);
  }
  12.5% {
    opacity: 1;
    box-shadow: var(--light-on);
  }
  25% {
    opacity: 0.2;
    box-shadow: var(--light-off);
  }
  37.5% {
     opacity: 1;
     box-shadow: var(--light-on);
  }
  50% {
    opacity: 0.2;
    box-shadow: var(--light-off);
  }
  100% {
    opacity: 0.2;
    box-shadow: var(--light-off);
  }
}
div#extra-div-2 {
  --light-on: -1rem 0.0625rem 4rem rgba(0, 0, 255, 1), 1rem 0.0625rem 4rem rgba(0, 0, 255, 1), 0 0.0625rem 1.5rem rgba(0, 0, 255, 1) inset;
  --light-off: -0.0625rem 0.0625rem 0.375rem rgba(0, 0, 255, 0.2), 0.0625rem 0.0625rem 0.375rem rgba(0, 0, 255, 0.2), 0 0.0625rem 0.125rem rgba(0, 0, 255, 0.2) inset;
  left: -webkit-calc(55% + 6.25rem);
  left: -moz-calc(55% + 6.25rem);
  left: calc(55% + 6.25rem);
  background-color: rgba(0, 0, 255, 0.75);
  -webkit-animation: flash-2 1s infinite;
  -moz-animation: flash-2 1s infinite;
  -o-animation: flash-2 1s infinite;
  animation: flash-2 1s infinite;
}
@keyframes flash-2 {
  0% {
    opacity: 0.2;
    box-shadow: var(--light-off);
  }
  50% {
    opacity: 0.2;
    box-shadow: var(--light-off);
  }
  62.5% {
    opacity: 1;
    box-shadow: var(--light-on);
  }
  75% {
    opacity: 0.2;
    box-shadow: var(--light-off);
  }
  87.5% {
     opacity: 1;
     box-shadow: var(--light-on);
  }
  100% {
    opacity: 0.2;
    box-shadow: var(--light-off);
  }
}

/* Mobile */
@media only screen and (max-width: 768px) {
#top-bar div.top-bar > ul > li > ul > li:hover,
#top-bar div.mobile-top-bar > ul > li > ul > li:hover,
#top-bar div.top-bar > ul > li > ul > li > ul > li:hover,
#top-bar div.mobile-top-bar > ul > li > ul > li > ul > li:hover {
  background-color: rgba(255, 7, 7, 0.55);
  background-color: rgba(var(--pale-accent), 0.55);
}

/* Mobile Search */
#search-top-box form[id="search-top-box-form"] input[type="submit"] {
  background-color: rgb(214, 0, 0);
  background-color: rgb(var(--swatch-primary));
}

/* Flashing Lights */
div#extra-div-1 {
  max-width: -webkit-calc(100vw - 55%);
  max-width: -moz-calc(100vw - 55%);
  max-width: calc(100vw - 55%);
}
div#extra-div-2 {
  max-width: -webkit-calc(100vw - 55% - 6.25rem);
  max-width: -moz-calc(100vw - 55% - 6.25rem);
  max-width: calc(100vw - 55% - 6.25rem);
}
}

@media only screen and (max-width: 400px) {
#header h1 a,
#header h2 span {
  margin-left: 10rem;
}
}
}