/*
* ==========================================
* IMPORTS
* ==========================================
*/
/*
* ==========================================
* IMPORTS
* ==========================================
*/
/*
* ==========================================
* SCSS VARIABLES
* ==========================================
*/
/* Light Mode */
/* Dark Mode */
/* Font families */
/* Z-index and others */
/*
* ==========================================
* DARK MODE STYLES
* ==========================================
*/
body.dark-mode {
  background: linear-gradient(to right, rgb(50, 150, 255), rgb(30, 30, 30));
  color: rgb(200, 200, 200);
}

button.dark-mode:hover, button.dark-mode:focus {
  background-color: rgb(20, 20, 20);
}

p.dark-mode {
  color: white;
}

/*
* ==========================================
* SCSS VARIABLES
* ==========================================
*/
/* Light Mode */
/* Dark Mode */
/* Font families */
/* Z-index and others */
/*
* ==========================================
* MIXINS
* ==========================================
*/
* {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

body {
  background: linear-gradient(rgba(142, 234, 250, 0.452), rgba(108, 147, 156, 0.5), rgba(191, 230, 248, 0.5), rgba(10, 75, 43, 0.5)), linear-gradient(to right, #98cdf8, #d3f3b4);
  min-height: 100vh;
  overflow-x: hidden;
  color: rgb(23, 26, 29);
  margin: 0;
  padding: 0;
  text-align: center;
}

button {
  padding: 0.5em;
  border-radius: 15px;
}
button:hover, button:focus {
  background-color: rgb(177, 190, 140);
  cursor: pointer;
}

p {
  line-height: 2em;
  text-align: center;
  margin: auto;
}

li {
  list-style: none;
}

/*
* ==========================================
* PIXEL TEST STYLES
* ==========================================
*/
#canvas {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

#controls {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
}
#controls button {
  margin: 10px;
  padding: 10px 20px;
  font-size: 16px;
  background-color: #f8f9fa;
  border: 2px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
#controls button:hover {
  background-color: #e2e6ea;
}

.hidden {
  display: none;
}

/*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*/
.separator {
  margin: 3rem 0;
  border-bottom: 1px dashed #fff;
}

.text-uppercase {
  letter-spacing: 0.1em;
}

.subtitle {
  color: rgb(70, 69, 69);
}

.key {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.75em;
  min-width: 3em;
  min-height: 1.5em;
  margin: 0.1em;
  border: 2px solid gray;
  padding: 0.5em;
}

.keyboard-main-area {
  display: inline-block;
}

.page-container {
  text-align: center;
}
.page-container div {
  text-align: center;
}

#Space,
#AltLeft,
#AltRight,
#ControlLeft,
#ControlRight {
  width: 6em;
}

#Space {
  width: 18em;
}

/*
* ==========================================
* AUDIO VISUALIZER STYLES
* ==========================================
*/
#videoPlayer {
  border: 1px solid black;
  width: 321px;
  height: 241px;
}

#visualizer-container {
  height: 200px;
  border: 1px solid black;
  width: 306px;
  margin: auto;
}

.visualizer-container-bar {
  max-height: 200px;
  display: inline-block;
  background: black;
  margin: 0 2px;
  width: 2px;
}

#visualizer-height {
  height: 200px;
  display: inline-block;
  background: transparent;
  margin: 0;
  width: 0;
  position: relative;
}

/*
* ==========================================
* POPUP STYLES
* ==========================================
*/
.popup {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.popup-content {
  background-color: rgb(177, 190, 140);
  margin: 15% auto;
  padding: 20px;
  border-radius: 10px;
  width: 80%;
  height: auto;
}

.popBtn {
  color: rgb(23, 26, 29);
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.popBtn:hover, .popBtn:focus {
  color: rgb(0, 89, 253);
  text-decoration: none;
  cursor: pointer;
}

/*
* ==========================================
* NAVIGATION STYLES
* ==========================================
*/
.vertical-nav {
  min-width: 17rem;
  width: 17rem;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.4s;
  z-index: 1;
}

.nav-item {
  font-style: italic;
}
.nav-item:active {
  color: rgb(0, 89, 253);
  text-decoration: none;
  cursor: pointer;
}

/*
* ==========================================
* PAGE CONTENT STYLES
* ==========================================
*/
.page-content {
  width: calc(100% - 17rem);
  margin-left: 17rem;
  transition: all 0.4s;
}

#vertical-sidebar.active {
  margin-left: -17rem;
}

#content.active {
  width: 100%;
  margin: 0;
}

.dim {
  filter: opacity(25%);
}

.test {
  margin: 10px;
}

/*
* ==========================================
* MEDIA QUERIES
* ==========================================
*/
@media (max-width: 1024px) {
  #micCamTests {
    flex-direction: column;
  }
}
@media (max-width: 768px) {
  .dim {
    filter: opacity(1);
  }
  .vertical-nav {
    min-width: 100vw;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.4s;
    z-index: 1;
  }
  .page-content {
    width: -100%;
    transition: all 0.4s;
  }
  #vertical-sidebar {
    margin-left: -100vw;
  }
  #vertical-sidebar.active {
    margin-left: 0;
  }
  #content {
    width: 100vw;
    margin: 0;
  }
  #content.active {
    width: 100vw;
  }
  #keyboard-section,
  #network {
    display: none;
  }
  #visualizer-container,
  #videoPlayer {
    max-width: 50%;
    max-height: 50%;
  }
}/*# sourceMappingURL=style.css.map */