@font-face {
  font-family: "Flappy Bird";
  src: url("../fonts/FB.eot");
  src: url("../fonts/FB.eot#iefix") format("embedded-opentype"), url("../fonts/FB.woff") format("woff"), url("../fonts/FB.ttf") format("truetype"),
    url("../images/FB.svg#04b_19regular") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: Arial, sans-serif;
  line-height: 150%;
  font-size: 15px;
  color: #5d5d5d;
}

body {
  background: #f7f7f7;
}

body.night {
  background: #352b3a;
  color: #b6a7be;
}
body.night.halloween {
  background: #1c1e3a;
}

body.craft {
  background: #cae8ff;
  background-color: #cae8ff;
  background-image: radial-gradient(#61c2ff 1.200000000000001px, transparent 1.200000000000001px), radial-gradient(#61c2ff 1.300000000000001px, #cae8ff 1.300000000000001px);
  background-size: 46px 46px;
  background-position: 0 0, 23px 23px;
}
body.fish {
  background-repeat: no-repeat;
  background-color: #0d437e;
  color: #fff;
  background-image: url(../images/wave-background.svg);
  background-size: contain;
}
.icon {
  -webkit-user-select: none;
  user-select: none;
  display: inline-block;
}

.wrapper {
  position: relative;
  color: #2b2b2b;
  font-size: 1em;
  line-height: 1.55;
  margin: 0 auto 100px;
  max-width: 600px;
  width: 100%;
}

#flappy-canvas {
  width: 100%;
  letter-spacing: 2px;
  touch-action: none;
}
.description {
  overflow: hidden;
}
.description,
.section,
.footer {
  margin: 0 auto;
  width: 100%;
  max-width: 700px;
  padding: 30px 5px 10px;
  box-sizing: border-box;
}

.section {
  padding: 0;
  display: table;
  background: #efefef;
  border-radius: 5px;
  margin-top: 150px;
}
.night .section {
  background: #28212c;
}
.night.halloween .section {
  background: #141529;
}
.craft .section {
  background: #b3deff;
}
.fish .section {
  background: #125cab;
}
.control {
  margin: 0 auto;
  width: 100%;
  max-width: 600px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: flex-end;
}

img.logo {
  float: left;
  width: 125px;
  height: 125px;
  margin-right: 20px;
  margin-bottom: 20px;
  background-position: 2px 2px;
  background-size: contain;
  background-clip: border-box;
  border-radius: 50%;
  shape-outside: border-box circle(50%);
  shape-margin: 20px;
  border: 5px solid #fff;
}

body.night img.logo,
body.night #records {
  border-color: #5e4c67;
}
body.fish #records {
  border-color: #398eea;
}

a:hover {
  text-decoration: none;
}

.footer {
  text-align: center;
}

.description h1 {
  font-family: Helvetica, sans-serif;
  font-size: 26px;
  color: #333;
}

.night .description h1 {
  color: #b6a7be;
}
.fish .description h1 {
  color: #fff;
}
.section h2 {
  text-transform: uppercase;
  font-family: Arial, sans-serif;
  line-height: 150%;
  font-size: 15px;
  font-weight: normal;
  margin-top: 20px;
}

#records {
  width: 100%;
  max-width: 230px;
  margin: 0 auto;
  border-collapse: collapse;
  border: 5px solid #fff;
}

#records tr {
  border-bottom: 1px solid #fff;
}
body.night #records tr {
  border-color: #5e4c67;
}
body.fish #records tr {
  border-color: #398eea;
}
body.night #records tr td:first-child {
  background-color: #362b3b;
  color: inherit;
}

body.craft #records tr td:first-child {
  background-color: #cce9ff;
}
body.fish #records tr td:first-child {
  background-color: #0d437e;
}
#records td {
  padding: 2px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
  max-width: 110px;
}

#records tr td:first-child {
  background: #f9f9f9;
}

.share {
  padding: 30px;
}

.share a {
  display: inline-block;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.share a span.sico {
  height: 25px;
  width: 25px;
  background-size: 25px 25px;
  display: block;
}

.fb {
  background-color: #3b5998;
}

.gp {
  background-color: #dc4e41;
}

.tt {
  background-color: #00aced;
}

.fb span.sico {
  background: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEzLjQyMyAyMHYtNy4yOThoMi40NjRsLjM2OS0yLjg0NWgtMi44MzJWOC4wNDJjMC0uODI0LjIzLTEuMzg1IDEuNDE3LTEuMzg1aDEuNTE1VjQuMTExQTIwLjI1NSAyMC4yNTUgMCAwIDAgMTQuMTQ4IDRjLTIuMTgzIDAtMy42NzggMS4zMjYtMy42NzggMy43NnYyLjA5N0g4djIuODQ1aDIuNDdWMjBoMi45NTN6IiBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4K),
    linear-gradient(transparent, transparent);
}

.tt span.sico {
  background: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIwIDcuNTM5YTYuNTYgNi41NiAwIDAgMS0xLjg4NS41MTcgMy4yOTQgMy4yOTQgMCAwIDAgMS40NDMtMS44MTYgNi41NzUgNi41NzUgMCAwIDEtMi4wODUuNzk2IDMuMjgzIDMuMjgzIDAgMCAwLTUuNTkzIDIuOTk0QTkuMzIgOS4zMiAwIDAgMSA1LjExNCA2LjZhMy4yOCAzLjI4IDAgMCAwIDEuMDE2IDQuMzgyIDMuMjc0IDMuMjc0IDAgMCAxLTEuNDg3LS40MXYuMDQxYTMuMjg1IDMuMjg1IDAgMCAwIDIuNjMzIDMuMjE4IDMuMzA1IDMuMzA1IDAgMCAxLTEuNDgyLjA1NiAzLjI4NiAzLjI4NiAwIDAgMCAzLjA2NiAyLjI4QTYuNTg1IDYuNTg1IDAgMCAxIDQgMTcuNTI0IDkuMjkxIDkuMjkxIDAgMCAwIDkuMDMyIDE5YzYuMDM4IDAgOS4zNC01IDkuMzQtOS4zMzcgMC0uMTQzLS4wMDQtLjI4NS0uMDEtLjQyNUE2LjY3MiA2LjY3MiAwIDAgMCAyMCA3LjUzOHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==),
    linear-gradient(transparent, transparent);
}

.menu {
  padding: 20px;
  text-align: center;
}

.menu a {
  display: inline-block;
  margin: 5px;
  text-decoration: none;
  vertical-align: top;
  text-align: center;
  width: 62px;
}

.menu a img {
  padding: 3px;
  border-radius: 5px;
  background: #2f2f2f;
  height: 43px;
}

body.night .menu a img {
  background: #b6a7be;
}
body.fish .menu a img {
  background: #005cc8;
}
.menu a span {
  display: block;
  color: #2f2f2f;
  text-align: center;
}

.menu a:hover img {
  background: #464646;
}

body.night .menu a span {
  color: #b6a7be;
}
body.fish .menu a span {
  color: #fff;
}
body.night .menu a:hover img {
  background: #cec4d4;
}
#username {
  line-height: 15px;
}
.btn {
  border: 1px solid #ccc;
  border-color: #ccc #ccc #bbb #ccc;
  border-radius: 5px;
  background: #e6e6e6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 15px 17px rgba(255, 255, 255, 0.5), inset 0 -5px 12px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  font-size: 80%;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  text-decoration: none;
  color: inherit;
  padding: 3px 5px;
  margin-right: 4px;
}
.btn img {
  vertical-align: bottom;
}
body.night .btn {
  text-shadow: none;
  box-shadow: none;
  background-color: #5e4c67;
  color: #f0f0f0;
  border-color: #96869f;
}
body.night .btn img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(50%) saturate(3%) hue-rotate(196deg) brightness(116%) contrast(88%);
}
body.fish .btn {
  text-shadow: none;
  background: #019add;
  box-shadow: none;
  border-color: #005cc8 #0d437e #0d437e #0d437e;
}
body.fish .btn img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(354deg) brightness(102%) contrast(102%);
}
.cpart {
  display: inline-flex;
  align-items: center;
  margin: 0 4px;
}

#volume {
  appearance: none;
  -webkit-appearance: none;
  background-color: #ddd;
  border-radius: 20px;
  max-width: 60px;
  height: 8px;
  margin-right: 4px;
}
body.night #volume {
  background-color: #5e4c67;
}
body.craft #volume {
  background-color: #99d3ff;
}
body.fish #volume {
  background-color: #043977;
}
#volume + label {
  cursor: pointer;
}
#volume + label img {
  vertical-align: middle;
}
body.night #volume + label img {
  filter: brightness(0) saturate(100%) invert(62%) sepia(13%) saturate(536%) hue-rotate(236deg) brightness(91%) contrast(91%);
}
body.fish #volume + label img {
  filter: brightness(0) saturate(100%) invert(49%) sepia(87%) saturate(2738%) hue-rotate(168deg) brightness(92%) contrast(99%);
}
#volume::-webkit-slider-runnable-track {
  -webkit-appearance: none;
}
#volume::-webkit-slider-thumb {
  background: #5d5d5d;
  -webkit-appearance: none;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  position: relative;
  border: none;
  cursor: pointer;
}
body.night #volume::-webkit-slider-thumb {
  background: #866c93;
}
body.fish #volume::-webkit-slider-thumb {
  background: #019add;
}
#volume::-moz-range-thumb {
  background: #5d5d5d;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  position: relative;
  border: none;
  cursor: pointer;
}
body.night #volume::-moz-range-thumb {
  background: #866c93;
}
body.fish #volume::-moz-range-thumb {
  background: #019add;
}
.section > div {
  display: table-cell;
  text-align: center;
  width: 50%;
  vertical-align: top;
  padding: 20px;
  box-sizing: border-box;
}

.section > div.adverts {
  padding-top: 40px;
}

.section > div.adverts > span {
  text-transform: uppercase;
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
}
body.night a {
  color: inherit;
}
body.fish a {
  color: inherit;
}
.adv {
  text-align: center;
  width: 100%;
}
body.sizegx08 .wrapper {
  max-width: 480px;
}
body.sizegx12 .wrapper {
  max-width: 720px;
}
body.sizegx15 .wrapper {
  max-width: 900px;
}
.snow {
  background-image: url(../images/snow.png), url(../images/snow1.png), url(../images/snow2.png) !important;
  top: 0;
  left: 0;
  z-index: 1;
  animation: snow 20s linear infinite;
}
@keyframes snow {
  from {
    background-position: 0 0, 0 0, 0 0;
  }
  to {
    background-position: 500px 500px, 400px 400px, -300px 300px;
  }
}
@media (max-width: 550px) {
  .section > div {
    display: block;
    width: 100%;
    padding: 20px 0;
  }
}

@media (max-width: 1050px) {
  #zoom {
    display: none;
  }
}