.container {
  margin: auto;
  width: 70%;
  border: none;
  padding: 10px;
  text-align: center;
  font-family: "Lato-Regular"
}

h1 {
  font-size: 3em;
  color: #6D6E72;
  letter-spacing: 8px;
  font-family: "Lato-Light"
}

h2 {
  font-size: 5em;
  font-family: "Lato-Regular";
  letter-spacing: 3px;
  color: #6D6E72;
  margin: -10px;
  padding: 0;
}

p {
  color: #2F325B;
  font-size: 1.25em;
  letter-spacing: 2.1px;
  line-height: 1.25em;
  
}

.sm {
  color: #2F325B;
  font-size: 1em;
  letter-spacing: 1px;
}

p2 {
  display: block;
  color: #2F325B;
  font-size: 0.9em;
  letter-spacing: 0.8px;
  font-family: "Lato-Regular";
  margin-top: 30px;
}

.link {
  color: #408A7E;
  text-decoration: none;
  font-weight: bold;
}

p3{
  color: #6D6E72;
  font-size: 1em;
  letter-spacing: 0.9px;
  font-family: "Lato-Regular";
}

.input-field, 
.btn {
  width: 90%;
  height: 3.5;
  font-size: 1.5em;
  font-family: "Lato-Regular", sans-serif;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.input-field {
  padding: 0.75em;
  outline: none;
  border: 2px solid #2F325B;
  background: white;
  margin-top: 8px;
}

.btn {
  background: #2F325B;
  color: white;
  cursor: pointer;
  opacity: 1;
  transition: background-color 0.3s ease, color 0.3s ease;
  border: 2px solid #2F325B;
  padding: 0.5em;
  line-height: 1.5em;
  margin-top: 8px;
  letter-spacing: 2px;
  line-height: 15px;
  font-weight: bold;
}

.smBtn{
  font-size:0.6em;
  font-weight: normal;
}

.btn:hover {
  background-color: white;
  color: #2f325b;
  opacity: 1;
}

input,
select {
  background-color: white;
}

input:focus,
select:focus {
  background-color: white;
}

@keyframes fadeOutBorder {
  0% {
    outline: 10px solid #ff0000;
  }
  100% {
    outline: 10px solid transparent;
  }
}

.fade-border {
  animation: fadeOutBorder 2s ease-in-out forwards;
}
