/**
* 1. The `reverse` animation direction plays the animation backwards
*    which makes it start at the stroke offset 100 which means displaying
*    no stroke at all and animating it to the value defined in the SVG
*    via the inline `stroke-dashoffset` attribute.
* 2. Rotate by -90 degree to make the starting point of the
*    stroke the top of the circle.
* 3. Using CSS transforms on SVG elements is not supported by Internet Explorer
*    and Edge, use the transform attribute directly on the SVG element as a
* .  workaround (https://markus.oberlehner.net/blog/pure-css-animated-svg-circle-chart/#part-4-internet-explorer-strikes-back).
*/

:root {
  --rating-size: 75px;
}

#percent::after {
  content: "%";
}

.lh-50 {
  line-height: var(--rating-size);
}

.circle-chart {
  /* zoom: 0.25; */
  height: var(--rating-size);
  width: var(--rating-size);
}

.circle-chart__percent {
  font-family: Kanit;
  font-size: 62px;
  text-anchor: middle;
  alignment-baseline: central;
  dominant-baseline: cental;
}

.circle-chart__background {
  animation: circle-chart-color 2s reverse;
}

.circle-chart__circle {
  animation-timing-function: ease-in-out;
  animation: circle-chart-fill 2s reverse;
  /* 1 */
  transform: rotate(-90deg);
  /* 2, 3 */
  transform-origin: center;
  /* 4 */
}

/**
 * 1. Rotate by -90 degree to make the starting point of the
 *    stroke the top of the circle.
 * 2. Scaling mirrors the circle to make the stroke move right
 *    to mark a positive chart value.
 * 3. Using CSS transforms on SVG elements is not supported by Internet Explorer
 *    and Edge, use the transform attribute directly on the SVG element as a
 * .  workaround (https://markus.oberlehner.net/blog/pure-css-animated-svg-circle-chart/#part-4-internet-explorer-strikes-back).
 */

.circle-chart__info {
  animation: circle-chart-appear 2s forwards;
  opacity: 0;
  transform: translateY(0.3em);
}

@keyframes circle-chart-fill {
  to {
    stroke-dasharray: 0 502.4;
    stroke: hsl(0, 75%, 40%);
  }
}

@keyframes circle-chart-color {
  to {
    stroke: hsl(0, 75%, 80%);
  }
}


@keyframes circle-chart-appear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

h3 {
  text-align: center;
  margin-top: 10px;
}

.card {
  margin-top: 10px;
  /*width: 18rem;
   display: inline-grid; */
}

.card-title {
  text-align: center;
  padding-top: 5px;
}

.card-body {
  padding: 0.5em;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
  grid-column-gap: 1em;
}

.profile-photo {
  max-width: 100%;
  box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);
  margin-left: -8px;
}

.profile-image-container {
  max-width: 80px;
  float: left;
}

.profile-name-container {
  text-align: center;
  line-height: 120px;
  display: flow-root;
}

.profile-name-text {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

.rounded-10 {
  border-radius: 10%;
}

.rounded-5 {
  border-radius: 5%;
}

h3 {
  text-shadow: 3px 2px 7px rgba(0, 0, 0, 0.5);
}

body {
  background-size: cover;
  /* font-family: 'Asul', sans-serif; */
  height: 100vh;
  background-attachment: fixed;
  /*
  width: 100vw;
  overflow: hidden;
  */
}

.main-area {
  background-color: rgba(255, 255, 255, 0.25);
}

.list-group-item {
  background-color: transparent;
}

.tmdb-logo {
  height: 38px;
}

.links img {
  width: 78px;
}

.links a {
  text-decoration: none;
}

.links img {
  padding-right: 10px;
  padding-bottom: 15px;
}

.list-group-item:hover {
  background-color: transparent;
}

.row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1.5fr));
  grid-column-gap: 1em;
  margin: auto;
  /*
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-column-gap: 1em;
  justify-content: space-evenly;
  padding: 0px 15px;
  */
}

.form-control, .btn {
  padding: .375rem .75rem;
}

.navbar {
  padding: 0 10px 0 0;
}

.imdbRating {
  font-size: 1.1em;
}

.ofTen {
  font-size: 0.8em;
}

a:hover {
  text-decoration: none;
}

.votes::before {
  content: "(";
}

.votes::after {
  content: ")";
}