canvas {
  position: fixed;

  top: 0;
  left: 0;
  
}

#page-container{
  z-index:1;
}
:root {
  --dark-bg: rgba(15, 15, 15, 0.95);
  --spacing: 350px;

  font-family: brandon-grotesque, sans-serif;
  font-weight: 400;
  font-style: normal;
}


main {
  width: 100vw;
  color: white;
  z-index: 99;
  position: absolute;
  width: 100%;
  margin: 0px auto;
  padding: 120px 0px;
  
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

body > div:nth-child(3){
  right:400px !important;
}

body{
  min-height:100vh;
}
/*Scrollbar generation*/

::-webkit-scrollbar {
  width: 3px;
  height: 1px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #e1e1e1;
  border: 0px none #ffffff;
  border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}
::-webkit-scrollbar-thumb:active {
  background: #000000;
}
::-webkit-scrollbar-track {
  background: #666666;
  border: 15px none #ffffff;
  border-radius: 50px;
}
::-webkit-scrollbar-track:hover {
  background: #666666;
}
::-webkit-scrollbar-track:active {
  background: #333333;
}
::-webkit-scrollbar-corner {
  background: transparent;
}


div#container-logo {
  
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  padding: 10px 0px 0px 0px;
  background-color: rgba(128,128,128,0.25);
  background-image: linear-gradient( rgba(0,0,0,0.25),rgba(0,0,0,0.75) 35%, rgba(0,0,0,0.25));
  z-index:10000;
  position:fixed;
  color:white;
  
}


div#container-buttons {
  width:140px;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  padding: 10px;
  background-color: rgba(128,128,128,0.25);
  background-image: linear-gradient( rgba(0,0,0,0.25),rgba(0,0,0,0.75) 35%, rgba(0,0,0,0.25));
  z-index:10000;
  position:fixed;
  top: calc(100vh - 60px)
}

div#container-buttons:hover{
  cursor: pointer;
}
div#container-buttons {
  width:140px;
  display: grid;
  grid-auto-flow: column;
  text-align: center;
  color:white;
  line-height: 1;
}
@media only screen and (max-width: 600px) {
div#container-buttons {
  width:130px;
}}
select#voivodeship {
  color: #777 !important;
}

.glow-animation{
  animation: glow 1s 6 alternate;
}


@keyframes glow {
  from {
    box-shadow: 0 0 10px -5px inset #aef4af ;
  }
  to {
    box-shadow: 0 0 10px 5px inset #aef4af;
  }
}

.menu-elem-content{
  max-height: unset;
}

#container-logo div, #container-logo a {
 
  padding: 6px;
  padding-right: 10px;
  /* background-color: rgba(128,128,128,0.25);
  background-image: linear-gradient( rgba(0,0,0,0.25),rgba(0,0,0,0.75) 35%, rgba(0,0,0,0.25)); */
}

div.call-elem,a.call-elem {

  display: grid;
  grid-template-columns: 1fr 16px;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background-color: rgba(128,128,128,0.25);
  background-image: linear-gradient( rgba(0,0,0,0.25),rgba(0,0,0,0.75) 35%, rgba(0,0,0,0.25));

}


.contact-inquiry {display: none;}
@media only screen and (max-width: 600px) {
  div#container-logo {
    grid-template-columns: 1fr 1fr;
    padding:0;
  }
  div#container-logo{
    padding:0;
    width:100%;
  }
  a.metas {
    display: grid;
    align-items: center;
}
#container-logo div, #container-logo a {
  padding: 4px;
  padding-right: 10px;
}
}
[class*="add"]:hover,[id*="add"]:hover,[id*="send"]:hover, [class*="erase"]:hover{
  cursor:pointer;
  text-decoration:underline;
}
.game-controller:hover{
  text-decoration: none;
}

.num-selector--left, .num-selector--right ,  .num-selector--up,  .num-selector--down {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
}

@media only screen and (max-width: 344px) {
  div#container-logo {
    grid-template-columns: 4fr 6fr;
    padding:0;
  }
    div#container-logo img {
      width:100%;
  }
}