@import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap");
* {
  box-sizing: border-box; }

#container {
  height: 100%;
  display: flex;
  flex-flow: column; }

#menuBar {
  display: flex;
  width: 100%;
  height: 60px;
  background-color: #37474f;
  padding: 0 16px;
  box-sizing: border-box; }

#menuBar::before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: inherit;
  transform: translateY(20px) scale(0.95);
  filter: blur(20px);
  opacity: 0.6;
  transition: opacity 0.3s; }

#canvasContainer {
  overflow: hidden;
  width: 100%;
  flex-grow: 1; }

#canvas {
  height: 100%;
  width: 2000px; }

#bar {
  display: flex;
  width: 60px;
  height: 60px;
  flex-direction: column; }

.bars div {
  width: 40px;
  height: 5px;
  background-color: #fff;
  transition: 0.4s; }

.bar1 {
  margin-top: 16px; }

.bar2, .bar3 {
  margin-top: 6px; }

.change .bar1 {
  transform: rotate(-45deg) translate(-9px, 6px); }

.change .bar2 {
  opacity: 0; }

.change .bar3 {
  transform: rotate(45deg) translate(-8px, -8px); }

#menuOverlay {
  position: absolute;
  display: none;
  width: 65%;
  height: 50%;
  padding-left: 16px;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #37474fa8; }

#title-menuBar {
  display: flex;
  flex-grow: 1;
  height: 60px;
  height: 100%;
  color: #fff;
  font-size: 28px;
  font-family: Lobster, sans-serif;
  flex-direction: column;
  justify-content: center;
  text-align: center; }

.buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center; }

.button-container div {
  display: flex;
  color: #37474f;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  text-align: center; }

.buttons > div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center; }

.button-container p {
  background-color: #fff;
  border-radius: 10px;
  padding: 5px;
  font-size: 20px; }

#clearCanvasMenuBar {
  margin-left: auto;
  margin-right: 5px; }

.canMenu {
  display: flex;
  flex-direction: column;
  width: 100%; }

.toHide {
  display: none; }

.theta {
  width: 100%;
  /*     padding-left: 16px; */
  font-size: 30px;
  font-style: italic;
  font-weight: bold;
  border: none;
  color: #fff; }

.theta input {
  width: 50%;
  padding: 0;
  height: 30px;
  font-size: 30px;
  font-style: italic;
  color: #37474f;
  border: none;
  background-color: #fff; }

.functionButtons {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100%; }

.funRowOne {
  display: flex;
  flex-direction: row; }

.funRowOne > div {
  display: flex;
  justify-content: center;
  align-items: center; }

.funRowTwo {
  display: flex;
  flex-direction: row; }

.funRowTwo > div {
  display: flex;
  justify-content: center;
  align-items: center; }

.functionButtons div {
  width: 65px;
  height: 60px;
  margin-left: 6px;
  align-items: center; }

.functionButtons > div {
  background-color: unset;
  margin: 0;
  padding: 0; }

#sin {
  margin-left: 0px; }

#cot {
  margin-left: 0px; }

.rowThree {
  margin-top: 25px;
  background-color: blue; }

.rowThree div {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 25px;
  margin-left: 0px; }

.functionButtons button {
  border: none;
  padding: 0;
  color: #37474f;
  background-color: #fff;
  font-size: 15px;
  font-weight: bold;
  width: 55px;
  height: 35px;
  border-radius: 4px; }

.rowThree button {
  font-size: 20px;
  width: 70px;
  background-color: yellowgreen; }

button:active {
  opacity: 0.5;
  transition: 0.5; }

p:active {
  opacity: 0.5;
  transition: 0.5; }

/*# sourceMappingURL=smallMobile.css.map */