* {
  box-sizing: border-box;
}

body {
  background: #3f3f3f;
  color: #717677;
  line-height: 1.6;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  background: #3f3f3f;
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(7, 10, 39, 0.2);
  height: auto;
  text-align: center;
  padding: 20px 0;
  font-size: 14px;
}

footer > div {
  width: 900px;
}

.error-message {
  color: rgb(255, 119, 119);
  font-size: 0.9em;
  margin-top: 5px;
  display: block;
}

.error-border {
  border: 2px solid rgb(255, 119, 119) !important;
  border-radius: 4px !important;
}

.hidden {
  display: none;
}

.navbar {
  padding: 20px 0 16px 0;
  border-bottom: 4px solid black;
}

.container {
  background: #f9feff;
  flex-grow: 1;
}

ul {
  list-style: none;
  padding: 0;
}

.brand {
  text-align: center;
}

.brand span {
  color: #fff;
}

.wrapper > * {
  padding: 1em;
}

.company-info {
  background: #465e74;
  color: #ffffff;
}

.company-info h3,
.company-info ul {
  text-align: center;
  margin: 0 0 1rem 0;
}

.contact {
  background: #f9feff;
  margin: 0 auto;
  max-width: 850px;
}

/* FORM STYLES */
.contact form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}

.contact form label {
}

.contact form p {
  margin: 0;
}

.contact form .full {
  grid-column: 1 / 3;
}

.contact form .half {
  grid-column: span 1;
}

.contact form button,
.contact form input,
.contact form textarea {
  width: 100%;
  padding: 1em;
  border: 1px solid #c9e6ff;
}

.contact form .rbutton {
  background: #c420bb;
  width: auto;
  border: 1px solid #000000;
  display: inline;
  vertical-align: middle;
}
.contact form .lbutton {
  width: 90%;
  display: inline;
  vertical-align: middle;
}

.contact form button {
  background: #c9e6ff;
  border: 0;
  text-transform: uppercase;
}

.contact form button:disabled {
  background: #a3aeb8b7;
}

.contact form button:hover,
.contact form button:focus {
  background: #92bde7;
  color: #fff;
  outline: 0;
  transition: background-color 2s ease-out;
}

/* LARGE SCREENS */
@media (min-width: 700px) {
  .wrapper > * {
    padding: 2em;
  }

  .company-info h3,
  .company-info ul,
  .brand {
    text-align: left;
  }
}

.nllogo {
  height: 30vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .nllogo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.nllink {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}