html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    margin-bottom: 60px;
    background-image: linear-gradient(whitesmoke, lightslategray);
}

h1 {
    background-image: linear-gradient(cyan, purple);
    color: transparent;
    background-clip: text;
    font-family: monospace;
}

button, input[type="text"], input[type="password"] {
    border-radius: 3px;
    border: 0;
    -webkit-appearance: none;
}

button {
    background-color: rebeccapurple;
    color: whitesmoke;
    /*padding: 0.65rem;*/
}

.a320 {
    width: 320px;
}

.cen {
    display: block;
    margin: auto;
}

.f20 {
    font-family: monospace;
    font-size: 20px;
}

.f30 {
    font-family: monospace;
    font-size: 30px;
}

.r3 {
    border-radius: 3px;
    border: 0;
    -webkit-appearance: none;
}

.nitem {
    border-width: 1px;
    border-color: gray;
    border-style: solid;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: 1rem;
}

button[aria-expanded=true] ~ div a.nitem {
    border-width: 2px;
    border-color: gray;
    border-style: solid;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: 0rem;
}