@import "standard_style.css";

main {
  margin: 0 9%;
}

.flex {
  display: flex;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.knap {
  color: #6699cc;
}

.flex-column {
  display: flex;
  flex: 1;

  flex-direction: column;
}

.center-column {
  justify-content: center;
  margin-right: -7%;
  align-items: center;
}

article {
  margin-top: 3.75em;
  gap: 10%;
}

table {
  margin-top: 10%;
}

table tr td {
  padding-right: 0.5em;
  padding-left: 0.5em;
}

p {
  margin-bottom: 1em;
}

article div h2 {
  margin-bottom: 2em;
}

.bold {
  color: #e5e5e5;
  font-weight: 700;
}

.player-name {
  color: #999999;
  font-weight: 700;
}

@media screen and (max-width: 920px) {
  .flex-row {
    flex-direction: column;
  }
  .center-column {
    flex-direction: row;
    margin: 0 auto;
  }
  .center-column img {
    margin-left: -10%;
    width: 55%;
  }
  .center-column table {
    margin: auto 0;
  }
}

.h2-hide {
  display: none;
}

@media screen and (max-width: 740px) {
  .center-column {
    flex-direction: column;
  }
  .center-column table {
    margin-top: 1em;
  }
  .center-column img {
    margin-left: 0%;
    width: 100%;
  }
}

@media screen and (max-width: 540px) {
  .center-column img {
    width: 100%;
  }
}

@media screen and (max-width: 650px) {
  .flex-row {
    flex-direction: column-reverse;
  }
  .h2-hide {
    display: unset;
    position: absolute;
    left: 10%;
  }
  .h2-show {
    display: none;
  }
  .read-more {
    display: none;
  }
}

@media screen and (min-width: 650px) {
  .knap {
    display: none;
  }
}

@media only screen and (max-width: 650px) {
  .h2-hide {
    display: block;
  }
}