@font-face {
  font-family: KellySlab-Regular;
  src: url("../font/KellySlab-Regular.ttf") format("opentype");
  font-family: AveriaSansLibre-Regular;
  src: url("../font/AveriaSansLibre-Regular.ttf") format("opentype");
  /*
  font-family: AveriaSansLibre-Bold;
  src: url("../font/AveriaSansLibre-Bold.ttf") format("opentype");
  font-family: AveriaSansLibre-Italic;
  src: url("../font/AveriaSansLibre-Italic.ttf") format("opentype");
  */
}
:root {
  --a-text-color: #333;
  --a-hover-text-color: rgba(255,105,0,1);
  --form-border-color: rgba(0,0,0,1);
  --form-border-radius: 6px;
  --submit-bg-color: rgba(0,0,0,1);
  --submit-text-color: rgba(255,255,255,1);
  --blood: #d00;
  --not-blood: #00d;
}
html, body {
  width: 100%;
  height: 100vh;
}
body {
  background-color: #f8f8ff;
  color: #333;
  font-family: 'AveriaSansLibre-Regular', sans-serif;
  font-size: 16px;
  margin: 0 auto;
  max-width: 600px;
}
.top-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 5px 5px 15px 5px;
  width: 100%;
}
.top-right {
  text-align: right;
}
.container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 5px;
}
header {
  font-size: 48px;
  padding-bottom: 20px;
  text-align: center;
}
header div:nth-child(2) {
  font-size: 1.2rem;
}
header a {
  padding: 0 10px;
}
main {
  flex-grow: 1;
  
}
header, main, footer {
  flex-shrink: 0;
}
main div {
  line-height: 1.5em;
}
footer {
  text-align: center;
}
a, a:visited {
  color: #555;
  text-decoration: underline;
}
a[target]:after {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
  padding-left: 3px;
}
input {
  background-color: #fff;
  border: 2px solid var(--form-border-color);
  border-radius: 5px;
  padding: 5px;
}
input:focus {
  box-shadow: inset 0 0 10px gold;
}
input[type="submit"], input[type="reset"] {
  background-color: var(--submit-bg-color);
  color: #f8f8ff;
  cursor: pointer;
}
p {
  padding-bottom: 5px;
  text-indent: 1em;
}
.registrate {
  align-items: start;
  display: grid;
  gap: 15px;
  grid-template-rows: repeat(5, auto);
  justify-content: center;
}
.login {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 15px;
  justify-content: center;
  padding-top: 1em;
}
.is-invalid {
  color: red;
}
.invalid-feedback {
  color: red;
  font-weight: bold;
  text-align: center;
}
.center {
  text-align: center;
}
.relation {
  padding-bottom: 15px;
}
.name {
  color: var(--not-blood) !important;
}
.nameb {
  color: var(--blood) !important;
}
.subtext, .subtextb {
  color: initial;
}
.person-of-interest {
  color: #090 !important;
}
.populous {
  align-items: start;
  display: flex;
  flex-flow: row wrap;
  grid-template-rows: 1fr;
  gap: 0 1em;
  justify-items: start;
  width: 100%;
}
.contact {
  padding: 1em 0;
  text-align: center;
  width: 100%;
}
.contact-details {
  padding-top: 1em;
}

.col1 {
  align-self: center;
  justify-self: end;
}
.col2 {
  align-self: center;
  width: 100%;
}
/* Pop */
@-webkit-keyframes hvr-pop {
50% {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
}
@keyframes hvr-pop {
50% {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
}
input[type="submit"]#form {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
input[type="submit"]#form:hover, input[type="submit"]#form:focus, input[type="submit"]#form:active {
  -webkit-animation-name: hvr-pop;
  animation-name: hvr-pop;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
td {
  padding: 0 3px;
}
/* When the browser is at least 600px and above */
@media screen and (min-width: 600px) {
  .registrate {
    align-items: start;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(5, auto);
    justify-content: center;
  }
  .registrate input[type="submit"] {
    border-radius: 0;
    border-right-color: rgba(255,255,255,0.5);
    border-right-width: 1px;
    outline: 0;
    padding: 5px;
  }
  .login {
    align-items: start;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: 30px 30px;
    justify-content: center;
  }
  .login input[type="text"], .registrate input[type="text"], .yello-search input[type="text"] {
    border-radius: 0;
    border-right-width: 1px;
    border-top-left-radius: var(--form-border-radius);
    border-bottom-left-radius: var(--form-border-radius);
    outline: 0;
    padding: 5px;
  }
  .login input[type="password"], .registrate input[type="password"] {
    border: 0;
    border-radius: 0;
    border: 2px solid var(--form-border-color);
    border-left-width: 1px;
    border-right-width: 1px;
    outline: 0;
    padding: 5px;
  }
  .yello-search {
    align-items: start;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    padding-bottom: 20px;
  }
  .login input[type="submit"], .registrate input[type="reset"], .yello-search input[type="submit"] {
    border-radius: 0;
    border-top-right-radius: var(--form-border-radius);
    border-bottom-right-radius: var(--form-border-radius);
    outline: 0;
    padding: 5px;
  }
  .admin-container {
    display: grid;
    grid-template-columns: 150px 350px;
    grid-gap: 0.5em;
    justify-content: center;
    padding-bottom: 2em;
  }
  .admin-container input {
    border-radius: 6px;
    border: 2px solid var(--form-border-color);
    outline: 0;
  }
  .admin-container input[type="reset"], .admin-container input[type="submit"] {
    border-radius: 6px;
    border: 2px solid var(--form-border-color);
    outline: 0;
    margin: 0 10px;
  }
  .edit-contact {
    grid-column: 1 / span 2;
  }
  .edit-submit {
    align-items: end;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(4, auto);
    grid-template-rows: 50px;
    justify-content: center;
  }
  .edit-submit input[type="submit"], .edit-submit input[type="reset"] {
    border-radius: 0;
    padding: 5px;
  }
}