@charset "UTF-8";
* {
  margin-block-start: 0em;
  margin-block-end: 0em; }

body {
  background-color: black;
  font-family: 'Roboto Mono', monospace;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: hidden; }

.social-current {
  width: 80px;
  position: absolute;
  top: 0;
  left: 10px;
  display: flex; }
  @media (max-width: 825px) {
    .social-current {
      display: none; } }
  .social-current #facebook2 > a > svg {
    fill: white;
    opacity: 0.8;
    width: 30px;
    margin: 5px; }
    @media (min-width: 2000px) {
      .social-current #facebook2 > a > svg {
        margin-top: 20px !important;
        margin-bottom: 20px !important; } }
  .social-current #twitter2 > a > svg {
    fill: white;
    opacity: 0.8;
    width: 30px;
    margin: 5px; }
    @media (min-width: 2000px) {
      .social-current #twitter2 > a > svg {
        margin-top: 20px !important;
        margin-bottom: 20px !important; } }

#credits {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: flex;
  width: 80px;
  color: white;
  z-index: 100; }
  @media (max-width: 825px) {
    #credits {
      display: none; } }

a.partners {
  color: white;
  opacity: 0.7;
  font-size: 18px;
  margin-right: 20px;
  cursor: pointer !important;
  text-decoration: none; }

a.partners:hover {
  color: yellow; }

@media (max-width: 450px) {
  #donors {
    width: 96vw; } }

.greyColor {
  color: grey; }

.whiteColor {
  color: white; }

.head {
  font-family: 'Open Sans', sans-serif;
  font-weight: 800; }

h1, h3 {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0; }

.hide {
  display: none; }

.show {
  display: block; }

#mygrid {
  display: grid;
  grid-template-columns: 75% 25%;
  grid-template-rows: 10vh 90vh; }
  @media (max-width: 825px) {
    #mygrid {
      grid-template-columns: 40% 60%;
      grid-template-rows: 20vh 50vh 25vh 5vh; } }
  @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    #mygrid {
      grid-template-columns: 40% 60%;
      grid-template-rows: 15vh 40vh 35vh 5vh; } }

#blockList {
  grid-column: 1/2;
  grid-row: 1/2;
  width: 70%;
  text-transform: uppercase;
  margin: 10px auto;
  display: flex;
  flex-direction: row;
  color: white;
  justify-content: space-between;
  font-family: Arial, serif;
  font-size: 12px;
  font-weight: 800; }
  @media (max-width: 825px) {
    #blockList {
      grid-column: 1/-1;
      grid-row: 1/2; } }
  @media (min-width: 2000px) {
    #blockList {
      margin: 30px auto;
      font-size: 25px; } }

#myModal {
  position: absolute;
  display: grid;
  grid-template-columns: 1fr 0.5fr 300px 0.5fr 1fr;
  grid-template-rows: 10% 0.5fr auto 0.5fr 100px 5%;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: black;
  z-index: 1000; }
  @media (min-width: 2000px) {
    #myModal {
      grid-template-columns: 1fr 0.5fr 600px 0.5fr 1fr;
      grid-template-rows: 5% 0.5fr auto 0.5fr 100px 10%; } }
  @media (max-width: 825px) {
    #myModal {
      grid-template-columns: 1fr 0.5fr 300px 0.5fr 1fr;
      grid-template-rows: 20% 0.5fr auto 0.5fr 100px 20%; } }
  @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) {
    #myModal {
      grid-template-rows: 30% 0.5fr 1fr 0.5fr 80px 30%; } }
  @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1.5) {
    #myModal {
      grid-template-rows: 20% 0.5fr 1fr 0.5fr 50px 20%; } }

.gameTitleLetters {
  display: flex;
  justify-content: space-between;
  font-size: 36px;
  color: yellow; }
  @media (min-width: 2000px) {
    .gameTitleLetters {
      font-size: 70px; } }

#lotOfCardsBackground {
  position: relative;
  grid-column: 2/5;
  grid-row: 2/5;
  width: 100%;
  height: 100%; }
  @media (max-width: 825px) {
    #lotOfCardsBackground {
      display: none; } }

.cardOnBackground {
  background-color: black;
  position: absolute;
  width: 20%;
  height: 30%;
  border: 1px solid white;
  border-left: 0; }
  @media (min-width: 2000px) {
    .cardOnBackground {
      border: 3px solid white; } }

.cardOnBackground:before {
  content: "";
  position: absolute;
  right: 100%;
  top: -1px;
  border-width: 10px;
  border-style: solid;
  border-color: inherit;
  border-left-color: transparent;
  border-top-color: transparent; }
  @media (min-width: 2000px) {
    .cardOnBackground:before {
      top: -3px; } }

.cardOnBackground:after {
  content: '';
  background: black;
  position: absolute;
  box-sizing: border-box;
  width: 20px;
  right: 100%;
  bottom: -1px;
  top: 19px;
  border-width: 0 0 1px 1px;
  border-color: inherit;
  border-style: solid; }
  @media (min-width: 2000px) {
    .cardOnBackground:after {
      bottom: -3px;
      top: 17px;
      border-width: 0 0 3px 3px; } }

@media (max-width: 825px) {
  #lotOfCardsBackground {
    display: none; } }

@media (min-width: 826px) {
  .mob {
    display: none; } }

button#play {
  border: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: 800;
  width: 40%;
  grid-row: 5/6;
  grid-column: 3/4;
  background-color: red;
  text-transform: uppercase;
  padding: 5px;
  color: white;
  letter-spacing: 2px; }
  @media (min-width: 2000px) {
    button#play {
      font-size: 40px; } }

#gameTitle {
  width: 40%;
  color: white;
  height: auto;
  z-index: 1001;
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 30px;
  margin-left: calc(30% - 20px);
  margin-top: 20px;
  margin-bottom: 20px;
  justify-self: center; }

#gameTitle {
  grid-column: 3/4; }

.mob {
  margin-top: 20%;
  grid-column: 3/4;
  grid-row: 3/4;
  position: absolute;
  width: 100%;
  height: auto; }

.rect1 {
  width: 100%;
  height: 100%;
  grid-column: 1/2; }

.rect2 {
  width: 100%;
  height: 100%;
  grid-column: 3/4; }

h2 {
  text-align: justify;
  justify-self: center;
  margin: 0 auto;
  color: yellow;
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: 4px; }
  @media (min-width: 2000px) {
    h2 {
      font-size: 70px !important; } }

#playDiv {
  justify-self: center;
  align-self: center;
  width: calc(60% + 20px);
  margin-left: 20px;
  grid-column: 3/4;
  grid-row: 3/4;
  position: absolute;
  background: black;
  border: 1px solid white;
  border-left: 0; }
  @media (max-width: 825px) {
    #playDiv {
      grid-row: 2/3; } }
  @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) {
    #playDiv {
      grid-row: 3/4; } }
  @media (min-width: 2000px) {
    #playDiv {
      border: 3px solid white; } }

#playDiv:before {
  grid-column: 2/3;
  grid-row: 3/4;
  content: "";
  position: absolute;
  right: 100%;
  top: -1px;
  border-width: 10px;
  border-style: solid;
  border-color: white;
  border-left-color: transparent;
  border-top-color: transparent;
  z-index: 1001; }
  @media (min-width: 2000px) {
    #playDiv:before {
      top: -3px; } }

#playDiv:after {
  grid-column: 2/3;
  grid-row: 3/4;
  content: '';
  background: black;
  position: absolute;
  box-sizing: border-box;
  width: 20px;
  right: 100%;
  bottom: -1px;
  top: 19px;
  border-width: 0 0 1px 1px;
  border-color: white;
  border-style: solid;
  z-index: 1001; }
  @media (min-width: 2000px) {
    #playDiv:after {
      bottom: -3px;
      top: 17px;
      border-width: 0 0 3px 3px; } }

h4 {
  margin-left: -15px;
  font-size: 20px;
  color: white;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  font-weight: 400;
  line-height: 1.6;
  -webkit-margin-before: 0.33em;
  -webkit-margin-after: 0.33em; }
  @media (min-width: 2000px) {
    h4 {
      font-size: 40px !important; } }

.note {
  text-align: center;
  margin: 0 auto;
  width: 90%;
  grid-row: 6/7;
  grid-column: 1/-1;
  color: black;
  font-size: 13px;
  z-index: 1002; }
  @media (min-width: 2000px) {
    .note {
      font-size: 25px; } }

#myModal2 {
  position: absolute;
  display: none;
  grid-template-columns: 1fr 300px 1fr;
  grid-template-rows: 15% 2fr 1fr 1fr;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: black;
  z-index: 2000; }
  @media (max-width: 830px) and (orientation: landscape) {
    #myModal2 {
      display: grid; } }

#warning {
  width: 100%;
  margin-left: 10px;
  grid-column: 2/3;
  grid-row: 3/4;
  position: absolute;
  background: black; }

#gameTitle2 {
  width: 40%;
  color: white;
  height: auto;
  z-index: 1001;
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 30px;
  margin-top: 50px;
  margin-bottom: 50px;
  justify-self: center; }

#gameTitle2 {
  grid-column: 2/3; }

#innerModule {
  grid-column: 1/2;
  grid-row: 2/3;
  width: 90%;
  height: 90%;
  display: flex;
  opacity: 0.80;
  z-index: 100; }
  @media (max-width: 825px) {
    #innerModule {
      margin-top: 20px;
      grid-column: 1/-1;
      grid-row: 1/-1;
      width: 100%; } }
  #innerModule #innerModuleContent {
    font-size: 14px;
    position: relative;
    padding: 0 20px;
    width: 50%;
    line-height: 1.8;
    max-width: 800px;
    margin: auto;
    background-color: black;
    color: lightgrey; }
    @media (max-width: 700px) {
      #innerModule #innerModuleContent {
        width: 100%; } }
    @media (min-width: 1500px) {
      #innerModule #innerModuleContent {
        font-size: 16px; } }
    #innerModule #innerModuleContent div {
      width: 20px;
      height: 20px;
      color: white;
      display: flex;
      position: absolute;
      top: -20px;
      right: -20px; }
    @media (max-width: 825px) {
      #innerModule #innerModuleContent p {
        font-size: 13px; } }
  #innerModule a#go {
    font-size: 18px;
    margin: auto;
    cursor: pointer; }
  #innerModule img#PlayMe {
    margin: auto;
    cursor: pointer; }

#rightSide {
  height: 100vh;
  grid-column: 2/3;
  grid-row: 1/3;
  display: grid;
  grid-template-rows: 15vh 65vh auto; }
  @media (max-width: 825px) {
    #rightSide {
      height: 100%;
      grid-column: 1/-1;
      grid-row: 3/4;
      grid-template-rows: 100%; } }

#rightSideBefore {
  height: 100vh;
  grid-column: 2/3;
  grid-row: 1/3;
  display: grid;
  grid-template-columns: repeat(5, auto); }
  @media (max-width: 825px) {
    #rightSideBefore {
      height: 100%;
      grid-column: 1/-1;
      grid-row: 3/4; } }

#mediaLogo {
  align-items: center;
  width: 100%;
  grid-column: 1/-1;
  grid-row: 1/2;
  background-color: #6e9ae2; }
  @media (max-width: 825px) {
    #mediaLogo {
      display: none; } }

#mediaLogo > img {
  display: block;
  margin-left: 5%;
  margin-right: auto; }

#messenger {
  width: 100%;
  grid-column: 1/-1;
  grid-row: 2/3;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: black; }
  @media (max-width: 825px) {
    #messenger {
      margin-top: 20px;
      grid-row: 1/-1;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 0; } }

#messenger > p {
  width: 90%;
  font-size: 16px;
  color: white;
  margin-left: 10%;
  margin-top: 30px;
  -webkit-margin-after: 0; }
  @media (min-width: 2000px) {
    #messenger > p {
      font-size: 20px;
      line-height: 1.6; } }
  @media (max-width: 826px) {
    #messenger > p {
      font-size: 12px; } }

.contentButton > p {
  font-style: italic !important;
  text-align: left;
  width: 80%;
  color: white;
  font-size: 12px;
  margin-left: 10%;
  -webkit-margin-before: 0; }
  @media (min-width: 2000px) {
    .contentButton > p {
      font-size: 16px;
      line-height: 1.6; } }

.contentButtonHide > p {
  display: none; }

button.showChoiceResult {
  font-family: 'Roboto Mono', monospace;
  background-color: inherit;
  text-transform: lowercase !important;
  font-style: italic !important;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: right;
  outline: none;
  font-size: 12px;
  pointer-events: all;
  z-index: 50000;
  -webkit-margin-after: 0; }

#spiral {
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
  grid-column: 1/-1;
  grid-row: 3/4;
  background-color: #6e9ae2; }
  @media (max-width: 825px) {
    #spiral {
      display: none; } }

@media (max-width: 825px) {
  #chart {
    float: right; } }

.points {
  margin-left: 10%;
  vertical-align: middle;
  color: white; }
  @media (min-width: 2000px) {
    .points {
      font-size: 30px; } }
  .points p {
    -webkit-margin-before: 0.5em;
    -webkit-margin-after: 0.5em; }

#logomob {
  grid-column: 1/2;
  grid-row: 1/2;
  align-items: center; }
  @media (min-width: 801px) {
    #logomob {
      display: none; } }

#spiralmob {
  margin-top: 10px;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  opacity: 0;
  grid-column: 2/3;
  grid-row: 1/2; }
  @media (min-width: 801px) {
    #spiralmob {
      display: none; } }
  #spiralmob p {
    -webkit-margin-before: 0.2em !important;
    -webkit-margin-after: 0.2em !important; }
    @media only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
      #spiralmob p {
        font-size: 14px; } }
  @media only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
    #spiralmob h1 {
      font-size: 25px; } }
  #spiralmob #chart {
    position: absolute;
    top: -10px;
    right: 0; }
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
      #spiralmob #chart {
        right: 91.7969px; } }

#logoId {
  animation: adjust 1s forwards;
  max-height: 100%; }

#logoIdMob {
  display: block;
  margin-top: 20px;
  margin-left: 10%;
  margin-right: auto;
  animation: adjust 1s forwards;
  width: 80%; }
  @media (max-width: 825px) {
    #logoIdMob {
      margin-left: 0;
      max-height: 80%; } }

@keyframes adjust {
  to {
    transform: translate(0px, 0px); } }
#cards {
  grid-column: 1/2;
  grid-row: 2/3;
  position: relative; }
  @media (max-width: 825px) {
    #cards {
      grid-column: 1/-1;
      grid-row: 2/3; } }
  #cards .section {
    opacity: 0; }

#blinkHint {
  position: absolute;
  top: 20vh;
  right: 2%;
  display: none;
  grid-gap: 10px;
  grid-template-columns: auto auto; }
  @media (max-width: 1120px) {
    #blinkHint {
      display: none !important; } }

#blinkHint > p {
  font-size: 13px;
  color: white; }

#blinkHintmob {
  width: max-content;
  position: relative;
  margin-top: 10px;
  margin-left: 15px;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: auto auto; }
  @media (min-width: 1121px) {
    #blinkHintmob {
      display: none !important; } }

#blinkHintmob > p {
  font-size: 14px;
  color: white; }

.cardContainer {
  height: 85%;
  position: relative;
  margin-right: 20%;
  top: 50px;
  left: 10%; }
  @supports (-moz-transform: translate(0, 0)) {
    .cardContainer {
      height: 270px;
      top: 30px; } }
  @media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
    .cardContainer {
      height: 240px; } }
  @media (max-width: 825px) {
    .cardContainer {
      margin-right: 10%;
      top: 10%;
      left: 0; } }

.card {
  height: 350px;
  width: 500px;
  position: absolute;
  background: white;
  border-width: 3px;
  border-style: solid;
  border-color: #6e9ae2;
  border-left: 0; }
  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .card {
      height: 500px;
      width: 500px; } }
  @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    .card {
      height: 40vh !important; } }

.card:before {
  content: "";
  position: absolute;
  right: 100%;
  top: -3px;
  border-width: 15px;
  border-style: solid;
  border-color: inherit;
  border-left-color: transparent;
  border-top-color: transparent; }

.card:after {
  content: '';
  background: white;
  position: absolute;
  box-sizing: border-box;
  width: 30px;
  right: 100%;
  bottom: -3px;
  top: 27px;
  border-width: 0 0 3px 3px;
  border-color: inherit;
  border-style: solid; }

.block2, .block3, .block4, .block5, .block6, .hiddenCard {
  display: none; }

h3 {
  width: 100%;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  margin-bottom: 20px; }
  @media (max-width: 825px) {
    h3 {
      font-size: 13px !important; } }
  @media (min-width: 2000px) {
    h3 {
      font-size: 25px; } }
  @media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
    h3 {
      font-size: 17px; } }

.variant {
  width: 100%;
  display: grid;
  grid-template-columns: 100% 20%; }

li {
  font-size: 14px;
  line-height: 1.5;
  list-style-type: none; }
  @media (max-width: 825px) {
    li {
      font-size: 13px; } }
  @media (min-width: 2000px) {
    li {
      font-size: 20px; } }
  @media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
    li {
      font-size: 11px; } }

li.pseudo {
  min-height: 0; }

p {
  width: 100%; }

button {
  min-width: 50px;
  background-color: white;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 5px; }
  @media (min-width: 2000px) {
    button {
      font-size: 18px;
      padding: 5px; } }

.additionalInfo {
  display: none;
  font-style: italic; }

.block-end {
  width: 30vw;
  height: 80vh;
  background-color: black;
  border: 3px solid white;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); }

button.answerYes, button.choice, button.next, button.error, button.myHint, button.answerNo, button.noThanks {
  position: absolute;
  bottom: 0; }
  @media (max-width: 825px) {
    button.answerYes, button.choice, button.next, button.error, button.myHint, button.answerNo, button.noThanks {
      position: absolute;
      bottom: 10px; } }

button {
  cursor: pointer; }

button.answerYes, button.choice, button.next, button.error, button.myHint {
  left: 0;
  border: 2px solid #6e9ae2;
  color: #6e9ae2; }

button.answerNo, button.noThanks {
  right: 0;
  border: 2px solid #6e9ae2;
  color: #6e9ae2; }

img.media {
  height: 85px;
  width: auto; }
  @media (min-width: 2000px) {
    img.media {
      height: 150px; } }

#resultContainer {
  display: none;
  position: relative;
  width: 100%;
  grid-column: 1/2;
  grid-row: 2/3; }
  @media (max-width: 825px) {
    #resultContainer {
      grid-column: 1/-1;
      grid-row: 1/-1; } }

.result {
  height: auto;
  width: 500px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  background: black;
  border-width: 3px;
  border-style: solid;
  border-color: white;
  border-left: 0; }
  @media (min-width: 2000px) {
    .result {
      height: auto;
      width: 700px; } }
  @media (max-width: 825px) {
    .result {
      width: 85%;
      top: 50%;
      left: 54%;
      transform: translate(-50%, -50%);
      height: auto; } }

.result:before, #usersRate:before {
  content: "";
  position: absolute;
  right: 100%;
  top: -3px;
  border-width: 15px;
  border-style: solid;
  border-color: white;
  border-left-color: transparent;
  border-top-color: transparent; }

.result:after, #usersRate:after {
  content: '';
  background: black;
  position: absolute;
  box-sizing: border-box;
  width: 30px;
  right: 100%;
  bottom: -3px;
  top: 27px;
  border-width: 0 0 3px 3px;
  border-color: white;
  border-style: solid; }

#theResult, #pleasePutYourName {
  font-size: 14px;
  text-align: center;
  color: white;
  width: 80%;
  margin-left: calc(10% - 20px);
  margin-top: 3%; }
  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    #theResult, #pleasePutYourName {
      font-size: 20px; } }
  @media (min-width: 2000px) {
    #theResult, #pleasePutYourName {
      font-size: 20px;
      margin-top: 50px !important;
      margin-bottom: 20px !important; } }

#rank {
  -webkit-margin-before: 0.5em;
  -webkit-margin-after: 1em;
  font-size: 22px;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  color: yellow;
  width: 90%;
  text-transform: uppercase; }
  @media (min-width: 2000px) {
    #rank {
      margin-top: 50px; } }

#inlineSpiral > img, #inlineSpiral2 > img {
  display: none; }

.social-icons {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto 0 -20px; }

#facebook > a > svg {
  fill: white;
  width: 30px;
  margin: 5px; }
  @media (min-width: 2000px) {
    #facebook > a > svg {
      margin-top: 20px !important;
      margin-bottom: 20px !important; } }

#twitter > a > svg {
  fill: white;
  width: 30px;
  margin: 5px; }
  @media (min-width: 2000px) {
    #twitter > a > svg {
      margin-top: 20px !important;
      margin-bottom: 20px !important; } }

p.note-end {
  -webkit-margin-before: 0.5em;
  -webkit-margin-after: 2em; }
  @media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
    p.note-end {
      font-size: 10px; } }

.username {
  text-align: center;
  width: auto;
  margin-top: 10px;
  margin-bottom: 10px; }
  @media (min-width: 2000px) {
    .username {
      margin-top: 30px;
      margin-bottom: 30px; } }

#uname {
  margin-top: 10px;
  margin-bottom: 10px; }

#gameRate {
  display: none;
  margin-left: calc((80% - 500px)/2);
  width: 500px;
  color: white;
  height: 50px;
  position: absolute;
  margin-top: 6%; }
  @media (max-width: 825px) {
    #gameRate {
      width: 80%;
      margin-left: 10%; } }

#returnToResult {
  cursor: pointer;
  display: none;
  margin-left: calc((80% - 500px)/2);
  width: auto;
  height: auto;
  position: absolute;
  margin-top: 6%; }
  @media (max-width: 825px) {
    #returnToResult {
      width: auto;
      margin-left: 10%; } }

#showUserRate, #returnToResult {
  background-color: transparent;
  border: 1px solid white;
  cursor: pointer;
  color: white;
  font-size: 12px;
  padding: 5px; }
  @media (min-width: 2000px) {
    #showUserRate, #returnToResult {
      font-size: 18px; } }

#usersRate {
  display: none;
  overflow-y: scroll;
  height: 70%;
  width: 500px;
  margin-left: calc((80% - 500px)/2);
  margin-top: 10%;
  position: absolute;
  background: black;
  border-width: 3px;
  border-style: solid;
  border-color: white; }
  @media (min-width: 2000px) {
    #usersRate {
      height: 60%;
      width: 700px; } }
  @media (max-width: 825px) {
    #usersRate {
      margin-top: 20vh;
      width: 80%;
      margin-left: 10%;
      height: 70vh; } }
  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    #usersRate {
      height: 65vh; } }

/*Спираль*/
#content {
  margin-top: 50vh; }

table {
  width: 90%;
  margin: 20px 5%;
  color: white;
  font-size: 12px; }

thead > tr > th {
  text-align: left; }

th, td {
  padding: 10px; }

/*--- Анімація --*/
.blink {
  animation: blink-animation 0.3s steps(5, start);
  animation-iteration-count: 3; }

@keyframes blink-animation {
  to {
    opacity: 0; } }
@-webkit-keyframes blink-animation {
  to {
    opacity: 0; } }
.hideMe {
  display: none; }

.arrow-3 {
  height: 0px;
  width: 0px;
  border: 8px solid;
  border-color: #b30a00 #b30a00 transparent transparent;
  transform: rotate(45deg); }

/*# sourceMappingURL=application.css.map */