/* ------------------------- SMOOTH SCROLLING ------------------------- */
html:focus-within{
	scroll-behavior: smooth;
}

/* Ribbon */
#forkongithub a{
  background:#000;
  color:#fff;
  text-decoration:none;
  font-family:arial,sans-serif;
  text-align:center;
  font-weight:bold;
  padding:5px 40px;
  font-size:1rem;
  line-height:2rem;
  position:relative;
  transition:0.5s;
}

#forkongithub a:hover{
  background:#c11;
  color:#fff;
}

#forkongithub a::before,#forkongithub a::after{
  content:"";
  width:100%;
  display:block;
  position:absolute;
  top:1px;
  left:0;
  height:1px;
  background:#fff;
}

#forkongithub a::after{
  bottom:1px;
  top:auto;
}

body{
    background-color: #959484fc;
    overflow: hidden;
}

.logo{
    display: block;
    margin: auto;
    margin-bottom: 20px;
    width: 250px;
    height: 100px;
}

.entry{
    text-align: center;
    margin: 0 auto;
    height: 300px;
    width: 350px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.entry input{
    text-align: center;
}

.entry button{
    margin-top: 20px;
    margin-bottom: -30px;
}

.pokemon{
    width: 150px;
    height: 150px;
    margin: 40px auto;
    display: inline-block;
}

p{
    margin-top: -60px;
}

img{
    color: #f2f2f2;
}

img::before{
    content: '';
    color: aliceblue;
}

img::after{
    content: ' Sorry broken image';
    color: aliceblue;
}

.bg-dex{
    background-color: #c11;
    color:#fff;
}

/* Media queries */
@media (min-width:280px) and (max-width:799px){
    #forkongithub{
      display: none;
    }
  }
  
  @media screen and (min-width:800px){
    #forkongithub{
        position:fixed;
        display:block;
        top:0;
        right:0;
        width:200px;
        overflow:hidden;
        height:200px;
        z-index:9999;
    }
    
    #forkongithub a{
        width:200px;
        position:absolute;
        top:9px;
        right:-54px;
        transform:rotate(45deg);
        -webkit-transform:rotate(45deg);
        -ms-transform:rotate(45deg);
        -moz-transform:rotate(45deg);
        -o-transform:rotate(45deg);
        box-shadow:4px 4px 10px rgba(0,0,0,0.8);
    }
  }