.layout-box, .layout-box td {
    border: 1px solid orange;
}

.layout-box td {
  padding: 5px;
}

.info-box, .info-box td {
  border: none;
}

/*h1, h2, h3, h4, h5, h6 {
  color: orange;
}*/

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 5px;
}

ul, ol {
  padding-left: 20px;
  
  margin-top: 5px;
  margin-bottom: 5px;
}

a {
    color: orange;
    text-decoration: underline; /* Default underline */
  }
  
  a:hover {
    text-decoration: none; /* Remove underline on hover */
    color: darkorange;
  }
  
  a:active {
    color: red; /* Change color to red when clicked */
  }

  .login-friendship-text {
    max-width: 240px;
    display: block;
    text-align: justify;
  }

.form-error {
  color: red;
  max-width: 240px;
    display: block;
    text-align: justify;
}


    .link-imposter {
    background: none;
    border: none;
    color: orange; /* Or any link color */
    padding: 0;
    text-decoration: underline;
    cursor: pointer; /* Indicate it's interactive */
    font-size: inherit; /* Inherit the surrounding font size */
    font-family: inherit; /* Inherit the surrounding font family */
    }

    .link-imposter:hover {
    text-decoration: none; /* Remove underline on hover, common link behavior */
    color: darkorange; /* Slightly darker on hover for visual feedback */
    }

    .link-imposter:active {
    color: red; /* Change color when actively clicked, like a link */
    }

    /* Optional: Remove focus outline on click as well, if you only rely on color change */
    .link-imposter:active:focus {
    box-shadow: none;
    }