:root {
  --score-blue: #004684;
  --score-purple: #8C2D55;
  --score-red: #E13416;
  --score-orange: #F2AB4E;
  --score-green: #009043;
  --score-yellow: #FAD33B;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  margin: 0;
  color: black;
  background-color: #322417;
}

@media (min-width: 385px) {
  body {
    margin: 10px 0;
  }
}

@media (min-width: 1580px) {
  body {
    margin: 40px;
  }
}

.card {
  width: 375px;
  height: 525px;
  box-sizing: border-box;
  padding: 15px;
  margin: 0 auto;
  box-shadow: 0 0 5px rgba(0,0,0,.2);
  background: white;
}

@media (min-width: 385px) {
  .card {
    margin-bottom: 10px;
  }
}

.sheet {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 770px;
  margin: 0 auto;
}

@media (min-width: 1500px) {
  .sheet {
    max-width: 1540px;
  }
}

.frame {
  border: 3px solid var(--score-blue);
  margin: 0;
  background-color: #ffe;
  height: 100%;
  box-sizing: border-box;
}

@media (min-width: 1125px) {
  .frame {
    display: inline-block;
  }
}

  .theme-red .frame {
    border-color: var(--score-red);
  }
  .theme-orange .frame {
    border-color: var(--score-orange);
  }
  .theme-purple .frame {
    border-color: var(--score-purple);
  }
  .theme-green .frame {
    border-color: var(--score-green);
  }
  .theme-yellow .frame {
    border-color: var(--score-yellow);
  }

.top {
  display: flex;
}

.photo {
  width: 154px;
  height: 172px;
  border-right: 3px solid var(--score-blue);
  border-bottom: 3px solid var(--score-blue);
  position: relative;
}

  .theme-red .photo {
    border-color: var(--score-red);
  }
  .theme-orange .photo {
    border-color: var(--score-orange);
  }
  .theme-purple .photo {
    border-color: var(--score-purple);
  }
  .theme-green .photo {
    border-color: var(--score-green);
  }
  .theme-yellow .photo {
    border-color: var(--score-yellow);
  }

.photo:before {
  position: absolute;
  width: 3px;
  height: 96%;
  background-color: var(--score-blue);
  left: calc(100% + 3px);
  bottom: -3px;
  content: "";
  z-index: 1;
}

  .theme-red .photo:before {
    background-color: var(--score-red);
  }
  .theme-orange .photo:before {
    background-color: var(--score-orange);
  }
  .theme-purple .photo:before {
    background-color: var(--score-purple);
  }
  .theme-green .photo:before {
    background-color: var(--score-green);
  }
  .theme-yellow .photo:before {
    background-color: var(--score-yellow);
  }

.photo:after {
  position: absolute;
  height: 3px;
  width: 96%;
  background-color: var(--score-blue);
  top: calc(100% + 3px);
  right: -6px;
  content: "";
  z-index: 1;
}

  .theme-red .photo:after {
    background-color: var(--score-red);
  }
  .theme-orange .photo:after {
    background-color: var(--score-orange);
  }
  .theme-purple .photo:after {
    background-color: var(--score-purple);
  }
  .theme-green .photo:after {
    background-color: var(--score-green);
  }
  .theme-yellow .photo:after {
    background-color: var(--score-yellow);
  }

.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bio {
  position: relative;
  flex: 1;
}

.bio-inner {
  background-color: white;
}

.team-logo {
  position: absolute;
  width: 76px;
  height: 76px;
  border: 2px solid var(--score-blue);
  border-radius: 50%;
  background-color: white;
  top: 1px;
  right: 1px;
  z-index: 1;
}

  .team-logo.laa img {
    margin-top: -2px;
  }

  .theme-red .team-logo {
    border-color: var(--score-red);
  }
  .theme-orange .team-logo {
    border-color: var(--score-orange);
  }
  .theme-purple .team-logo {
    border-color: var(--score-purple);
  }
  .theme-green .team-logo {
    border-color: var(--score-green);
  }
  .theme-yellow .team-logo {
    border-color: var(--score-yellow);
  }

.team-logo img {
  width: calc(100% - 20px);
  display: block;
  padding: 10px;
}

.card-number {
  color: var(--score-red);
  text-transform: uppercase;
  font-weight: 700;
  padding: 1px 10px;
  position: relative;
  font-size: 13px;
}

.card-number:before {
  position: absolute;
  width: 75%;
  height: 2px;
  background-color: var(--score-blue);
  left: 0;
  bottom: -3px;
  content: "";
}

  .theme-red .card-number:before {
    background-color: var(--score-red);
  }
  .theme-orange .card-number:before {
    background-color: var(--score-orange);
  }
  .theme-purple .card-number:before {
    background-color: var(--score-purple);
  }
  .theme-green .card-number:before {
    background-color: var(--score-green);
  }
  .theme-yellow .card-number:before {
    background-color: var(--score-yellow);
  }

.card-number:after {
  position: absolute;
  width: 75%;
  height: 2px;
  background-color: var(--score-blue);
  left: 10px;
  bottom: -10px;
  content: "";
}

  .theme-red .card-number:after {
    background-color: var(--score-red);
  }
  .theme-orange .card-number:after {
    background-color: var(--score-orange);
  }
  .theme-purple .card-number:after {
    background-color: var(--score-purple);
  }
  .theme-green .card-number:after {
    background-color: var(--score-green);
  }
  .theme-yellow .card-number:after {
    background-color: var(--score-yellow);
  }

.team-name {
  color: white;
  background-color: var(--score-blue);
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 10px;
  font-size: 16px;
  margin: 15px 0 32px;
  width: 75%;
  position: relative;
}

  .theme-red .team-name {
    background-color: var(--score-red);
  }
  .theme-orange .team-name {
    background-color: var(--score-orange);
  }
  .theme-purple .team-name {
    background-color: var(--score-purple);
  }
  .theme-green .team-name {
    background-color: var(--score-green);
  }
  .theme-yellow .team-name {
    background-color: var(--score-yellow);
    color: var(--score-red);
  }

.team-name:before {
  position: absolute;
  width: 75%;
  height: 2px;
  background-color: var(--score-blue);
  left: 10px;
  bottom: -7px;
  content: "";
}

  .theme-red .team-name:before {
    background-color: var(--score-red);
  }
  .theme-orange .team-name:before {
    background-color: var(--score-orange);
  }
  .theme-purple .team-name:before {
    background-color: var(--score-purple);
  }
  .theme-green .team-name:before {
    background-color: var(--score-green);
  }
  .theme-yellow .team-name:before {
    background-color: var(--score-yellow);
  }

.team-name:after {
  position: absolute;
  width: 75%;
  height: 2px;
  background-color: var(--score-blue);
  left: 0;
  bottom: -14px;
  content: "";
}

  .theme-red .team-name:after {
    background-color: var(--score-red);
  }
  .theme-orange .team-name:after {
    background-color: var(--score-orange);
  }
  .theme-purple .team-name:after {
    background-color: var(--score-purple);
  }
  .theme-green .team-name:after {
    background-color: var(--score-green);
  }
  .theme-yellow .team-name:after {
    background-color: var(--score-yellow);
  }

.player-name-number {
  background-color: var(--score-purple);
  padding: 2px 10px;
  color: white;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 22px;
  line-height: .9;
}

  .theme-red .player-name-number {
    background-color: var(--score-blue);
  }
  .theme-orange .player-name-number {
    background-color: var(--score-orange);
    color: var(--score-red);
  }
  .theme-purple .player-name-number {
    background-color: var(--score-red);
  }
  .theme-green .player-name-number {
    background-color: var(--score-red);
  }
  .theme-yellow .player-name-number {
    background-color: var(--score-green);
  }

.first-name {
  display: block;
}

.player-number {
  font-size: 14px;
}

.position {
  background-color: var(--score-red);
  padding: 3px 10px;
  color: white;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 1;
  text-align: center;
}

  .theme-red .position {
    background-color: var(--score-purple);
  }
  .theme-orange .position {
    background-color: var(--score-green);
  }
  .theme-purple .position {
    background-color: var(--score-blue);
  }
  .theme-green .position {
    background-color: var(--score-blue);
  }
  .theme-yellow .position {
    background-color: var(--score-red);
  }

.bio-notes {
  font-size: 10px;
  text-align: center;
  color: var(--score-purple);
  padding: 2px 10px;
}

  .theme-red .bio-notes {
    color: black;
  }
  .theme-orange .bio-notes {
    color: var(--score-red);
  }
  .theme-purple .bio-notes {
    color: var(--score-red);
  }
  .theme-green .bio-notes {
    color: var(--score-red);
  }
  .theme-yellow .bio-notes {
    color: var(--score-green);
  }

.main {
  padding: 10px;
}

.stats {
  text-transform: uppercase;
  color: var(--score-red);
  font-size: 10px;
  font-weight: 700;
  line-height: 0.9;
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 10px;
}

  .theme-red .stats {
    color: var(--score-purple);
  }
  .theme-orange .stats {
    color: var(--score-green);
  }
  .theme-purple .stats {
    color: var(--score-blue);
  }
  .theme-green .stats {
    color: var(--score-blue);
  }
  .theme-yellow .stats {
    color: var(--score-red);
  }

.stats td {
  text-align: right;
  padding: 1px 3px;
}

.stats thead td {
  border-top: 1px solid var(--score-red);
  border-bottom: 1px solid var(--score-red);
}

  .theme-red .stats thead td {
    border-color: var(--score-purple);
  }
  .theme-orange .stats thead td {
    border-color: var(--score-green);
  }
  .theme-purple .stats thead td {
    border-color: var(--score-blue);
  }
  .theme-green .stats thead td {
    border-color: var(--score-blue);
  }
  .theme-yellow .stats thead td {
    border-color: var(--score-red);
  }

.stats tfoot td {
  border-top: 1px solid var(--score-red);
}

  .theme-red .stats tfoot td {
    border-color: var(--score-purple);
  }
  .theme-orange .stats tfoot td {
    border-color: var(--score-green);
  }
  .theme-purple .stats tfoot td {
    border-color: var(--score-blue);
  }
  .theme-green .stats tfoot td {
    border-color: var(--score-blue);
  }
  .theme-yellow .stats tfoot td {
    border-color: var(--score-red);
  }

.stats .left {
  text-align: left;
}

.stats thead td:first-child,
.stats tbody td:first-child {
  padding-left: 5px;
}

.bio {
  font-size: 10px;
  line-height: 1;
}

.bio p {
  margin: 0;
  text-align: justify;
}

.bio p:last-child {
  text-indent: 1em;
}




.front {
  padding: 15px;
  background-color: var(--score-blue);
  position: relative;
}

  .theme-red.front {
    background-color: var(--score-red);
  }
  .theme-orange.front {
    background-color: var(--score-orange);
  }
  .theme-purple.front {
    background-color: var(--score-purple);
  }
  .theme-green.front {
    background-color: var(--score-green);
  }
  .theme-yellow.front {
    background-color: var(--score-yellow);
  }


.front .front-photo {
  width: 100%;
  position: relative;
  height: 440px
}

.front img {
  width: 100%;
  display: block;
  object-fit: cover;
  height: 100%;
}

.front .front-photo:before {
  position: absolute;
  border: 2px solid white;
  left: 15px;
  top: 15px;
  right: 15px;
  bottom: 15px;
  z-index: 1;
  content: "";
}

.front-name:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-left: 172.5px solid transparent;
  border-right: 172.5px solid transparent;
  border-top: 50px solid rgba(255,255,255,0.1);
  left: 0;
}

  .theme-yellow .front-name:before {
    border-top-color: rgba(255,255,255,0.4);
  }

.front-name {
  text-align: center;
  color: white;
  position: relative;
  margin-top: 6px;
  line-height: 1;
  font-size: 28px;
  text-transform: uppercase;
  font-family: 'Roboto Condensed', sans-serif;
  letter-spacing: -.03em;
}

  .theme-yellow .front-name {
    color: var(--score-red);
  }

.front-position {
  font-size: 16px;
  z-index: 1;
  position: relative;
}

.front-first-name,
.front-last-name {
  display: inline-block;
  z-index: 1;
  position: relative;
}

.front-first-name span,
.front-last-name span {
  font-size: 115%;
  position: relative;
  top: 1px;
}

.stars {
  color: var(--score-yellow);
  font-size: 18px;
  position: absolute;
  bottom: 15px;
}

  .theme-yellow .stars {
    color: var(--score-blue);
  }

.stars.right {
  right: 15px;
}