:root {
    --bg-color: lightblue;
    --card-bg-color: #d7e3e9d0;
    --btn-bg-color: rgb(20, 144, 185);
    --btn-active-bg-color: rgb(85, 196, 233);
    --btn-not-active-bg-color:rgb(112, 148, 161);
    --btn-hover-bg-color: rgb(85, 196, 233);
    --text-color: #fff;
    --type-bug: linear-gradient(to top, #92c92b, transparent);
    --type-dark: linear-gradient(to top, #575467, transparent);
    --type-dragon: linear-gradient(to top, #0566bc, transparent);
    --type-electric: linear-gradient(to top, #ffce3e, transparent);
    --type-fairy: linear-gradient(to top, #eb8ee2, transparent);
    --type-fighting: linear-gradient(to top, #d23c50, transparent);
    --type-fire: linear-gradient(to top, #f09516, transparent);
    --type-flying: linear-gradient(to top, #90aadc, transparent);
    --type-ghost: linear-gradient(to top, #776bb6, transparent);
    --type-grass: linear-gradient(to top, #35ab5d, transparent);
    --type-ground: linear-gradient(to top, #d97845, transparent);
    --type-ice: linear-gradient(to top, #96d9d6, transparent);
    --type-normal: linear-gradient(to top, #9d9fa0, transparent);
    --type-poison: linear-gradient(to top, #d24fbb, transparent);
    --type-psychic: linear-gradient(to top, #f76e73, transparent);
    --type-rock: linear-gradient(to top, #cdba6c, transparent);
    --type-steel: linear-gradient(to top, #538b9f, transparent);
    --type-water: linear-gradient(to top, #5092d5, transparent);
    --card-border:#9d9fa0;
    --img-border:#9d9fa0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--bg-color);
    background-image: url("../src/container_bg.png");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--text-color);
}

.container {
    display: flex;
    flex-direction: row;
    padding: 0 20px 0 20px;
    text-transform: uppercase;
}

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
}

.login-container {
    background: white;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    width: 400px;
}

nav {
    display: flex;
    flex-direction: column;
    width: 200px;
    top: 0;
    align-self: flex-start;
    margin-bottom: 0;
    text-transform: uppercase;
}

nav ul {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    margin: 20px 0 0px 0;
    width: 100%;
    border: 2px solid #fff;
    border-radius: 20px;
    padding: 20px;
    background-color: var(--card-bg-color);
}

nav ul h2 {
    margin-bottom: 10px;
    color: var(--btn-bg-color);
}

nav ul li {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    text-align: center;
}

nav ul li:last-child {
    margin-bottom: 0;
}

nav ul li a,
.user-info a {
    text-decoration: none;
}

.nav-count{
    background:var(--btn-active-bg-color);
    border-radius: 0 0 20px 20px;
    border:2px solid #fff;
    border-top:none;
    width:66%;
    padding:4px;
    margin:auto;
}

.statistics-container{
    display:flex;
    flex-direction:row;
    vertical-align:middle;
    justify-content: center;
    background:var(--btn-active-bg-color);
    padding:10px;
    margin:auto;
    border-radius:20px;
    border:none;
    text-transform: uppercase;
}

.statistics-container ul{
    display:flex;
    justify-content: center;
    width:100%;
    overflow: hidden;
    list-style-type:none;
}

.statistics-container ul li{
    float:left;
    text-align:center;
}

.statistics li{
    padding:10px;
}

.statistics li:not(:last-of-type){
    border-right: 2px solid #fff;
}

.count-number{
    padding: 2px 10px;
    background-color:var(--text-color);
    color:var(--btn-not-active-bg-color);
    border-radius:20px;
}

.search-container{
    display:flex;
    flex-direction:row;
    justify-content: center;
    gap:0px;
}

.search-container .nav-btn{
    border-radius:0px 20px 20px 0px!important;
}

#search-pokemon{
    padding:10px;
    border-radius:20px 0px 0px 20px;
    border:2px solid var(--text-color);
    height:40px;
    width:100%;
    background-color:var(--btn-active-bg-color);
    color:var(--text-color);
    font-weight:bold;
}

#search-pokemon::placeholder{
    color:var(--text-color);
}

#search-pokemon:focus-visible, #search-pokemon:focus, #search-pokemon:active{
    border:2px solid var(--text-color);
    outline:none;
    padding:10px;
    width:100%;
}

.user-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--card-bg-color);
    color: var(--btn-bg-color);
    padding: 10px 20px;
    border-bottom: 4px solid var(--btn-hover-bg-color);
    width:75%;
    margin:auto;
    border-radius:0 0 20px 20px;
}

.user-info .nav-btn {
    width: 150px;
    text-align: center;
}

.logout-btn {
    background: red;
    color: white;
    padding: 5px 10px;
    text-decoration: none;
    border-radius: 5px;
}

.logout-btn:hover {
    background: darkred;
}

.active .nav-btn {
    background-color: var(--btn-active-bg-color);
}

.nav-btn, #toggleAllButton {
    width: 100%;
    padding: 10px;
    background-color: var(--btn-bg-color);
    border: 2px solid #fff;
    color: #fff;
    min-height: 40px;
    border-radius: 20px;
    display: block;
    font-weight:bold;
    text-transform:uppercase;
}

.nav-btn:hover, #toggleAllButton:hover {
    cursor: pointer;
    background-color: var(--btn-hover-bg-color);
}

a .nav-btn {
    text-decoration: none;
}

.gender_row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 20px;
}

.gender_row .row-left{
    width:85px;
}

.gender_row .row-right{
    width:85px;
    margin-top:5px;
}

.split{
    border:1px solid #fff;
    height:46px;
}

.gender_row .row-left, .gender-row .row-right{
    display: flex;
    justify-content: center;
    align-items: center;
}

.gender_row button{
    width:40px;
    height:40px;
    border-radius:30px;
    font-size:18px!important;
    border:4px solid #fff;
}

.pokeball-icon{
    width:20px;
    height:20px;
    align-items:center;
    display:grid;
    margin-right:3px;
    padding-top:2px;
}

.status_field.gender_male.not-registered, .status_field.gender_female.not-registered, .status_field.noGender.not-registered, .pokemon_meta.not-registered{
    background:transparent;
}

.status_field.gender_male.registered{
    background:rgb(34, 113, 177);
    color:var(--text-color);
}

.status_field.gender_female.registered{
    background:rgb(175, 69, 69);
    color:var(--text-color);
}

.status_fields .not-registered img, .pokemon_meta  .not-registered, .status-icon .not-registered {
    filter: contrast(0%) brightness(50%);
    opacity: 0.5;
}

.teaser img,
.ender img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    border: 2px solid #fff;
}

.teaser {
    padding: 20px;
}

.ender {
    padding: 20px;
}

.ender img {
    rotate: deg(180);
}

article {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    flex: 1;
    padding-left: 20px;
    margin-top:20px;
}

.column {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    padding: 0;
    color: #fff;
    text-align: center;
    align-items: center;
}

.column .pokemon-img {
    width:100%;
    height:auto;
    padding: 20px;
}

.column .pokemon_card {
    background-color: lightgrey;
    color: #000;
    font-weight: bold;
    min-width: 270px;
    border: 6px solid var(--card-border);
    border-radius: 23px;
    margin: 10px auto; 
    width:90%;
}
.identifier {
    text-align: center;
}

.pokemon-img{
    background-color:rgba(104, 104, 104, 0.171);
}

.status_fields {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.status_field {
    width: calc(31%);
    text-align: center;
    font-size:12px!important;
    color: #222222;
    border-radius: 10px;
    margin: 2px;
    padding:2px 2px;
    border:none;
    flex-direction: row;
    justify-content:center;
    flex-wrap:wrap;
    background:rgba(219, 219, 219, 0.75);
    box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.212);
}

.status_field p{
    margin-bottom:4px;
}

.pokemon_meta{
    display:none;;
}

.pokemon_meta, .status_fields{
    min-height:460px;
    padding: 0;
}

.status_field:hover {
    cursor: pointer;
}

.pokemon_card .nav-btn{
    margin:auto;
    border-radius: 0 0 16px 16px;
    border:none;
}

.pokemon_card .pokemon_icon_big {
    width: 70%;
    height: auto;
    padding: 0;
}

.status-icon{
    width:100%;
    margin-bottom:-20px;
}

.pokemon_card .pokemon_icon_middle{
    width:194px;
    height:auto;
}

.pokemon_card .pokemon_icon_small {
    width: 28px;
    height: auto;
    padding: 0;
    border-radius:20px;
}

.pokemon-info{
    display:flex;
    flex-direction:row;
    justify-content: space-between;
    margin: 0px auto 0px auto;
    gap:6px;
    border-radius:16px 16px 0 0;
    padding: 0 20px;
    background: var(--btn-bg-color);
}

.type-icon{
    width:40px;
    height:40px;
    margin:0 auto 2px auto;
    border:4px solid #fff;
    border-radius:30px;
}

.no-typ{
    display:none;
}

.type-name{
    font-size:12px;
    font-weight:light;
    margin-left:6px;
}

.pokemon-name, .dex-number{
    padding: 8px 0px;
    font-size:20px;
    margin-bottom:-2px;
    color:var(--text-color);
    font-weight:lighter;
    display:flex;
    flex-direction:row;
    float:right;
}

.pokemon-name{
    text-align:left;
}

.dex-number{
    text-align:right;
}

.registered {
    transition: transform 4s;
    transform-style: preserve-3d;
}

@media(min-width:1280px) and (max-width:1559px){
    article{
        grid-template-columns:1fr 1fr 1fr;
    }

    .pokemon_meta, .status_fields{
        min-height: 460px;
    }
}

@media(min-width:769px) and (max-width:1279px){
    article{
        grid-template-columns: 1fr 1fr 1fr;
    }

    .pokemon_meta, .status_fields{
        min-height: 460px;
    }
}

@media (max-width: 768px) {
    article {
        grid-template-columns: 1fr 1fr;
    }
    .pokemon_meta, .status_fields{
        min-height: 460px;
    }
}

@media (max-width: 767px) {

    article {
        grid-template-columns: 1fr;
    }
    .pokemon_meta, .status_fields{
        min-height: 460px;
    }
}

.login-container {
    background: white;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    width: 400px;
    justify-content: center;
}

input[type="text"],
input[type="password"] {
    width: 96%;
    padding: 12px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    transition: 0.3s;
}

input[type="text"]:focus,
input[type="password"]:focus {
    border-color: #fff;
    outline: none;
}

.error-message {
    color: red;
    margin-top: 10px;
    font-size: 14px;
}