/* You can add global styles to this file, and also import other style files */

@font-face {
  font-family: 'RobotoTodd';
  src: url("assets/fonts/Roboto-Regular.ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'RobotoTodd';
  src: url("assets/fonts/Roboto-Bold.ttf");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'TechMono';
  src: url("assets/fonts/TechMono.ttf");
  font-weight: normal;
  font-style: normal;
}

$primary-color: rgb(0, 242, 0);
$secondary-color: rgb(0 242 0 / 30%);
$screen-width: 460px;

html, body { height: 320px; width: $screen-width; background-color: black }
body {
  margin: 0;
  font-family: RobotoTodd, "Helvetica Neue", sans-serif;
  color: rgb(0, 0.949*255, 0)
}

.activeHeader {
  border-left: 2px solid $primary-color;
  border-right: 2px solid $primary-color;
}

.inactiveHeader {
  color: $secondary-color;
}

.footer {
  #background-color: $secondary-color;
  position: fixed;
  left: 0;
  bottom: 0;
  width: $screen-width;
  height: 6.5%;
}

.footer-text {
  background-color: $secondary-color;
}

.menu-selected {
  background-color: $primary-color;
  color: black;
}

.mat-dialog-container {
  background: black;
  color: $primary-color;
}

.cdk-overlay-pane {
  max-width: 100% !important;
}

.rotating-image {
  animation: rotateY 3s linear infinite;
}

@keyframes rotateY {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}