@keyframes fadeOutRem {
  0% {
    opacity: 100%; }
  99.9999999% {
    opacity: 0; }
  100% {
    display: none;
    padding: 0;
    margin: 0;
    height: 0;
    overflow: hidden; } }

@keyframes fadeOut {
  0% {
    opacity: 100%;
    overflow: hidden; }
  100% {
    opacity: 0; } }

@keyframes spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

nav {
  margin-bottom: 2rem; }

.messages {
  position: fixed;
  top: 7rem;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  text-align: center;
  padding: 2rem;
  opacity: 100%;
  animation-name: fadeOutRem;
  animation-duration: 2s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  z-index: 9999; }
  .messages--no-fade {
    animation-name: none !important; }

.message {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 0.5rem;
  border-radius: 0.25rem; }
  .message--success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb; }
  .message--error {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb; }
  .message__text {
    display: block;
    max-width: 93%; }
  .message__icon {
    position: absolute;
    right: 1%;
    font-size: 1.9rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer; }