/* Mist Weather Media 2024 Website */
/* Depending on who you ask, this code stinks. */
/* Made by PicelBoi */
/* Thank god for all these CSS tutorials and such! */

/* This is currently really unorganized as it doesn't group this per page. When releasing I might reorder things around to make it easier to edit things and not have to scroll a bunch of lines. -PB */

/* Common variables - use this more often! */

:root {
  --main-color: #5296ab;
  --darker-color: #07151e;
  --glow-color: #a1dffd;
  --glow2-color: #95d9eeef;
  --bg-color: #16252f;
  --light-color: #ffffff;
  --dark-color: #000;
  --text-color: #000000;
  --grey-color: #6e6e6e;
  --darkgrey-color: #101010;
  --blacktranslucent-color: #00000080;
  --blacksemitranslucent-color: #000000a0;
  --bluesemitranslucent1-color: #40737e55;
  --gap: 1%;
}

body {
  text-rendering: optimizeLegibility;
  transform: translate3d(0, 0, 0);
  background-color: #16252f;
  background-color: var(--bg-color);
  color: #ffffff;
  color: var(--light-color);
  overflow: hidden;
  behavior: url(PIE.htc);
}

/* Enable word wrapping for "pre" tags. */

pre {
  white-space: pre-wrap;
}

/* Scrollbar because Chrome scrollbars SUCK */

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: #16252f;
  background: var(--bg-color);
}

::-webkit-scrollbar-thumb {
  background: #bdbdbd80;
  border-radius: 15px;
}

::-webkit-scrollbar-thumb:hover {
  background: #6e6e6e;
}

/* Bless this font mess. */

@font-face {
  font-family: "two_weekend_gobold";
  src: url("fonts/new/twoweekendgo-bold-webfont.woff2") format("woff2"),
    url("fonts/new/twoweekendgo-bold.otf") format("otf"),
    url("fonts/new/twoweekendgo-bold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "two_weekend_goregular";
  src: url("fonts/new/twoweekendgo-regular-webfont.woff2") format("woff2"),
    url("fonts/new/twoweekendgo-regular.otf") format("otf"),
    url("fonts/new/twoweekendgo-regular-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "two_weekend_gosemibold";
  src: url("fonts/new/twoweekendgo-semibold-webfont.woff2") format("woff2"),
    url("fonts/new/twoweekendgo-semibold.otf") format("otf"),
    url("fonts/new/twoweekendgo-semibold-webfont.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "standardbold_italic";
  src: url("fonts/new/standard-bold-italic-webfont.woff2") format("woff2"),
    url("fonts/new/standard-bold-italic.otf") format("otf"),
    url("fonts/new/standard-bold-italic-webfont.woff") format("woff");
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "standardbold";
  src: url("fonts/new/standard-bold-webfont.woff2") format("woff2"),
    url("fonts/new/standard-bold.otf") format("otf"),
    url("fonts/new/standard-bold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "standarditalic";
  src: url("fonts/new/standard-book-italic-webfont.woff2") format("woff2"),
    url("fonts/new/standard-book-italic.otf") format("otf"),
    url("fonts/new/standard-book-italic-webfont.woff") format("woff");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "standardregular";
  src: url("fonts/new/standard-book-webfont.woff2") format("woff2"),
    url("fonts/new/standard-book.otf") format("otf"),
    url("fonts/new/standard-book-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "liberation_sansbold";
  src: url("fonts/new/liberationsans-bold-webfont.woff2") format("woff2"),
    url("fonts/new/LiberationSans-Bold.ttf") format("ttf"),
    url("fonts/new/liberationsans-bold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "liberation_sansbold_italic";
  src: url("fonts/new/liberationsans-bolditalic-webfont.woff2") format("woff2"),
    url("fonts/new/LiberationSans-BoldItalic.ttf") format("ttf"),
    url("fonts/new/liberationsans-bolditalic-webfont.woff") format("woff");
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "liberation_sansblack_italic";
  src: url("fonts/new/liberationsans-bolditalic-webfont.woff2") format("woff2"),
    url("fonts/new/LiberationSans-BoldItalic.ttf") format("ttf"),
    url("fonts/new/liberationsans-bolditalic-webfont.woff") format("woff");
  font-weight: 900;
  font-style: italic;
}

@font-face {
  font-family: "liberation_sansitalic";
  src: url("fonts/new/liberationsans-italic-webfont.woff2") format("woff2"),
    url("fonts/new/LiberationMono-BoldItalic.ttf") format("ttf"),
    url("fonts/new/liberationsans-italic-webfont.woff") format("woff");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "liberation_sansregular";
  src: url("fonts/new/liberationsans-regular-webfont.woff2") format("woff2"),
    url("fonts/new/LiberationSans-Bold.ttf") format("ttf"),
    url("fonts/new/liberationsans-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "LiberationMono";
  src: url("fonts/new/LiberationMono-Regular.ttf") format("ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "LiberationMono";
  src: url("fonts/new/LiberationMono-Bold.ttf") format("ttf");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "LiberationMono";
  src: url("fonts/new/LiberationMono-Italic.ttf") format("ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "LiberationMono";
  src: url("fonts/new/LiberationMono-BoldItalic.ttf") format("ttf");
  font-weight: bold;
  font-style: normal;
}

/* Default body */

html,
body {
  background: #16252f;
  background: var(--bg-color);
  background-size: cover;
  font-family: "Fira Sans", sans-serif;
  color: #ffffff;
  color: var(--light-color);
  overflow: hidden;
  padding: 0;
  margin: 0;
  font-size: 1.2vh;
}

/* Mist Weather Media VJS skin */

.vjs-mist-media-player {
  font-family: "Rubik";
}

.vjs-mist-media-player .vjs-control-bar {
  background-color: var(--glow-color);
  color: var(--dark-color);
}

/* Bunch of classes to make my life easier and NOT a trainwreck */

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */ /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

.center {
  text-align: center;
  vertical-align: middle;
}

.fullheight {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.disablevertical {
  overflow-y: hidden;
}

hr {
  color: #ffffff;
  color: var(--light-color);
  border: 1px solid;
  margin: 1%;
}

.MistLogo {
  font-family: Arial, Helvetica, "liberation_sansblack_italic";
  font-weight: 700;
  font-style: italic;
}

input[type="text"] {
  color: #ffffff;
  color: var(--light-color);
  background-color: #6e6e6e;
  background: var(--darkgrey-color);
  font-family: "Rubik";
  border: 2px solid var(--glow-color);
  border-radius: 5px;
}

.verybold {
  font-family: "Rubik";
}

/* checkbox styling */

.checkboxtext {
  /* Checkbox text */
  display: flex;
  float: right;
  align-items: center;
  height: 100%;
  margin: auto;
}

.checkbox-container {
  display: flex;
  align-items: center;
}

.checkbox-container label {
  cursor: pointer;
  display: flex;
}

.checkbox-container input[type="checkbox"] {
  cursor: pointer;
  opacity: 0;
  position: absolute;
}

.checkbox-container label::before {
  content: "";
  width: 1em;
  height: 1em;
  border-radius: 0.15em;
  margin-right: 0.5em;
  border: #6e6e6e;
  border: 0.05em solid var(--darkgrey-color);
}

.checkbox-container label:hover::before,
.checkbox-container input[type="checkbox"]:hover + label::before {
  background-color: #5296ab;
  background-color: var(--main-color);
}

.checkbox-container input[type="checkbox"]:focus + label::before {
  box-shadow: 0 0 20px #16252f;
  box-shadow: 0 0 20px var(--bg-color);
}

.checkbox-container input[type="checkbox"]:disabled + label,
.checkbox-container input[type="checkbox"]:disabled {
  color: var(--grey-color);
  cursor: default;
}

.checkbox-container input[type="checkbox"]:checked + label::before {
  content: "\002714";
  background-color: #5296ab;
  background-color: var(--main-color);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  color: var(--light-color);
}

.checkbox-container input[type="checkbox"]:disabled + label::before {
  background-color: #ffffff;
  background-color: var(--light-color);
  border-color: var(--grey-color);
}

.imgglow {
  -webkit-filter: drop-shadow(0px 0px 7px var(--glow-color));
  filter: drop-shadow(0px 0px 7px var(--glow-color));
}

/* Homepage */

#welcomeparagraph {
  text-shadow: 1px 1px 2px var(--grey-color);
}

.navbarselected {
  text-shadow: 0 0 0.2vw var(--glow-color);
}

#WTSLink {
  color: #ffffffa0;
  -webkit-text-decoration-line: underline;
  text-decoration-line: underline;
  font-style: italic;
  cursor: pointer;
}

#WTSLink:hover {
  color: #ffffff;
}

/* Oh hey look, it's the guide! I HATE THE GUIDE. */

.chatname {
  display: inline;
}

#guidedybgold {
  z-index: 99999;
}

.mod {
  background-color: #ffff00;
  color: #000;
  border-radius: 5px;
  font-size: 90%;
  padding: 0.1%;
}

.mist {
  background-color: #95d9ee;
  color: #000;
  border-radius: 5px;
  font-size: 80%;
  padding: 0.1%;
}
.warning {
  background-color: #ffbb00;
  color: #000;
  border-radius: 5px;
  font-size: 80%;
  padding: 0.1%;
}
.error {
  background-color: #ff0000;
  color: #000;
  border-radius: 5px;
  font-size: 80%;
  padding: 0.1%;
}
.system {
  background-color: #808080;
  color: #000;
  border-radius: 5px;
  font-size: 80%;
  padding: 0.1%;
}

.channel {
  cursor: pointer;
}

/* MWM Panel */

.good {
  color: green;
}

.bad {
  color: red;
}

.GREYPLZ {
  color: grey;
}

.edit {
  display: none;
}

#PanelEditButton {
  cursor: pointer;
}

#PanelEditButton:hover {
  text-decoration: underline;
}

/* CSS Keyframes, folks? */

@-webkit-keyframes fadeandmoveup {
  0% {
    transform: translateY(10%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 100%;
  }
}

@keyframes fadeandmoveup {
  0% {
    transform: translateY(10%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 100%;
  }
}

@-webkit-keyframes fadeandmovedown {
  0% {
    transform: translateY(0);
    opacity: 100%;
  }

  100% {
    transform: translateY(10%);
    opacity: 0;
  }
}

@keyframes fadeandmovedown {
  0% {
    transform: translateY(0);
    opacity: 100%;
  }

  100% {
    transform: translateY(10%);
    opacity: 0;
  }
}

@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeout {
  0% {
    opacity: 100%;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeout {
  0% {
    opacity: 100%;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes movepartners {
  100% {
    transform: translateX(-100%);
  }
}

@keyframes movepartners {
  100% {
    transform: translateX(-100%);
  }
}

.MTTLogo {
  width: auto;
}

/* Icons */
.MistyLoading {
  width: 1.2vw;
  height: 1.2vw;
}
.MistyLoadingBig {
  width: 10vw;
  height: 10vw;
}

/* thank you stack overflow https://stackoverflow.com/questions/8911247/hide-iphone-html5-video-play-button */

/* This used to work for the parent element of button divs */
/* But it does not work with newer browsers, the below doesn't hide the play button parent div */

*::-webkit-media-controls-panel {
  display: none !important;
  -webkit-appearance: none;
}

/* Old shadow dom for play button */

*::-webkit-media-controls-play-button {
  display: none !important;
  -webkit-appearance: none;
}

/* New shadow dom for play button */

/* This one works! */

*::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

*::-webkit-media-controls-enclosure {
  display: none !important;
  -webkit-appearance: none;
}

/* Loading */
#loading {
  position: absolute;
  height: 100vh;
  width: 100vw;
  display: flex;
  background-color: #16252f;
  background-color: var(--bg-color);
  z-index: 100;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

#loadingin {
  position: absolute;
  height: 100vh;
  width: 100vw;
  display: flex;
  background-color: #16252f;
  background-color: var(--bg-color);
  z-index: 100;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  opacity: 0;
}

.ThisIsALink {
  color: #5296ab;
  color: var(--main-color);
  text-decoration: underline;
  pointer-events: initial;
  transition: color 0.5s, text-shadow 0.5s;
}

.ThisIsALink:hover {
  color: #a1dffd;
  color: var(--glow-color);
  text-decoration: underline;
  cursor: pointer;
  text-shadow: 3px 3px 0 #000000a0;
  text-shadow: 3px 3px 0 var(--blacksemitranslucent-color);
}

/* Animation classes */
.fadeout {
  -webkit-animation: 0.5s linear fadeout;
  animation: 0.5s linear fadeout;
}

.fadein {
  animation: 0.5s linear fadein both;
  -moz-animation: 0.5s linear fadein both;
  -webkit-animation: 0.5s linear fadein both;
}

/* Frostcast */
.station {
  cursor: pointer;
}

/* Bulletin */
#bulletinarticle {
  margin-bottom: 2vh;
}

/* Meet The Team*/

#meettheteam {
  background-color: #00000080;
  background-color: var(--blacktranslucent-color);
}

#mttimage {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  width: 100vw;
  height: 25cqh;
}

#TheTeam {
  display: flex;
  flex-direction: column;
  text-align: center;
  vertical-align: middle;
  margin: auto;
}

.TheTeamNames {
  display: block;
}

/* Simulator Page */

#SimDiv {
  padding: 2vw;
  transition: background 1s;
  background: url(images/bg.webp);
  background: image-set(image);
  background-position: center;
  background-size: cover;
}

#SimContent {
  padding: 2vw;
  background: #00000080;
  background: var(--blacktranslucent-color);
}

.grid {
  display: grid;
  row-gap: 1vw;
  -moz-column-gap: 0.1vw;
  column-gap: 0.1vw;
}

.SimButton {
  border-radius: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 4em;
  padding: 2%;
  text-align: center;
  overflow: hidden;
}

.SimButton h3 {
  font-size: 1em;
}

#WScanV2 {
  background: linear-gradient(#00000080, #00000080),
    url(images/simscreenshots/wscanv2.png);
  background: linear-gradient(
      var(--blacktranslucent-color),
      var(--blacktranslucent-color)
    ),
    url(images/simscreenshots/wscanv2.png);
  background-size: cover;
  background-position: center;
}

#WScanV1 {
  background: linear-gradient(#00000080, #00000080),
    url(images/simscreenshots/wscanv1.png);
  background: linear-gradient(
      var(--blacktranslucent-color),
      var(--blacktranslucent-color)
    ),
    url(images/simscreenshots/wscanv1.png);
  background-size: cover;
  background-position: center;
}

#WStar3000 {
  background: linear-gradient(#00000080, #00000080),
    url(images/simscreenshots/wstar3000.png);
  background: linear-gradient(
      var(--blacktranslucent-color),
      var(--blacktranslucent-color)
    ),
    url(images/simscreenshots/wstar3000.png);
  background-size: cover;
  background-position: center;
}

#WStar4000 {
  background: linear-gradient(#00000080, #00000080),
    url(images/simscreenshots/WStar4000.png);
  background: linear-gradient(
      var(--blacktranslucent-color),
      var(--blacktranslucent-color)
    ),
    url(images/simscreenshots/WStar4000.png);
  background-size: cover;
  background-position: center;
}

#WStarJr {
  background: linear-gradient(#00000080, #00000080),
    url(images/simscreenshots/WStarJr.png);
  background: linear-gradient(
      var(--blacktranslucent-color),
      var(--blacktranslucent-color)
    ),
    url(images/simscreenshots/WStarJr.png);
  background-size: cover;
  background-position: center;
}

#WeirdScan {
  background: linear-gradient(#00000080, #00000080),
    url(images/simscreenshots/wescan.png);
  background: linear-gradient(
      var(--blacktranslucent-color),
      var(--blacktranslucent-color)
    ),
    url(images/simscreenshots/wescan.png);
  background-size: cover;
  background-position: center;
}

#WideScan {
  background: linear-gradient(#00000080, #00000080),
    url(images/simscreenshots/widescan.png);
  background: linear-gradient(
      var(--blacktranslucent-color),
      var(--blacktranslucent-color)
    ),
    url(images/simscreenshots/widescan.png);
  background-size: cover;
  background-position: center;
}

#WHDS {
  background: linear-gradient(#00000080, #00000080),
    url(images/simscreenshots/whds.jpg);
  background: linear-gradient(
      var(--blacktranslucent-color),
      var(--blacktranslucent-color)
    ),
    url(images/simscreenshots/whds.jpg);
  background-size: cover;
  background-position: center;
}

#LCLScope {
  background: linear-gradient(#00000080, #00000080),
    url(images/simscreenshots/localscope.jpg);
  background: linear-gradient(
      var(--blacktranslucent-color),
      var(--blacktranslucent-color)
    ),
    url(images/simscreenshots/localscope.jpg);
  background-size: cover;
  background-position: center;
}

#SkyCST3000 {
  background: linear-gradient(#00000080, #00000080),
    url(images/simscreenshots/SkyCast3000.png);
  background: linear-gradient(
      var(--blacktranslucent-color),
      var(--blacktranslucent-color)
    ),
    url(images/simscreenshots/SkyCast3000.png);
  background-size: cover;
  background-position: center;
}

#WRWScan {
  background: linear-gradient(#00000080, #00000080),
    url(images/simscreenshots/WRWScan.png);
  background: linear-gradient(
      var(--blacktranslucent-color),
      var(--blacktranslucent-color)
    ),
    url(images/simscreenshots/WRWScan.png);
  background-size: cover;
  background-position: center;
}

#WRWScanV1 {
  background: linear-gradient(#00000080, #00000080),
    url(images/simscreenshots/WRWScanV1.png);
  background: linear-gradient(
      var(--blacktranslucent-color),
      var(--blacktranslucent-color)
    ),
    url(images/simscreenshots/WRWScanV1.png);
  background-size: cover;
  background-position: center;
}

/* Featured Products */

#FeaturedProducts {
  padding-top: 0.1%;
  padding-bottom: 5%;
  background-color: #000000aa;
}

.product {
  text-align: center;
  padding: 1%;
  background-position: center;
  background-size: cover;
  text-shadow: 1px 1px 0px #000000;
}
#CIRRUS {
  background: linear-gradient(#00000080, #00000080),
    url(images/Products/CIRRUS.webp);
  background: linear-gradient(
      var(--blacktranslucent-color),
      var(--blacktranslucent-color)
    ),
    url(images/Products/CIRRUS.webp);
  background-position: center;
  background-size: cover;
}

#OpenSTAR {
  background: linear-gradient(#00000080, #00000080),
    url(images/Products/OpenSTAR.webp);
  background: linear-gradient(
      var(--blacktranslucent-color),
      var(--blacktranslucent-color)
    ),
    url(images/Products/OpenSTAR.webp);
  background-position: center;
  background-size: cover;
}

#WXEngine {
  background: linear-gradient(#00000080, #00000080),
    url(images/Products/#WXEngine.webp);
  background: linear-gradient(
      var(--blacktranslucent-color),
      var(--blacktranslucent-color)
    ),
    url(images/Products/MistWXEngine.webp);
  background-position: center;
  background-size: cover;
}

#WXArtist {
  background: linear-gradient(#00000080, #00000080),
    url(images/Products/MistWXArtist.webp);
  background: linear-gradient(
      var(--blacktranslucent-color),
      var(--blacktranslucent-color)
    ),
    url(images/Products/MistWXArtist.webp);
  background-position: center;
  background-size: cover;
}

/* Stream With Us */
#streamwithus {
  background-image: url(images/mistbg2025.webp);
  background-position: center;
  background-size: cover;
}

#swuwindow {
  background-color: #00000099;
  padding: 1%;
  text-align: center;
}

#streamwithusol {
  font-size: medium;
}

/* Settings */
#settingspage {
  padding: 2%;
}

/* Credits */
#credits {
  background-color: #000;
  padding: 2%;
  text-align: center;
  overflow-y: scroll;
  overflow-y: hidden;
}

/* Weather Widget */
#wxWidgetFSClose {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  cursor: pointer;
  display: none;
  z-index: 32;
}