@import './common/font/camphor.scss';
@import './common/palette.scss';
@import './common/constants.scss';

body {
  margin: 0;
  font-family: 'Camphor' !important;
  font: 400 13.333px 'Camphor' !important;
  overflow-x: hidden;
  width: 100vw;
  background-color: $orange;
}

.root-container {
  //box-shadow: 0 30px 40px rgba(0,0,0,.1);
  padding: 2em;
  margin-top: 2em;
  height: 90vh;
  display: flex;
  flex-direction: column;

  .header {
    background-image: url('../../assets/images/Maanteeamet.png');
    background-size: cover;
    height: 120px;
    margin-bottom: 3em;
    background-repeat: no-repeat;
    background-position: center;
  }

  img {
    text-align: center;
  }
}

.button-container {
  margin-top: 1em;
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  button {
    margin: 0.25em;
    font-family: inherit;

    &.light {
      background-color: rgba(255, 121, 121, 0.5);
      border: 1px solid rgba(255, 121, 121, 1.0);
    }
  }
}

.capture-container {
  canvas {
    max-width: 100%;
    width: 100%;
  }

  & img {
    max-width: 100%;
    max-height: auto;
  }
}