:root {
  --blue: #1c61ad;
  --lightblue: #26aae1;
  --red: #e83f24;
  --firstcolor: black;
  --firsttextcolor: white;
  --secondcolor: black;
  --firsttextcolor: white;

  --firstcolor_prev: black;
  --secondcolor_prev: black;
}

body {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--firstcolor);
  overflow-x: hidden;
}

a {
  color: var(--secondcolor) !important;
  font-weight: bold;
}

h1 {
  font-size: 3rem;
  text-transform: uppercase;
}
h2 {
  font-size: 2.4rem;
  line-height: 3rem;
  font-weight: 900;
  text-transform: uppercase;
}
h3,
h4 {
  font-size: 2rem;
  text-transform: uppercase;
  font-weight: 600;
}

/* list of faq questions*/
h4::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: black;
  margin-right: 8px; /* Space between box and text */
}
p {
  font-size: 1.3rem;
}

#content img {
  width: 100%;
}

/* NYERTESEK */
.nyertesek_link {
  background-color: var(--secondcolor);
  color: black !important;
  padding: 10px;
}

.nyertesek_link:hover {
  background-color: var(--playcolor);
}

/* LOADING ANIMATION */

#loading {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  position: fixed;
  z-index: 2;
}
.square {
  display: block;
  float: left;
  width: 40px;
  height: 40px;
  opacity: 0;
  background: white;
  animation: loading 2s infinite;
}

#s1 {
  animation-delay: 0s;
}
#s2 {
  animation-delay: 0.25s;
}
#s3 {
  animation-delay: 0.5s;
}
#s4 {
  animation-delay: 1.75s;
}
#s5 {
  animation: none;
}
#s6 {
  animation-delay: 0.75s;
}
#s7 {
  animation-delay: 1.5s;
}
#s8 {
  animation-delay: 1.25s;
}
#s9 {
  animation-delay: 1s;
}
@keyframes loading {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* NAVIGATION TOP*/

#title-bar {
  background-color: white;
  padding: 10px;
  top: 16px;
  left: 16px;
  right: 16px;
  font-weight: bold;
  position: fixed;
  z-index: 2;
}

#title-bar .col {
  padding: 0 8px;
}

#title {
  color: var(--blue) !important;
  font-size: 1.9rem;
  line-height: 1.9rem;
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

#title img {
  vertical-align: middle;
  height: 40px;
  margin-right: 8px;
}

#title span {
  vertical-align: middle;
}

.left-menu-icons {
  margin-left: 8px;
  margin-right: 48px;
}
.right-menu-icons {
  right: 8px;
}

.slidecontainer {
  width: 100%; /* Width of the outside container */
}
.slidecontainer img.icon {
  display: inline-block;
  margin-right: 40px;
}
.slidecontainer img.icon:hover {
  transform: rotate(0);
}
.slidecontainer div {
  display: inline-block;
  font-weight: bold;
  font-size: 40px;
  line-height: 40px;
}

/* The slider itself */
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #c2c0c2;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}
.thumb {
  display: none;
}
/* Mouse-over effects */
input[type="range"]:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 23px;
  height: 23px;
  background: var(--playcolor);
  border-radius: 0;
  margin-top: -10px;
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 23px;
  height: 23px;
  background: var(--playcolor);
  border-radius: 0;
  margin-top: -10px;
  cursor: pointer;
}

#navigation-bar .row {
  margin-bottom: 0;
}

img.icon {
  display: block;
  transform: rotate(0deg);
  -webkit-transition: transform 0.2s linear;
  -moz-transition: transform 0.2s linear;
  -ms-transition: transform 0.2s linear;
  transition: transform 0.2s linear;
}
img.icon:hover {
  transform: translateY(4px);
}

img.icon.open {
  opacity: 0.5;
  transform: translateY(4px);
}

.right .icon {
  float: right;
  margin-left: 8px;
}

.menu {
  display: none;
  position: fixed;
  background-color: white;
  left: 16px;
  right: 16px;
  padding: 10px;
  margin-top: -3pt;
  top: 88px;
  z-index: 1;
}

/* MAIN MENU */

#main-menu li {
  font-size: 30px;
  line-height: 30px;
  font-weight: 600;
  margin-bottom: 8px;
  width: 100%;
}
#main-menu a {
  color: black !important;
}
#main-menu li :hover {
  color: var(--firstcolor);
  text-indent: -8px;
  padding-left: 24px;
  display: inline-block;
}
#main-menu ul {
  margin: 0;
}

.game-info h3,
.game-info p {
  margin-top: 0;
}
.game-info p:last-child {
  margin-bottom: 0;
}

#english-info {
  bottom: 16px;
}

#english-info div {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
}

/* PLAY MENU */

#play-menu {
  left: unset;
  right: 120px;
}

.playing-menu tr {
  border: 0px;
}

.playing-menu td {
  padding: 0;
  text-transform: uppercase;
  text-align: center;
  font-size: 0.7rem;
}

.playing-menu img {
  margin: auto;
  margin-bottom: 8px;
}

.bottom-bordered {
  border-bottom: 8px solid black;
  padding-bottom: 8px;
  margin-bottom: 8px;
}

#content,
#music-maker {
  width: calc(100vw - 80px);
  margin-left: 40px;
}

#content {
  margin-top: 120px;
  color: var(--firsttextcolor);
}

#music-maker {
  top: 100px;
  height: calc(100vh - 50px);
  position: fixed;
  display: none;

  padding-left: calc(50vw - 16px - 136px);
  padding-right: calc(50vw - 16px - 136px);
  padding-top: calc(50vh - 390px);
}

.opener {
  text-align: center;
  position: fixed;
  height: 60vh;
  width: 60px;
  top: calc((100vh - 74px) / 2 - 30vh + 74px);
  text-transform: uppercase;
  writing-mode: vertical-lr;
  font-weight: bold;
}

#music-maker-opener {
  right: -30px;
  background-color: var(--secondcolor);
}

#content-opener {
  left: -30px;
  background-color: var(--firstcolor);
  display: none;
  transform: rotate(-180deg);
}

/*music design*/

#midi {
  width: 204px;
  margin-left: calc(50% - 102px);
}

#warning {
  z-index: -2;
  opacity: 0;
  position: fixed;
  width: 100%;
  transform-origin: center;
}
#warning::after {
  z-index: -2;
  opacity: 0;
  content: "VÁLASSZ EGY HANGOT!";
  top: -34px;
  position: relative;
  font-weight: bold;
}

#warning.active {
  animation: show_up 2s linear;
}
#warning.active::after {
  animation: show_up 2s linear;
}
@keyframes show_up {
  0% {
    opacity: 0;
    z-index: 2;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  99% {
    opacity: 0;
    z-index: 2;
  }
  100% {
    z-index: -2;
  }
}

.beat {
  width: 42px;
  height: 42px;
  border: 6px solid black;
  margin-left: 12px;
  margin-top: 12px;
  display: inline-block;
  cursor: pointer;
}

.midi-row {
  font-size: 0;
}

.midi-row :first-child {
  margin-left: 0;
}

#instrument {
  margin-top: 32px;
}

.logo {
  position: relative;
  display: inline-block;
  width: 0;
  min-width: 200px;
  padding: 1em;
  min-height: 80px;
  vertical-align: middle;
  text-align: center;
}
.ccc {
  max-width: 400px;
}

/*tamogatok az oldal aljan*/

#advertisement .logo {
  width: 56px;
  height: 56px;
  min-width: unset;
  min-height: unset;
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 4px;
}

#advertisement .logo:hover {
  background: var(--secondcolor);
}

#advertisement a {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}

#advertisement img {
  width: 100%;
  vertical-align: middle;
}

/*korabbiak*/
.grid_container {
  display: flex;
  align-content: flex-start;
  gap: 10px 10px;
  flex-flow: row wrap;
  justify-content: space-around;
}
.image_container {
  position: relative;
  width: 30%;
  display: flex;
}
.image_container a {
  width: 100%;
}
.korabbi-kep {
  display: block;
  width: 100%;
  height: auto;
}
.image_overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: 0.1s;
  background-color: var(--blue);
  top: 0;
}
.image_container:hover .image_overlay,
.image_container:active .image_overlay {
  opacity: 1;
}

.image_text {
  font-size: 2rem;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.pixel-corners,
.pixel-corners--wrapper {
  clip-path: polygon(
    0px calc(100% - 20px),
    10px calc(100% - 20px),
    10px calc(100% - 10px),
    20px calc(100% - 10px),
    20px 100%,
    calc(100% - 20px) 100%,
    calc(100% - 20px) calc(100% - 10px),
    calc(100% - 10px) calc(100% - 10px),
    calc(100% - 10px) calc(100% - 20px),
    100% calc(100% - 20px),
    100% 20px,
    calc(100% - 10px) 20px,
    calc(100% - 10px) 10px,
    calc(100% - 20px) 10px,
    calc(100% - 20px) 0px,
    20px 0px,
    20px 10px,
    10px 10px,
    10px 20px,
    0px 20px
  );
}

.pixel-corners,
.pixel-corners--wrapper {
  clip-path: polygon(
    0px calc(100% - 16px),
    8px calc(100% - 16px),
    8px calc(100% - 8px),
    16px calc(100% - 8px),
    16px 100%,
    calc(100% - 16px) 100%,
    calc(100% - 16px) calc(100% - 8px),
    calc(100% - 8px) calc(100% - 8px),
    calc(100% - 8px) calc(100% - 16px),
    100% calc(100% - 16px),
    100% 16px,
    calc(100% - 8px) 16px,
    calc(100% - 8px) 8px,
    calc(100% - 16px) 8px,
    calc(100% - 16px) 0px,
    16px 0px,
    16px 8px,
    8px 8px,
    8px 16px,
    0px 16px
  );
}
.pixel-corners {
  border: 8px solid transparent;
}
.pixel-corners--wrapper {
  width: fit-content;
  height: fit-content;
}
.pixel-corners--wrapper .pixel-corners {
  display: block;
  clip-path: polygon(
    8px 16px,
    16px 16px,
    16px 8px,
    calc(100% - 16px) 8px,
    calc(100% - 16px) 16px,
    calc(100% - 8px) 16px,
    calc(100% - 8px) calc(100% - 16px),
    calc(100% - 16px) calc(100% - 16px),
    calc(100% - 16px) calc(100% - 8px),
    16px calc(100% - 8px),
    16px calc(100% - 16px),
    8px calc(100% - 16px)
  );
}
.pixel-corners::after,
.pixel-corners--wrapper::after {
  content: "";
  position: absolute;
  clip-path: polygon(
    0px calc(100% - 16px),
    8px calc(100% - 16px),
    8px calc(100% - 8px),
    16px calc(100% - 8px),
    16px 100%,
    calc(100% - 16px) 100%,
    calc(100% - 16px) calc(100% - 8px),
    calc(100% - 8px) calc(100% - 8px),
    calc(100% - 8px) calc(100% - 16px),
    100% calc(100% - 16px),
    100% 16px,
    calc(100% - 8px) 16px,
    calc(100% - 8px) 8px,
    calc(100% - 16px) 8px,
    calc(100% - 16px) 0px,
    16px 0px,
    16px 8px,
    8px 8px,
    8px 16px,
    0px 16px,
    0px 50%,
    8px 50%,
    8px 16px,
    16px 16px,
    16px 8px,
    calc(100% - 16px) 8px,
    calc(100% - 16px) 16px,
    calc(100% - 8px) 16px,
    calc(100% - 8px) calc(100% - 16px),
    calc(100% - 16px) calc(100% - 16px),
    calc(100% - 16px) calc(100% - 8px),
    16px calc(100% - 8px),
    16px calc(100% - 16px),
    8px calc(100% - 16px),
    8px 50%,
    0px 50%
  );
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: black;
  display: block;
  pointer-events: none;
}
.pixel-corners::after {
  margin: -8px;
}

/* beat inuse designs */
.beat.inuse_0,
.beat.inuse_1,
.beat.inuse_2,
.beat.inuse_3,
.beat.inuse_4 {
  background-size: 6px 6px;
  background-repeat: no-repeat;
  background-image: linear-gradient(var(--firstcolor), var(--firstcolor)),
    linear-gradient(var(--firstcolor), var(--firstcolor)),
    linear-gradient(var(--firstcolor), var(--firstcolor)),
    linear-gradient(var(--firstcolor), var(--firstcolor)),
    linear-gradient(var(--firstcolor), var(--firstcolor)),
    linear-gradient(var(--firstcolor), var(--firstcolor)),
    linear-gradient(var(--firstcolor), var(--firstcolor)),
    linear-gradient(var(--firstcolor), var(--firstcolor)),
    linear-gradient(var(--firstcolor), var(--firstcolor)),
    linear-gradient(var(--firstcolor), var(--firstcolor)),
    linear-gradient(var(--firstcolor), var(--firstcolor)),
    linear-gradient(var(--firstcolor), var(--firstcolor)),
    linear-gradient(var(--firstcolor), var(--firstcolor)),
    linear-gradient(var(--firstcolor), var(--firstcolor)),
    linear-gradient(var(--firstcolor), var(--firstcolor)),
    linear-gradient(var(--firstcolor), var(--firstcolor)),
    linear-gradient(var(--firstcolor), var(--firstcolor)),
    linear-gradient(var(--firstcolor), var(--firstcolor)),
    linear-gradient(var(--firstcolor), var(--firstcolor)),
    linear-gradient(var(--firstcolor), var(--firstcolor)),
    linear-gradient(var(--firstcolor), var(--firstcolor)),
    linear-gradient(var(--firstcolor), var(--firstcolor)),
    linear-gradient(var(--firstcolor), var(--firstcolor)),
    linear-gradient(var(--firstcolor), var(--firstcolor)),
    linear-gradient(var(--firstcolor), var(--firstcolor)),
    linear-gradient(var(--firstcolor), var(--firstcolor)),
    linear-gradient(var(--firstcolor), var(--firstcolor));
}

.beat.inuse_0 {
  background-position: 0px 0px, 6px 0px, 12px 0px, 18px 0px, 24px 0px, 0px 6px,
    12px 6px, 24px 6px, 0px 12px, 6px 12px, 12px 12px, 18px 12px, 24px 12px,
    0px 18px, 12px 18px, 24px 18px, 0px 24px, 6px 24px, 12px 24px, 18px 24px,
    24px 24px;
}

.beat.inuse_1 {
  background-position: 0px 0px, 12px 0px, 24px 0px, 6px 6px, 12px 6px, 18px 6px,
    0px 12px, 6px 12px, 12px 12px, 18px 12px, 24px 12px, 6px 18px, 12px 18px,
    18px 18px, 0px 24px, 12px 24px, 24px 24px;
}

.beat.inuse_2 {
  background-position: 0px 0px, 24px 0px, 6px 6px, 18px 6px, 12px 12px, 6px 18px,
    18px 18px, 0px 24px, 24px 24px;
}

.beat.inuse_3 {
  background-position: 12px 0px, 6px 6px, 18px 6px, 0px 12px, 24px 12px,
    6px 18px, 18px 18px, 12px 24px;
}

.beat.inuse_4 {
  background-position: 6px 6px, 12px 6px, 18px 6px, 6px 12px, 18px 12px,
    6px 18px, 12px 18px, 18px 18px;
}

.logger {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 80%;
  height: 100px;
  overflow: scroll;
  z-index: 1000;
  background: white;
}

.actions {
  border: 15px solid var(--red);
  padding: 5%;
  width: 95%;
  margin-left: 2%;
}

#content .collection img {
  width: auto;
}

#content .collection span {
  font-size: 1rem;
}

#content .collection .collection-item.avatar {
  min-height: auto;
}