@font-face {
    font-family: VT323;
    src: url("/inc/style/fonts/VT323-Regular.ttf");
}
.enrtya{
    color:white;
    position: relative;
    left:auto;
    top:20vh;
    padding:20px;
    text-align:center
}
.enrtya span{
    font-family: 'VT323', monospace;
    font-size: 15px;
}

html{
    background-color:rgb(34, 34, 34);
    min-width: 100vw;
    min-height: 100vh;
    display:flex;
    justify-content: center;
    align-content: center;
}

.menu{
 
    position: relative;
    top:0;
    left:0;
}

a{
    color:black;
    text-decoration: none;
}


.menu ul{
    position:relative;
    top: 0;
    right: 0;
    width: 282px;
}
p{
    margin:0px;
    font-family: 'VT323', monospace;
    font-size: 25px;
    font-weight: 500;
}

ul{
    margin-block-start: 0;
    margin-block-end: 0;
    padding: 0;
}

li{
    list-style: none;
}


body{
    max-width: 400px;
    min-width: 400px;
    background-color: rgb(255, 0, 0);
   
    box-shadow: 5px 5px 5px #000;
}

.hidden{
    display: none;
}

.bg-col{
    background-color:rgb(34, 34, 34)!important;
   
}

.display{
    display: flex;
    justify-content: center;
    height: 300px;
    padding: 5.4%;
    padding-top: 6.8%;
    padding-left: 7%;
    background-image: url("/assets/ui/pokedex-screen.png");
    background-size:contain;
    background-repeat: no-repeat;
}

.display-inner{
    width:350px;
    height:228px;
    overflow: hidden;
    background-size:cover;
    background-repeat: no-repeat;
    border: 5px solid black;
    border-radius: 20px;
  
}

.selected{

    background-color: rgba(255, 166, 0, 0.568);
 
list-style:outside;
    list-style-image: url("/assets/ui/select.png");
    animation: blinker 1s linear infinite;
}



.input ul {
    position: absolute;
   padding:10px;
    top: 19%;
    right: 13%;
    width: 50px;
    background-color: white;
    border: solid 5px orange;
}


.chat{
    margin:5px;
    padding-top:35px;
    position: relative;
    top:-110px;
    background-image: url("/assets/ui/chat.png");
    background-size: contain;
    background-repeat: no-repeat;
    padding:15px;
    width:315px;
    height:100px;
    overflow: hidden;
}

#downwards{
    position: relative;
    top: -168px;
    right: 0;
    width: 20px;
    left: 295px;
    background-color: white;
}

#downwards img{
animation: blinker 0.75s linear infinite;
}

/* buttons */
.buttons{
    padding:2px;
    display: flex;
    justify-content: space-around;
    width: 100%;
   height: 205px;
}

.enter{
    padding:2%;
    width:80px;
    height:80px;
    background-image: url("/assets/ui/pokedex-blue-button.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.enter:active{
    background-image: url("/assets/ui/pokedex-blue-button-pressed.png");
}

.gb, .ob{
    padding:2%;
    margin-top:4vh;
    width:40px;
    height:10px;
    background-size: contain;
    background-repeat: no-repeat;
}
.gb{
    background-image: url("/assets/ui/pokedex-green-button.png");
}
.gb:active{
    background-image: url("/assets/ui/pokedex-green-button-pressed.png");
}

.ob{
    background-image: url("/assets/ui/pokedex-orange-button.png");
}
.ob:active{
    background-image: url("/assets/ui/pokedex-orange-button-pressed.png");
}

.arrows{
    width:150px;
    height: 150px;
}

.up{
    position: relative;
    left:35px;
    width:50px;
    height:65px;
    background-image: url("/assets/ui/pokedex-upbutton.png");
    background-size: contain;
  background-repeat: no-repeat;
  z-index: 999;
}
.left{
    position: relative;
    top:5px;
    left: -25px;
    width:65px;
    height:50px;
    background-image: url("/assets/ui/pokedex-left-button.png");
    background-size: contain;
  background-repeat: no-repeat;
  z-index: 999;
}
.down{
    position: relative;
    top:0px;
    left:35px;
    width:50px;
    height:65px;
    background-image: url("/assets/ui/pokedex-down-button.png");
    background-size: contain;
  background-repeat: no-repeat;
  z-index: 999;
}

.right{
    position: relative;
    top: -109px;
    left: 80px;
    right: -25px;
    width: 65px;
    height: 50px;
    background-image: url("/assets/ui/pokedex-right-button.png");
    background-size: contain;
  background-repeat: no-repeat;
  z-index: 800;
}
.center{
    position: relative;
    top: -165px;
    left: 35px;
    z-index: 801;
    right: -25px;
    width: 65px;
    height: 50px;
    background-image: url("/assets/ui/pokedex-circ-button.png");
    background-size: contain;
  background-repeat: no-repeat;
}
.up:active{
    background-image: url("/assets/ui/pokedex-upbutton-pressed.png");
}

.left:active{
    background-image: url("/assets/ui/pokedex-left-button-pressed.png");
}
.down:active{
    background-image: url("/assets/ui/pokedex-down-button-pressed.png");
}
.right:active{
    background-image: url("/assets/ui/pokedex-right-button-pressed.png");
}

@media only screen and (min-width: 900px) {
    .input ul {
        top: 20%;
        right: 39%;
    }

    .chat{
        top: 36%;
    }
  }




@keyframes blinker {
    50% {
      opacity: 0;
    }
  }