@use "themer";
@use "sass:color";

@import "/node_modules/bootstrap/scss/bootstrap-utilities.scss";
@import "/node_modules/bootstrap/scss/root";
@import "/node_modules/bootstrap/scss/helpers";
@import "/node_modules/bootstrap/scss/reboot";
@import "/node_modules/bootstrap/scss/containers";
@import "/node_modules/bootstrap/scss/type";

.pages {
  display: flex;
  flex-direction: column;

  .page {
    background-size: cover;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .title {
      @extend .container;
      @extend .my-3;
      text-align: center;
      max-width: 30rem;
      margin: 0px;
    }

    .content {
      @extend .container;
      @extend .my-3;
      max-width: 30rem;
      margin: 0px;
    }
  }
}

.panels {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  width: 100%;
  .panel {
    background-size: cover;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

main {
  min-height: 100vh;
  @include themer.themed {
    color: themer.color-of("text");
    background-color: themer.color-of("background");
  }
}

code {
  padding: 2px;
  padding-left: 4px;
  padding-right: 4px;
  @include themer.themed {
    color: themer.color-of("special");
    background-color: color.invert(themer.color-of("special"), 100%);
  }

  border-radius: 2px;
  border-width: 1px;
  border-style: solid;
  font-size: 1.05rem;
}
