@import './base.css';

#app {
  /* max-width: 1280px; */
  /* margin: 0 auto; */
  /* padding: 2rem; */
  font-weight: normal;
}

@media (min-width: 1024px) {
  /* body {
    display: flex;
    place-items: center;
  } */

  /* #app {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 2rem;
  } */
}

button.primary-button {
  padding: 0.6em 1.5em;
  background-color: var(--color-text);
  outline: none;
  border: none;
  border-radius: 15px;
  color: var(--color-text-dark);
  font-family: inherit;
  font-weight: 500;
  font-size: 16px;

  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}
button.primary-button:hover {
  background-color: var(--color-text-faded);
  cursor: pointer;
}
button.primary-button svg {
  padding-right: 0.5em;
}

input[type='text'],
input[type='password'] {
  padding: 0.6em 1.5em;
  background-color: var(--color-text);
  outline: none;
  border: none;
  border-radius: 15px;
  color: var(--color-text-dark);
  font-family: inherit;
  font-weight: 500;
  font-size: 16px;
}

span.age-rating {
  font-size: 14px;
  padding: 0.1em 0.4em;
  border: 1px solid white;
}

span.age-rating.sm {
  font-size: 10px;
  padding: 0.1em 0.4em;
  border: 1px solid white;
}

svg.star-rating {
  color: var(--color-accent-yellow);
}
svg.clickable:hover {
  cursor: pointer;
  color: var(--color-text-faded);
}
svg.active.clickable:hover {
  cursor: pointer;
}

.clamp {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1; /* number of lines to show */
  line-clamp: 1;
  -webkit-box-orient: vertical;
}
.clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* number of lines to show */
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* number of lines to show */
  line-clamp: 3;
  -webkit-box-orient: vertical;
}
.clamp-4 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4; /* number of lines to show */
  line-clamp: 4;
  -webkit-box-orient: vertical;
}
.clamp-6 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6; /* number of lines to show */
  line-clamp: 6;
  -webkit-box-orient: vertical;
}

.no-select {
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}
