@font-face {
  font-family: 'librebaskerville';
  src: url("fonts/librebaskerville/librebaskerville-bold-webfont.woff2") format("woff2"), url("fonts/librebaskerville/librebaskerville-bold-webfont.woff") format("woff");
  font-weight: bold;
  font-display: swap; }

@font-face {
  font-family: 'librebaskerville';
  src: url("fonts/librebaskerville/librebaskerville-italic-webfont.woff2") format("woff2"), url("fonts/librebaskerville/librebaskerville-italic-webfont.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: 'librebaskerville';
  src: url("fonts/librebaskerville/librebaskerville-regular-webfont.woff2") format("woff2"), url("fonts/librebaskerville/librebaskerville-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-display: swap; }

@font-face {
  font-family: 'Worksans';
  src: url("fonts/worksans/worksans-bold-webfont.woff2") format("woff2"), url("fonts/worksans/worksans-bold-webfont.woff") format("woff");
  font-weight: 700;
  font-display: swap; }

@font-face {
  font-family: 'Worksans';
  src: url("fonts/worksans/worksans-semibold-webfont.woff2") format("woff2"), url("fonts/worksans/worksans-semibold-webfont.woff") format("woff");
  font-weight: 600;
  font-display: swap; }

@font-face {
  font-family: 'Worksans';
  src: url("fonts/worksans/worksans-medium-webfont.woff2") format("woff2"), url("fonts/worksans/worksans-medium-webfont.woff") format("woff");
  font-weight: 500;
  font-display: swap; }

@font-face {
  font-family: 'Worksans';
  src: url("fonts/worksans/worksans-regular-webfont.woff2") format("woff2"), url("fonts/worksans/worksans-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-display: swap; }

/* Colors */
body {
  font-family: "Worksans", Helvetica, Arial, sans-serif;
  margin: 0 !important;
  padding: 0; }

a {
  text-decoration: none;
  transition: 0.2s; }

img {
  max-width: 100%; }

.homepage__fish-area {
  background: url("../images/bg/fishbackground.jpg");
  background-position: center bottom;
  background-repeat: no-repeat;
  position: relative;
  margin: 0 auto;
  height: 1130px;
  width: 778px; }
  .homepage__fish-area .fish-name {
    display: none;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: navy;
    background: #fff;
    padding: 5px 8px;
    border-radius: 12px;
    position: absolute;
    white-space: nowrap;
    z-index: 1; }
    .homepage__fish-area .fish-name:after {
      content: '';
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: 8px solid #fff;
      position: absolute;
      left: calc(50% - 8px);
      bottom: -6px;
      z-index: 1; }

.homepage__fish-area-pond {
  height: 475px;
  width: 100%;
  position: absolute;
  bottom: 0; }

.fish-number {
  background: url("../images/bg/fish-number-bg.svg");
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  color: #fff;
  display: block;
  height: 31px;
  font-weight: bold;
  font-size: 14px;
  line-height: 29px;
  text-align: center;
  position: absolute;
  top: -15px;
  left: calc(50% - 15px);
  width: 30px;
  z-index: 1; }

.fish-wrapper {
  position: absolute; }
  .fish-wrapper.done .fish-name {
    display: block; }
  .fish-wrapper.done .fish-number {
    display: none; }

.fish-wrapper--mudminnow {
  bottom: 40px;
  left: 340px; }
  .fish-wrapper--mudminnow .fish-number {
    padding-right: 1px;
    transform: translate(16px, 5px); }
  .fish-wrapper--mudminnow .fish-name {
    transform: translate(31px, -10px); }

.fish-wrapper--blacknosedace {
  bottom: 50px;
  right: 10px; }
  .fish-wrapper--blacknosedace .fish-number {
    transform: translate(-30px, 11px); }
  .fish-wrapper--blacknosedace .fish-name {
    transform: translate(9px, -5px); }

.fish-wrapper--whiteperch {
  bottom: 146px;
  right: 30px; }
  .fish-wrapper--whiteperch .fish-number {
    transform: translate(55px, 14px); }
  .fish-wrapper--whiteperch .fish-name {
    transform: translate(130px, -3px); }

.fish-wrapper--gizzardshad {
  bottom: 117px;
  left: 160px; }
  .fish-wrapper--gizzardshad .fish-number {
    transform: translate(-47px, 14px); }
  .fish-wrapper--gizzardshad .fish-name {
    transform: translate(50px, -3px); }

.fish-wrapper--brownbullhead {
  bottom: 40px;
  left: 10px; }
  .fish-wrapper--brownbullhead .fish-number {
    transform: translate(-15px, 15px); }
  .fish-wrapper--brownbullhead .fish-name {
    transform: translate(39px, -3px); }

.fish-wrapper--bluegill {
  bottom: 220px;
  left: 2px; }
  .fish-wrapper--bluegill .fish-number {
    transform: translate(20px, -10px); }
  .fish-wrapper--bluegill .fish-name {
    transform: translate(69px, -25px); }

.fish-wrapper--bandedkillifish {
  bottom: 343px;
  left: 155px; }
  .fish-wrapper--bandedkillifish .fish-number {
    transform: translate(-20px, -2px); }
  .fish-wrapper--bandedkillifish .fish-name {
    transform: translate(30px, -17px); }

.fish-wrapper--mummichog {
  bottom: 341px;
  left: 352px;
  transform: rotate(-5deg); }
  .fish-wrapper--mummichog .fish-number {
    transform: translate(20px, -3px); }
  .fish-wrapper--mummichog .fish-name {
    transform: translate(74px, -20px) rotate(5deg); }

.fish-wrapper--inland-silverside {
  bottom: 262px;
  left: 357px; }
  .fish-wrapper--inland-silverside .fish-number {
    transform: translate(-71px, -6px); }
  .fish-wrapper--inland-silverside .fish-name {
    transform: translate(-39px, -22px); }

.fish-wrapper--mosquitofish {
  bottom: 408px;
  right: 150px; }
  .fish-wrapper--mosquitofish .fish-number {
    transform: translate(-13px, -6px); }
  .fish-wrapper--mosquitofish .fish-name {
    transform: translate(-68px, -21px); }
  .fish-wrapper--mosquitofish .mosquitofish {
    position: absolute; }
    .fish-wrapper--mosquitofish .mosquitofish:nth-child(3) {
      left: -83px;
      top: 5px;
      transform: rotate(-10deg) scaleX(-1);
      width: 119px;
      height: 45px; }
    .fish-wrapper--mosquitofish .mosquitofish:nth-child(4) {
      left: 24px;
      top: 7px; }
    .fish-wrapper--mosquitofish .mosquitofish:nth-child(5) {
      left: 9px;
      top: 44px; }

.homepage__instructions {
  background: url("../images/bg/homepage-border.svg");
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 660px; }
  .homepage__instructions h1 {
    color: #336F6D;
    font-size: 94px;
    font-family: "librebaskerville", serif;
    font-weight: bold;
    line-height: 1.1;
    max-width: 590px;
    margin: 0 50px 8px;
    padding-top: 80px; }
    .homepage__instructions h1 span {
      background: url("../images/bg/homepage-h1-bg.svg");
      background-repeat: no-repeat;
      background-position: right 4px bottom;
      display: inline-block;
      margin: 0 0 0 80px;
      font-weight: normal;
      font-size: 57px;
      font-style: italic;
      color: #7a9c5e;
      padding-bottom: 3px;
      transform: translateY(-20px); }
  .homepage__instructions h2 {
    color: #336F6D;
    text-transform: uppercase;
    font-size: 17px;
    font-weight: bold;
    margin: 18px 50px 10px; }
  .homepage__instructions p {
    color: #022347;
    margin: 0 50px;
    font-size: 16px;
    font-weight: 500;
    line-height: 23px; }
    .homepage__instructions p.small {
      font-size: 14px;
      line-height: 20px; }

.homepage__begin-game-button {
  margin: 27px 50px 0; }

.fish-finder {
  position: relative;
  margin: 0 auto;
  width: 778px; }
  .fish-finder h1 {
    color: #336F6D;
    font-size: 25px;
    font-weight: 600; }
  .fish-finder ol {
    padding-left: 23px; }
  .fish-finder li {
    color: #022347;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 10px;
    list-style-type: none;
    counter-increment: item;
    position: relative; }
    .fish-finder li:before {
      display: inline-block;
      width: 20px;
      padding-right: 12px;
      font-weight: bold;
      text-align: left;
      content: counter(item) ".";
      position: absolute;
      left: -21px; }

.fish-finder--inland-silverside .fish-finder__img {
  padding: 130px 0 0; }

.fish-finder__table {
  background: url("../images/bg/fish-finder-bg.jpg");
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  height: 900px; }
  .fish-finder__table table {
    margin: 0 auto;
    position: relative;
    z-index: 3; }

.fish-finder__directions {
  padding-top: 25px;
  margin-left: 50px;
  min-height: 330px;
  width: 300px; }

.fish-finder__terms {
  border-radius: 0 0 180px 180px;
  width: 360px;
  background: #71946A;
  text-align: center;
  position: absolute;
  right: 28px;
  top: 0; }
  .fish-finder__terms h2 {
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 17px;
    text-transform: uppercase;
    margin: 45px 0 25px; }

.fish-finder__img {
  margin: 0 auto -30px;
  padding: 100px 0 0;
  position: relative;
  width: 680px;
  z-index: 2; }
  .fish-finder__img a {
    display: flex; }
    .fish-finder__img a img {
      margin: 0 auto;
      max-height: 320px; }

.fish-facts {
  position: relative;
  margin: 0 auto;
  width: 778px; }
  .fish-facts h1 {
    color: #336f6d;
    font-weight: bold;
    font-family: "librebaskerville", serif;
    font-size: 69px;
    margin: 0; }

.fish-facts__wrapper {
  padding: 45px; }

.fish-facts__data {
  background: url("../images/bg/fish-finder-bg.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 50px;
  margin-top: -140px; }
  .fish-facts__data .fish-facts__wrapper {
    display: flex; }

.fish-facts__left {
  width: 210px;
  padding-right: 20px;
  flex-grow: 1; }

.fish-facts__right {
  flex-grow: 1;
  width: 455px; }

h3.fish-facts__label {
  font-size: 17px;
  line-height: 18px;
  font-weight: bold;
  text-transform: uppercase;
  margin: 19px 0 7px; }

.fish-facts__fact {
  font-size: 17px;
  line-height: 20px;
  font-weight: 500; }
  .fish-facts__fact ul {
    padding-left: 19px;
    margin: 0; }
    .fish-facts__fact ul li {
      margin-bottom: 4px; }

.fish-facts__button {
  padding: 0 45px 45px; }

.fish {
  background-repeat: no-repeat;
  background-size: contain;
  display: block; }

.fish--flipped {
  transform: scaleX(-1);
  filter: FlipH; }

.whiteperch {
  background-image: url("../images/fish/whiteperch.png");
  width: 250px;
  height: 129px; }

.inland-silverside {
  background-image: url("../images/fish/inland-silverside.png");
  width: 214px;
  height: 53px; }

.bandedkillifish {
  background-image: url("../images/fish/bandedkillifish.png");
  width: 200px;
  height: 65px; }

.blacknosedace {
  background-image: url("../images/fish/blacknosedace.png");
  width: 192px;
  height: 81px; }

.bluegill {
  background-image: url("../images/fish/bluegill.png");
  width: 175px;
  height: 111px; }

.brownbullhead {
  background-image: url("../images/fish/brownbullhead.png");
  width: 243px;
  height: 90px; }

.gizzardshad {
  background-image: url("../images/fish/gizzardshad.png");
  width: 290px;
  height: 138px; }

.mosquitofish {
  background-image: url("../images/fish/mosquitofish.png");
  width: 123px;
  height: 46px; }

.mudminnow {
  background-image: url("../images/fish/mudminnow.png");
  width: 185px;
  height: 70px; }

.mummichog {
  background-image: url("../images/fish/mummichog.png");
  width: 192px;
  height: 66px; }

.button {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  background-color: #7a9c5e;
  color: #0f2b28;
  padding: 16px 30px; }
  .button:hover {
    background-color: rgba(122, 156, 94, 0.8); }
  .button.disabled {
    color: #95999d;
    cursor: default;
    pointer-events: none;
    background-color: #cbd0d4; }
    .button.disabled:hover {
      background-color: #cbd0d4; }

.button--grass-green {
  background-color: #71946a; }
  .button--grass-green:hover {
    background-color: rgba(113, 148, 106, 0.8); }