/* Color Schemes */
:root {
  --blue: #0b5eaa;
  --yellow: #DB8B2D;
  --red: #B23028;
  --green: #005959;
  --white: #FFF;
  --light-grey: #dbfdff;
  --dark-grey: #999;
  --black: #000;
}

/* Font Colors */
.text-blue {color: var(--blue);}
.text-yellow {color: var(--yellow);}
.text-red {color: var(--red);}
.text-green {color: var(--green);}
.text-white {color: var(--white);}
.text-light-grey {color: var(--light-grey);}
.text-dark-grey {color: var(--dark-grey);}
.text-black {color: var(--black);}

/* Background Colors */
.bg-blue {background-color: var(--blue);}
.bg-yellow {background-color: var(--yellow);}
.bg-red {background-color: var(--red);}
.bg-green {background-color: var(--green);}
.bg-white {background-color: var(--white);}
.bg-light-grey {background-color: var(--light-grey);}
.bg-dark-grey {background-color: var(--dark-grey);}
.bg-black {background-color: var(--black);}

/* General Fonts */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Regular.otf');
  font-weight: normal;
}
@font-face {
  font-family: 'Montserrat';
  src: url(../fonts/Montserrat-Bold.ttf);
  font-weight: bold;
}
@font-face {
  font-family: 'Montserrat';
  src: url(../fonts/Montserrat-Italic.otf);
  font-weight: normal;
  font-style: italic;
}

body {
  font-family: 'Montserrat';
}

.custom-font {
  font-family: 'Montserrat';
}

/* Header */
.header-bar {
  padding: 1rem;
  transition: 0.3s;
  margin: 0;
}
@media (min-width: 576px) { .header-bar {padding: 1rem 1rem} }
@media (min-width: 768px) { .header-bar {padding: 1rem 1rem} }
@media (min-width: 992px) { .header-bar {padding: 1rem 25%} }
@media (min-width: 1200px) { .header-bar {padding: 1rem 25%} }
@media (min-width: 1400px) { .header-bar {padding: 1rem 25%} }
.header-bar img {
  filter: invert(1);
}
.header-bar a {
  color: var(--white);
}
.header-bar.scrolled {
  background-color: var(--white);
  transition: 0.3s;
}
.header-bar.scrolled img {
  filter: none;
}
.header-bar.scrolled a {
  color: var(--white);
}

.invert-image {
  filter: invert(1);
}

.canvas-container,
.upper-canvas,
.lower-canvas {
  max-width: 480px !important;
  max-height: 480px !important;
}
#bcaTextbox {
  width: 480px !important;
}
@media (max-width: 512px) {
  .canvas-container,
  .upper-canvas,
  .lower-canvas {
    max-width: 90vw !important;
    max-height: 90vw !important;
  }
  #bcaTextbox {
    width: 90vw !important;
  }
}
.upper-canvas,
.lower-canvas {
  display: block;
  margin: auto;
  right: 0;
}

.bca-frame-preview {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 480px;
  height: 480px;
  max-width: 90vw;
  max-height: 90vw;
  pointer-events: none;
}

.btn-primary {
  background-color: var(--blue);
  border-color: var(--blue);
}

.bca-border-radius {
  border-radius: 25px;
}

.button-panel button {
  border-radius: 15px;
}