.alerts {
  position: fixed;
  left: 50%;
  top: 5%;
  transform: translateX(-50%);
  width: 80%;
  text-align: center;
  z-index: 1060; }

.checkbox-pill {
  --size: 1rem;
  display: inline-block;
  padding: 5px; }
  .checkbox-pill .checkbox {
    display: none; }
  .checkbox-pill .checkbox:checked + .checkbox-label {
    background: var(--color-mid); }
    .checkbox-pill .checkbox:checked + .checkbox-label:hover {
      background: var(--color-dark); }
  .checkbox-pill .checkbox:checked + .checkbox-label:after {
    left: 2.15rem; }
  .checkbox-pill .checkbox-label {
    border-radius: 2.5rem;
    user-select: none;
    background: #dddddd;
    color: transparent;
    cursor: pointer;
    display: block;
    position: relative;
    text-indent: 100%;
    width: calc(var(--size) * 3.4);
    height: calc(var(--size) * 1.5);
    transition: all 400ms ease 0s;
    margin-bottom: 0; }
  .checkbox-pill .checkbox-label:after {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    content: '';
    border-radius: 50%;
    background: white;
    display: block;
    width: calc(var(--size) * 0.95);
    height: calc(var(--size) * 1);
    transition: left 400ms cubic-bezier(0.68, -0.3, 0.265, 1.3) 0s; }
  .checkbox-pill .text-label {
    font-size: 0.6em;
    width: 100%;
    text-align: center;
    display: inline-block;
    transform: translateY(-8px); }

/*! Pickr 1.6.0 MIT | https://github.com/Simonwep/pickr */.pickr{position:relative;overflow:visible;transform:translateY(0)}.pickr *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr .pcr-button{position:relative;height:2em;width:2em;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;border-radius:.15em;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat 50%;background-size:0;transition:all .3s}.pickr .pcr-button:before{background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;z-index:-1;z-index:auto}.pickr .pcr-button:after,.pickr .pcr-button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;border-radius:.15em}.pickr .pcr-button:after{transition:background .3s;background:currentColor}.pickr .pcr-button.clear{background-size:70%}.pickr .pcr-button.clear:before{opacity:0}.pickr .pcr-button.clear:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px currentColor}.pickr .pcr-button.disabled{cursor:not-allowed}.pcr-app *,.pickr *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pcr-app button.pcr-active,.pcr-app button:focus,.pcr-app input.pcr-active,.pcr-app input:focus,.pickr button.pcr-active,.pickr button:focus,.pickr input.pcr-active,.pickr input:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px currentColor}.pcr-app .pcr-palette,.pcr-app .pcr-slider,.pickr .pcr-palette,.pickr .pcr-slider{transition:box-shadow .3s}.pcr-app .pcr-palette:focus,.pcr-app .pcr-slider:focus,.pickr .pcr-palette:focus,.pickr .pcr-slider:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px rgba(0,0,0,.25)}.pcr-app{position:fixed;display:flex;flex-direction:column;z-index:10000;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03);left:0;top:0}.pcr-app.visible{transition:opacity .3s;visibility:visible;opacity:1}.pcr-app .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em}.pcr-app .pcr-swatches.pcr-last{margin:0}@supports (display:grid){.pcr-app .pcr-swatches{display:grid;align-items:center;grid-template-columns:repeat(auto-fit,1.75em)}}.pcr-app .pcr-swatches>button{font-size:1em;position:relative;width:calc(1.75em - 5px);height:calc(1.75em - 5px);border-radius:.15em;cursor:pointer;margin:2.5px;flex-shrink:0;justify-self:center;transition:all .15s;overflow:hidden;background:transparent;z-index:1}.pcr-app .pcr-swatches>button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:6px;border-radius:.15em;z-index:-1}.pcr-app .pcr-swatches>button:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:currentColor;border:1px solid rgba(0,0,0,.05);border-radius:.15em;box-sizing:border-box}.pcr-app .pcr-swatches>button:hover{-webkit-filter:brightness(1.05);filter:brightness(1.05)}.pcr-app .pcr-swatches>button:not(.pcr-active){box-shadow:none}.pcr-app .pcr-interaction{display:flex;flex-wrap:wrap;align-items:center;margin:0 -.2em}.pcr-app .pcr-interaction>*{margin:0 .2em}.pcr-app .pcr-interaction input{letter-spacing:.07em;font-size:.75em;text-align:center;cursor:pointer;color:#75797e;background:#f1f3f4;border-radius:.15em;transition:all .15s;padding:.45em .5em;margin-top:.75em}.pcr-app .pcr-interaction input:hover{-webkit-filter:brightness(.975);filter:brightness(.975)}.pcr-app .pcr-interaction input:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px rgba(66,133,244,.75)}.pcr-app .pcr-interaction .pcr-result{color:#75797e;text-align:left;flex:1 1 8em;min-width:8em;transition:all .2s;border-radius:.15em;background:#f1f3f4;cursor:text}.pcr-app .pcr-interaction .pcr-result::-moz-selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-result::selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-type.active{color:#fff;background:#4285f4}.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear,.pcr-app .pcr-interaction .pcr-save{width:auto;color:#fff}.pcr-app .pcr-interaction .pcr-cancel:hover,.pcr-app .pcr-interaction .pcr-clear:hover,.pcr-app .pcr-interaction .pcr-save:hover{-webkit-filter:brightness(.925);filter:brightness(.925)}.pcr-app .pcr-interaction .pcr-save{background:#4285f4}.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{background:#f44250}.pcr-app .pcr-interaction .pcr-cancel:focus,.pcr-app .pcr-interaction .pcr-clear:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px rgba(244,66,80,.75)}.pcr-app .pcr-selection .pcr-picker{position:absolute;height:18px;width:18px;border:2px solid #fff;border-radius:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pcr-app .pcr-selection .pcr-color-chooser,.pcr-app .pcr-selection .pcr-color-opacity,.pcr-app .pcr-selection .pcr-color-palette{position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:column;cursor:grab;cursor:-webkit-grab}.pcr-app .pcr-selection .pcr-color-chooser:active,.pcr-app .pcr-selection .pcr-color-opacity:active,.pcr-app .pcr-selection .pcr-color-palette:active{cursor:grabbing;cursor:-webkit-grabbing}.pcr-app[data-theme=nano]{width:14.25em;max-width:95vw}.pcr-app[data-theme=nano] .pcr-swatches{margin-top:.6em;padding:0 .6em}.pcr-app[data-theme=nano] .pcr-interaction{padding:0 .6em .6em}.pcr-app[data-theme=nano] .pcr-selection{display:grid;grid-gap:.6em;grid-template-columns:1fr 4fr;grid-template-rows:5fr auto auto;align-items:center;height:10.5em;width:100%;align-self:flex-start}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview{grid-area:2/1/4/1;height:100%;width:100%;display:flex;flex-direction:row;justify-content:center;margin-left:.6em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-last-color{display:none}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color{position:relative;background:currentColor;width:2em;height:2em;border-radius:50em;overflow:hidden}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette{grid-area:1/1/2/3;width:100%;height:100%;z-index:1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette{border-radius:.15em;width:100%;height:100%}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser{grid-area:2/2/2/2}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity{grid-area:3/2/3/2}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity{height:.5em;margin:0 .6em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-picker{top:50%;transform:translateY(-50%)}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider{flex-grow:1;border-radius:50em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider{background:linear-gradient(90deg,transparent,#000),url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:100%,.25em}
.pickr {
  width: 100%; }
  .pickr .pcr-button {
    width: 100%; }
    .pickr .pcr-button::after {
      border: 1px solid var(--text-color); }

.customizations {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 10px; }

.manage-fonts {
  --transition: opacity ease-in-out 100ms; }
  .manage-fonts .form-control {
    border-radius: .25rem 0 0 .25rem; }
  .manage-fonts .add-font-button {
    border-radius: 0 .25rem .25rem 0; }
  .manage-fonts .manage-fonts__remove {
    opacity: 0;
    transition: var(--transition); }
  .manage-fonts .manage-fonts__list-group-item:hover .manage-fonts__remove {
    opacity: 1;
    transition: var(--transition); }

.manage-fonts__list-group {
  max-height: 470px;
  overflow-y: auto; }

.dark-mode-toggle {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 1fr;
  align-items: center; }

.date-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 5px; }

.feature-box-icon {
  width: 50px;
  height: 50px;
  color: var(--color-mid); }

:root {
  --image-scale: scale(1); }
  @media (min-width: 1082px) {
    :root {
      --image-scale: scale(1.3); } }
  @media (min-width: 1030px) {
    :root {
      --image-scale: scale(1.2); } }

.hero-container {
  height: 800px; }

.hero-banner {
  height: 80vh; }

.hero-image-column {
  position: relative; }
  @media (max-width: 991px) {
    .hero-image-column {
      display: none; } }

.hero-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) var(--image-scale);
  width: 100%;
  transition: transform 200ms ease-in-out; }

.latest-posts-container .list-group-item {
  background: none;
  border: 0;
  padding: 0; }

.latest-posts-container .list-group-item:hover {
  text-decoration: underline; }

.latest-posts-container h2 a:hover {
  color: white;
  text-decoration: none; }

.navbar-brand {
  font-size: 1.7em; }
  .navbar-brand .navbar-link {
    color: inherit; }
    .navbar-brand .navbar-link:hover {
      text-decoration: none; }

.preview-image-container {
  padding: 20px 0; }

img {
  max-width: 100%; }

.sign-up .email {
  background-color: #ffffff;
  color: initial;
  border-color: transparent; }

.sign-up .form-control {
  background-color: #ffffff; }

.use-app {
  text-decoration: none;
  padding: 1em 0.5em; }

.feature-use-card {
  padding: 10px 0; }

.image-container {
  padding: 20px;
  background-color: white;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
  margin: 10px 0;
  display: inline-block; }

img {
  max-width: 100%; }

.change-log-article h2 {
  font-size: 1.4em;
  font-weight: 500; }

.change-log-article pre {
  background-color: #f9f9f9;
  box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.05);
  padding: 0.5em;
  border-radius: 2px;
  overflow-x: auto; }

.change-log-article pre code {
  background-color: transparent;
  padding: 0; }

.change-log-article ul {
  line-height: 1.5; }

.change-log-article li {
  margin: 0 0 0.5em 0; }

.navbar-container {
  background: var(--color-gradient-dark-mid); }

.design-container {
  display: grid;
  grid-gap: 30px;
  grid-template-rows: 1fr 100px;
  padding: 40px; }

.design-previews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  width: 100%; }
  .design-previews .date-icon {
    margin: 0 auto; }

.display-calendar-year {
  display: grid;
  position: relative;
  align-items: center;
  padding: 10px; }
  .display-calendar-year .calendar-year__label {
    padding-right: 5px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    margin-bottom: 0; }
  .display-calendar-year .calendar-year__input {
    text-align: center;
    font-size: 1.5em;
    border: 0; }
  .display-calendar-year .btn--year-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color); }
    .display-calendar-year .btn--year-control:focus {
      box-shadow: none; }
  .display-calendar-year .btn--previous-year {
    left: 0; }
  .display-calendar-year .btn--next-year {
    right: 0; }

.font-size-icon {
  transform: scaleX(-1); }

.footer {
  position: relative;
  padding: 10px;
  background-color: var(--background-color--footer);
  display: flex;
  justify-content: space-between; }

.page-footer .link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor; }

.generate-modal .modal-dialog {
  max-width: 50vw; }

.generate-row {
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .generate-row .form-label,
  .generate-row .form-check-input {
    cursor: pointer; }

.generate-label {
  flex-grow: 1; }

.generate-container {
  align-items: center;
  width: 100%;
  padding: 10px; }

.dashboard__header {
  position: relative; }

.design-toggle-container {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%); }

.panel {
  margin: 5px 0; }
  .panel:hover {
    box-shadow: 1px 1px 1px #888888;
    transition: box-shadow 100ms linear; }
  .panel .panel-header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px; }
  .panel .panel-label {
    font-size: 1.5em;
    color: #888; }
  .panel .checkbox-pill {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%); }
  .panel .colour-selector {
    background-color: transparent;
    padding: 0; }

.panel-control {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  align-items: center; }
  .panel-control .panel-control__label {
    display: flex;
    align-items: center; }
  .panel-control .panel-control__element {
    flex: 1 1 auto;
    padding-left: 10px; }

.radio-select-container .radio-select-options {
  list-style: none;
  display: flex;
  justify-content: space-around;
  margin: 0;
  padding: 0;
  flex-wrap: wrap; }

.radio-select-container .radio-select-option {
  padding: 8px 0; }

.radio-select-container .radio-select__radio:checked, .radio-select-container .radio-select__radio:not(:checked) {
  position: absolute;
  left: -9999px; }

.radio-select-container .radio-select__radio:checked + .radio-select__label,
.radio-select-container .radio-select__radio:not(:checked) + .radio-select__label {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  line-height: 20px;
  display: inline-block; }

.radio-select-container .radio-select__radio:checked + .radio-select__label:before,
.radio-select-container .radio-select__radio:not(:checked) + .radio-select__label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border: 1px solid #ddd;
  border-radius: 100%;
  background: #ffffff; }

.radio-select-container .radio-select__radio:checked + .radio-select__label:after,
.radio-select-container .radio-select__radio:not(:checked) + .radio-select__label:after {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--color-mid);
  position: absolute;
  top: 7px;
  left: 4px;
  border-radius: 100%;
  transition: all 0.2s ease; }

.radio-select-container .radio-select__radio:not(:checked) + .radio-select__label::after {
  opacity: 0;
  transform: scale(0); }

.radio-select-container .radio-select__radio:not(:checked) + .radio-select__label:hover::after {
  background: var(--color-light);
  opacity: 1;
  transform: scale(1); }

.radio-select-container .radio-select__radio:checked + .radio-select__label:after {
  opacity: 1;
  transform: scale(1); }

.radio-select-container .radio-select__label {
  font-size: 2em;
  line-height: 2em;
  vertical-align: middle; }


.slider {
  height: 3px; }
  .slider .slider-track-0 {
    background-color: var(--color-mid);
    height: 3px; }
  .slider.slider--radius .slider-track-0 {
    background-color: #e3e4e8; }
  .slider .slider-track-1 {
    background-color: #e3e4e8;
    height: 3px; }
  .slider .slider-thumb {
    border-radius: 50%;
    border: 5px solid #ffffff;
    background-color: var(--color-mid);
    width: 20px;
    height: 20px;
    transform: translate(-50%, calc(-50% + 1px));
    cursor: grab; }
    .slider .slider-thumb:hover {
      background-color: var(--color-dark); }
    .slider .slider-thumb:active {
      cursor: grabbing; }

.preparing-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; }

.donation-container {
  padding: 10px;
  margin-top: 30px; }
  .donation-container .paypal-logo {
    margin-top: 10px; }

.modal-close-container {
  width: 20px;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%); }
  .modal-close-container .btn {
    width: 100%; }

.join-community-button-container {
  display: inline-block;
  margin: 0 auto; }

:root {
  --heading-color--accent: #754dc0;
  --color-light: #bdaae1;
  --color-dark: #6940b6;
  --color-mid: #754dc0;
  --color-gradient-dark-mid: linear-gradient(#261743, #35205b); }

html,
body,
#__next {
  height: 100%;
  position: relative;
  font-family: 'Montserrat', sans-serif; }

h3 {
  color: var(--heading-color--accent); }

p:last-of-type {
  margin-bottom: 0; }

.bg-dark.bg-dark {
  background-color: var(--color-dark) !important; }

.bg-mid {
  background-color: var(--color-mid); }

.bg-light.bg-light {
  background-color: var(--color-light) !important; }

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

.btn-dark.btn-dark:hover {
  border-color: var(--color-mid);
  background-color: var(--color-mid); }

.btn-link {
  color: var(--color-mid); }
  .btn-link:hover {
    color: var(--color-dark); }

.h-90 {
  height: 90% !important; }

.btn-primary {
  background-color: var(--color-mid);
  border-color: var(--color-mid); }
  .btn-primary:hover {
    background-color: var(--color-dark);
    border-color: var(--color-dark); }
  .btn-primary:not(.disabled):not(:disabled):active, .btn-primary:not(.disabled):not(:disabled):focus, .btn-primary:not(.disabled):not(:disabled):active:focus {
    background-color: var(--color-dark);
    border-color: var(--color-dark);
    box-shadow: 0 0 0 0.2rem rgba(105, 64, 182, 0.5); }
  .btn-primary:disabled {
    background-color: var(--color-dark);
    border-color: var(--color-dark); }

.header {
  left: 0;
  right: 0;
  z-index: 1; }

.main-container {
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 800px; }
  .webp .main-container {
    background-image: url("/images/hero-bg.webp"); }
  .no-webp .main-container {
    background-image: url("/images/hero-bg.png"); }

.dark-mode-image {
  width: 100%; }


.dashboard {
  --border-color: #e3e4e8;
  --background-color: #ffffff;
  --background-color--panel: whitesmoke;
  --background-color--footer: #ffffff;
  --background-color--design-previews: #ffffff;
  --background-color--design: #edf4f6;
  --text-color: #222222;
  --transition-timing: 500ms;
  --transition: background-color ease-in-out var(--transition-timing),
    color ease-in-out var(--transition-timing);
  display: grid;
  grid-template-columns: 1fr 400px;
  grid-template-rows: 70px 1fr 70px 44px;
  grid-template-areas: 'header sidebar-header'
 'canvas sidebar'
 'canvas sidebar-footer'
 'footer footer';
  height: 100vh;
  background-color: var(--background-color);
  color: var(--text-color);
  transition: var(--transition); }
  .dashboard label {
    margin: 0; }
  .dashboard a {
    color: var(--color-mid); }
  .dashboard[data-theme='dark'] {
    --background-color--panel: #333333;
    --background-color: #222222;
    --background-color--footer: #222222;
    --background-color--design: #333333;
    --background-color--design-previews: #222222;
    --text-color: whitesmoke;
    --border-color: #111111; }
  .dashboard .form-control {
    background-color: var(--background-color);
    transition: var(--transition);
    border-color: var(--background-color--panel);
    color: var(--text-color); }

.dashboard__header {
  grid-area: header;
  border-bottom: 1px solid var(--border-color);
  display: grid;
  justify-items: center;
  align-items: center; }

.design-container {
  grid-area: canvas;
  background-color: var(--background-color--design);
  transition: var(--transition); }

.sidebar-header {
  grid-area: sidebar-header;
  border-bottom: 1px solid var(--border-color);
  border-left: 1px solid var(--border-color);
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr auto;
  grid-gap: 10px;
  align-items: center;
  overflow: hidden;
  padding: 0 5px; }

.sidebar {
  grid-area: sidebar;
  border-left: 1px solid var(--border-color);
  overflow-y: auto; }

.sidebar-footer {
  grid-area: sidebar-footer;
  border-left: 1px solid var(--border-color);
  grid-template-columns: 1fr 2fr; }

.footer {
  grid-area: footer;
  border-top: 1px solid var(--border-color);
  transition: var(--transition); }

.canvas-container {
  display: grid;
  justify-items: center;
  align-items: center; }

.adsense-container {
  display: grid;
  justify-items: center;
  align-items: center; }