@charset "UTF-8";

/*CORPO*/
*{
    margin: 0;
    padding: 0;
    border: 0;
}

:root{
    --color-text: black;
    --background: #fff;
    --color-text-cont:rgb(255, 255, 255);
    --containers: rgb(255, 231, 15);
    --menu: rgb(241, 241, 241);
    --color-sobre:rgb(92, 92, 92);
}

body{
    font-size:62.5%;
    transition: 0.2s;
    background:var(--background);
    overflow-y:hidden;
}

main{
    width: 100%;
    height: 100%;
    position: absolute;
    background:var(--background);
    color:var(--color-text);
    transition: 0.2s ease-in-out background, .3s ease-in-out color;
}

h2{
    font-family: 'Poppins', sans-serif;
    font-size: 6vh;
    font-weight: 700;
    display: flex;
    margin-top: 2rem;
    margin-bottom: .5rem;
    margin-left: 1rem;
    background: linear-gradient(330deg, #e05252 0%, #99e052 25%, #52e0e0 50%, #9952e0 75%, #e05252 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.container h4{
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    margin-left: 1rem;
    margin-top: 1rem;
    color: var(--color-text-cont);
    margin-bottom: 0.5rem;
    text-transform: capitalize;

    display:inline-block;
}

.container p.pp{
    font-family: 'Rubik', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    margin-left: 1rem;
    color: var(--color-text-cont);
    background-color: rgba(105, 105, 105, 0.2);
    text-align: center;
    position: relative;
    bottom: 1rem;
    height: 16px;
    width: 70px;
    border-radius: 1rem;

    text-transform: capitalize;
}

.container p.number{
    font-family: 'Rubik', sans-serif;
    font-size: 1.3rem;
    font-weight: 500;
    
    margin-left: 1rem;
    color: var(--color-text-cont);
    background-color: rgba(105, 105, 105, 0.2);
    align-items: center;
    position:relative;
    left: 13.3rem;
    
    height: 22px;
    width: 58px;
    border-radius: 1rem;

    text-transform: capitalize;
}

.containers{
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content:center;
    background:var(--background);
    transition: 0.2s ease-in-out background, 0.2s ease-in-out color;

}

.container{
    width: 19rem;
    height: 6.5rem;
    background-color: var(--containers);
    margin: 1rem;
    border-radius: 0.5rem;
}

.container img{
    height: 6rem;
    width: 6rem;
    position: relative;
    left: 7rem;
    bottom: 6.3rem;
    z-index:1;
    transition: 0.5s;
}

/*LOADE*/

#div-load{
    background:#fff;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1000;
    transition:0.2s;
}

#img-load{
    position:absolute;
    width: 12rem;
    height: 12rem;
    border-top-color: #FFF;
    z-index:2;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%)
}


/*Menu*/

.menu{
    position:fixed;
    top:93.92%;
    height: 6vh;
    width: 100vw;
    background-color: var(--menu);
    border-top: solid 1px;
    border-color: rgba(95, 95, 95, 0.884);
    text-align: center;
    place-items: center;

    display: flex;
    list-style: none;
    justify-content: space-around;
    align-items: center;

    z-index:999;
}

.darkmodeLabel{
    cursor: pointer;
}

#darkmodeToggle:checked + main{
    --color-text: rgb(216, 216, 216);
    --background: rgb(36, 36, 36);
    --color-text-cont:rgb(236, 236, 236);
    --containers: rgba(255, 230, 0, 0.699);
    --menu:rgb(56, 56, 56);
    --color-sobre:rgb(212, 212, 212);

    background: var(--background);
    color:var(--color-text);

    transition: 0.2s ease-in-out background, 0.2s ease-in-out color;
}

#darkmodeToggle{
    display: none;
    
}
.menu img:active{
    text-decoration: none;
    border-radius: .5rem;
    background-color: rgba(0, 0, 0, 0.329);
}

.menu img{
    height: 3.5vh;
    cursor:pointer;
}

/*DIV INFO*/

footer .info{
    position:fixed;
    top:100%;
    left:0px;
    width:100%;
    height:100%;
    transition:0.5s;
    background:var(--background);
    z-index:2;  
    padding-top:20px;
    box-sizing: border-box;
}

.info h3{
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
    font-weight: 700; 
    color:var(--color-text);
}

.info p{
    position: relative;
    color:var(--color-text);
    font-family: 'Poppins', Helvetica, sans-serif, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    margin-left: 8vw;
    margin-right: 8vw;
}

.info a{
    height: 6vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.info img{
    border-radius: 1rem;
}

.info h1{
    text-align: center;
    font-family:'Poppins', sans-serif;
    font-size: 1rem;
    color:var(--color-text);
}

/*POKEINFO*/

footer .pokeinfo{
    position:fixed;
    top:100%;
    left:0rem;
    width:100%;
    height:100%;
    background-color: brown;
    transition:0.2s;
    z-index:3;
}

footer .pokeinfo .principal{
    position:absolute;
    top:0rem;
    left:0rem;
    width:100vw;
    height:100vh;
}

footer .pokeinfo .secundaria{
    position:absolute;
    top:55vh;
    left:0rem;
    width:100%;
    height:40vh;
    background: var(--background);
    border-top-right-radius: 2rem;
    border-top-left-radius: 2rem;
}

footer .pokeinfo .principal h4{
    font-family: 'Poppins', sans-serif;
    font-size: 5vh;
    font-weight: 700;
    margin-left: 5vw;
    margin-top: 3vh;
    color: var(--color-text-cont);
    margin-bottom: 0.5rem;
    text-transform: capitalize;

    display:inline-block;
}

footer .pokeinfo .principal img{
    position: absolute;
    height: 15vh;
    left:77%;
    bottom: 87vh;
}

footer .pokeinfo .principal span.pp{
    font-family: 'Rubik', sans-serif;
    font-size: 3vh;
    font-weight: 500;
    color: var(--color-text-cont);
    background-color: rgba(105, 105, 105, 0.2);
    border-radius: 2rem;
    position: relative;
    left:4vw;
    margin-left: 1vw;
    text-transform: capitalize;
}

footer .pokeinfo .principal span.number{
    font-family: 'Rubik', sans-serif;
    font-size:3vh;
    font-weight: 500;
    position: absolute;
    left: 84%;
    
    color: var(--color-text-cont);
    background-color: rgba(105, 105, 105, 0.2);
    border-radius: 2rem;

    text-transform: capitalize;
}

footer .pokeinfo .nav-list{

    text-decoration: none;
    list-style: none;
    display: flex;
    justify-content:space-around;
}

footer .pokeinfo .nav-list a{
    color:#3FD07C;
    text-decoration: none;
    margin-top: 0.5rem;
    font-family: 'Poppins', sans-serif;
    font-size: 4vh;
    font-weight: 700;
}

footer .pokeinfo .secundaria .tg:not(:target){
    display: none;
}


footer .pokeinfo .secundaria div.line{
    width: 100vw;
    height: 0.1rem;
    background-color: rgb(214, 214, 214);
}

footer .pokeinfo .secundaria div#sobre.tg{
    font-family: 'Rubik', sans-serif;
    font-size: 3vh;
    font-weight: 500;
    color: var(--color-sobre);
    text-transform: capitalize;
    position: relative;
    top:1vh;
    left:5vw;
    width: 28vw;
    height: 18vh;
}

footer .pokeinfo .secundaria span#descricao{
    white-space:normal;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left:0vw;
    margin-left:-13px ;
    font-size: 10px;
}

footer .pokeinfo .secundaria span{
    font-family: 'Rubik', sans-serif;
    font-size: 2vh;
    font-weight: 500;
    color: var(--color-sobre);
    text-transform: capitalize;
    position:absolute;
    left:35vw;
    margin-top:.3rem;
    white-space: nowrap;
}

footer .pokeinfo .secundaria p{
    width: 91vw;
    text-align: center;
    left:0;
}

footer .pokeinfo .secundaria div#status.tg{
    font-family: 'Rubik', sans-serif;
    font-size: 3vh;
    font-weight: 500;
    color: var(--color-sobre);
    text-transform: capitalize;
    position: relative;
    top:1vh;
    left:5vw;
    width: 28vw;
}

footer .pokeinfo .secundaria div.line2{
    width: 15.5vw;
    position:absolute;
    left:37.7vw;
    height: 0.1rem;
    background-color: rgba(231, 231, 231, 0.527);
}


 /*CANVAS*/

  footer .pokeinfo .containers .principal .canvas{
      position:absolute;
      top:0px;
      left:0px;
      width:100%;
      height:100%;
  }

/*Barra de progresso*/
  
  .progress-bar1{
    --Hp: 80/1.5;
    border-radius: 5rem;
    width: 55vw;
    height: 2vh;
    background-color: rgba(160, 159, 159, 0.301);
    display: flex;
    top:0.4vh;

  }
  
  .progress-bar1::before{
    content: "";
    width: calc(var(--Hp) * 1%);
    background-color: hsl( calc(var(--Hp) * 1.2) , 80%, 50%);
    transition: all 0.2s ease;
    
  }

  .progress-bar2{
    --Atk: 90/1.5;
    border-radius: 5rem;
    width: 55vw;
    height: 2vh;
    background-color: rgba(160, 159, 159, 0.301);
    display: flex;
    top:3.9vh;

  }
  
  .progress-bar2::before{
    content: "";
    width: calc(var(--Atk) * 1%);
    background-color: hsl( calc(var(--Atk) * 1.2) , 80%, 50%);
    transition: all 0.2s ease;
  }

  .progress-bar3{
    --OverAtk: 10/1.5;
    border-radius: 5rem;
    width: 55vw;
    height: 2vh;
    background-color: rgba(160, 159, 159, 0.301);
    display: flex;
    top:7.5vh;

  }
  
  .progress-bar3::before{
    content: "";
    width: calc(var(--OverAtk) * 1%);
    background-color: hsl( calc(var(--OverAtk) * 1.2) , 80%, 50%);
    transition: all 0.2s ease;
    
  }

  .progress-bar4{
    --Def: 40/1.5;
    border-radius: 5rem;
    width: 55vw;
    height: 2vh;
    background-color: rgba(160, 159, 159, 0.301);
    display: flex;
    top:11vh;

  }
  
  .progress-bar4::before{
    content: "";
    width: calc(var(--Def) * 1%);
    background-color: hsl( calc(var(--Def) * 1.2) , 80%, 50%);
    transition: all 0.2s ease;
    
  }

  .progress-bar5{
    --Overdef: 60/1.5;
    border-radius: 5rem;
    width: 55vw;
    height: 2vh;
    background-color: rgba(160, 159, 159, 0.301);
    display: flex;
    top:14.5vh;

  }
  
  .progress-bar5::before{
    content: "";
    width: calc(var(--Overdef) * 1%);
    background-color: hsl( calc(var(--Overdef) * 1.2) , 80%, 50%);
    transition: all 0.2s ease;
    
  }

  .progress-bar6{
    --Speed: 77/1.5;
    border-radius: 5rem;
    width: 55vw;
    height: 2vh;
    background-color: rgba(160, 159, 159, 0.301);
    display: flex;
    top:18vh;

  }
  
  .progress-bar6::before{
    content: "";
    width: calc(var(--Speed) * 1%);
    background-color: hsl( calc(var(--Speed) * 1.2) , 80%, 50%);
    transition: all 0.2s ease;
  }