@import "components/navbar.css";
@import "components/footer.css";

.btn {
  width: fit-content;
  padding: 0.5rem 1rem 0.5rem 1rem;

  border-radius: 0.25rem;
  border: 0;

  background-color: var(--color-primary);
  color: var(--color-bg) !important;

  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
}

.btn:hover {
  scale: 0.99;
}

.btn:active {
  scale: 0.95;
  text-decoration: inherit;
}

.profile {
  display: flex;
  column-gap: 0.5rem;
}

.profile--small {
  height: 2.5rem;
}

.profile__avatar {
  display: inline-block;
  width: fit-content;
  height: inherit;
  border-radius: 100%;
}

.profile__image {
  height: 100%;
  aspect-ratio: 1/1;
  border-radius: 100%;
  object-fit: cover;
}

.profile__details {
  display: inline-block;
  height: 100%;
  margin: 0;

  color: var(--color-primary)
}

.profile__name,
.profile__extra {
  margin: inherit;
  height: auto;

  white-space: collapse nowrap;
}

.profile__extra i {
  height: auto;
  max-height: 100%;
  margin: -0.2rem;
}

.container {
  max-width: 100%;
}

.centered {
  margin: auto;
}

.logo__svg {
  content: url(../rho-lambda-logo.svg);
  display: inline-block;
  width: 1.25em;
  height: 1em;

  margin: 0 0.25rem;
}

.sm-hide {
  width: 1px;
  height: 1px;
  overflow: hidden;
  color: transparent;

}

.nowrap {
  text-wrap: nowrap;
}

@media (min-width: 40em) {
  .container {
    max-width: 80%;
  }

  .sm-hide {
    width: unset;
    height: unset;
    overflow: unset;
    color: unset;
  }
}

@media (min-width: 48em) {
  .container {
    max-width: 66%;
  }
}

@media (min-width: 64em) {
  .container {
    max-width: 50%;
  }
}