:root {
  --padding-x: clamp(1rem, 100vw * 0.05, 2rem);
  --padding-y: clamp(1rem, 100vw * 0.025, 2rem);
}

main {
  position: relative;
  min-width: 20rem;
  max-width: 48rem;
  margin: 0 auto;
  padding: var(--padding-y) var(--padding-x);
}

.logo {
  position: absolute;
  top: calc(var(--padding-y) / 2);
  right: var(--padding-x);
  width: 5rem;
  height: 3rem;
  margin: 0;
  text-align: center;
  vertical-align: middle;
  font-family: 'Open Sans';
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  border: 1px dashed #495057;
}

#tabs {
  position: relative;
}

#nav-tab {
  height: 3rem;
}

.tab-pane {
  margin: 0 auto;
}

#nav-tasks {
  max-width: 32rem;
}

#nav-cards {
  min-width: 20rem;
  max-width: 24rem;
}

button[type="submit"], button[type="reset"] {
  width: 6rem;
}

.code-snippet {
  margin: 1rem 0;
  border: 1px solid #495057;
  border-radius: 0.375rem;
}
.div-copy {
  position: relative;
  float: right;

}
.btn-copy {
  position: relative;
  margin: 1.25rem 0.75rem 0 0;
  padding: 0.5rem;
  line-height: 1;
  border-radius: 0.25em;
  z-index: 2;
}
.btn-copy:hover {
  color: #8bb9fe;
}
.highlight {
  padding: 0.75rem 1.25rem;
  position:relative;
  background-color:#1b1f22
}
.highlight > pre {
  margin: 0.8125rem 1.875rem 0 0;
  padding: 0.25rem 0 0.875rem;
  white-space: pre;
}
.success {
  color: #5ba677;
  font-weight: 600;
}
.fail {
  color: #bf0f2d;
  font-weight: 600;
}