@font-face {
    font-family: OpenSans;
    src: url('./font/OpenSans-Regular.ttf');
    font-family: OpenSansBold;
    src: url('./font/OpenSans-Bold.ttf');
}


/* ===== Scrollbar CSS ===== */


/* Firefox */

* {
    scrollbar-width: thin;
    scrollbar-color: #404040 rgba(255, 255, 255, 0.2);
}


/* Chrome, Edge, and Safari */

*::-webkit-scrollbar {
    width: 10px;
}

*::-webkit-scrollbar-track {
    background: #000000;
}

*::-webkit-scrollbar-thumb {
    background-color: #404040;
    border-radius: 20px;
    border: 0px none #ffffff;
}

:root {
    --first-textcolor: #ffffff;
    --second-textcolor: #323232;
    --shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.2);
    --background-dark: #000000;
    --first-media: 1220px;
    --second-media: 810px;
    --third-media: 400px;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'OpenSans', sans-serif;
}

.hide {
    display: none !important;
}

.stopScroll {
    overflow: hidden !important;
}

.shiny {
    background-color: rgba(255, 255, 255, 0.5) !important;
}

.dOn {
    display: flex !important;
}

.hidePokedex {
    display: flex;
}

@media(max-width:810px) {
    .hidePokedex {
        display: none !important;
    }
}


/* Nav */

nav {
    height: 60px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background-color: var(--background-dark);
    display: flex;
    justify-content: space-around;
}

nav div {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#navTeam {
    position: relative;
}

#navTeam img {
    border-radius: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.teamAmount {
    display: none;
    position: absolute;
    width: 20px;
    height: 20px;
    color: var(--first-textcolor);
    top: 5px;
    right: -5px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 20px;
}

nav img {
    height: 50px;
}

input {
    height: 30px;
    background-color: var(--background-dark);
    color: var(--first-textcolor);
    border-radius: 20px;
    outline: none;
    padding: 0px 10px;
}

@media(max-width:810px) {
    nav div {
        width: unset;
    }
    .teamAmount {
        display: flex;
    }
}

@media(max-width:400px) {
    input {
        display: none;
    }
}


/* Button */

.btn {
    background-color: unset;
    color: var(--first-textcolor);
    border: none;
}

.btn:hover {
    cursor: pointer;
    color: rgba(255, 255, 255, 0.5);
}


/* Start Screen */

.bg {
    height: calc(100vh - 140px);
    background-image: url('./img/pokeball.jpg');
    background-size: cover;
    background-position: center;
    padding: 70px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.startScreen {
    height: 100%;
    color: var(--first-textcolor);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.startTeam {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5vw;
}

.startScreen img {
    max-width: 300px;
    border-radius: 100%;
    box-shadow: var(--shadow);
    cursor: pointer;
}

.startScreen h2 {
    font-size: 3em;
    margin-block-start: 0;
    margin-block-end: 0;
    text-align: center;
}

.startScreen img:hover {
    filter: saturate(1.5);
}

@media(max-width:1220px) {
    .startScreen img {
        width: 29%;
    }
}

@media(max-width:810px) {
    .startScreen h2 {
        font-size: 2.5em;
    }
}

@media(max-width:400px) {
    .startScreen h2 {
        font-size: 2em;
    }
    .startTeam {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}


/* Content */

.pokedex {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}

.content {
    width: 60%;
    height: calc(100vh - 160px);
    padding: 25px 5px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    overflow-y: scroll;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.content::-webkit-scrollbar {
    display: none;
    /* Chrome */
}

.sideContent {
    position: relative;
    width: 15%;
    height: calc(100vh - 120px);
    padding: 5px 5px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--first-textcolor);
    overflow-y: scroll;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.sideContent::-webkit-scrollbar {
    display: none;
    /* Chrome */
}

.sideContent h4 {
    width: 90%;
    text-align: left;
}

.sideContent p {
    text-align: center;
}

@media(max-width:1220px) {
    .content {
        max-width: 360px;
        width: unset;
    }
    .sideContent {
        width: 190px;
    }
}

@media(max-width:810px) {
    .sideContent {
        display: none;
        position: absolute;
        top: 70px;
        width: 95%;
        z-index: 2;
    }
    .content {
        width: 95%;
        max-width: unset;
        z-index: 1;
    }
}

.pokeCard {
    height: 120px;
    width: 300px;
    min-width: 200px;
    border-radius: 20px;
    padding: 10px 20px;
    margin: 25px 10px;
    background-image: url('./img/pokeball-icon.jpg');
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
    position: relative;
    transition: all ease-in-out 125ms;
}

.pokeCard span {
    font-family: OpenSansBold, sans-serif;
    color: var(--second-textcolor);
}

.pokeCard h3 {
    font-family: OpenSansBold, sans-serif;
    font-size: 2em;
    color: var(--first-textcolor);
    margin-block-start: 0;
    margin-block-end: 0;
}

.pokeCard div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.typeIcons {
    display: flex;
    flex-direction: row !important;
    gap: 5px;
}

.typeIcon {
    height: 30px;
    width: 30px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.typeIcon img {
    height: 15px;
}

.pokeImg {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 170px;
    transition: all ease-in-out 125ms;
}

.pokeImg img {
    height: 100%;
}

.pokeCard:hover {
    transform: scale(1.05);
    transition: all ease-in-out 125ms;
    cursor: pointer;
}

.pokeCard:hover .pokeImg {
    transform: scale(1.15);
    transition: all ease-in-out 125ms;
}

@media(max-width:400px) {
    .pokeCard span {
        order: 2;
    }
    .pokeCard h3 {
        order: 1;
    }
    .typeIcons {
        order: 3;
    }
    .pokeImg {
        width: 50%;
        height: unset;
    }
}


/* Detail Card */

.closeIcon {
    display: none;
    position: fixed;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.closeIcon img {
    height: 30px;
    opacity: 0.3;
}

.detailImg {
    width: 90%;
    display: flex;
    justify-content: center;
}

.detailImg img {
    width: 110%;
}

.detailHead {
    width: 90%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.detailType {
    width: 90%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}

.detailIcon {
    height: 30px;
    width: 100px;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    color: var(--first-textcolor);
}

.detailIcon img {
    height: 15px;
}

.detailActions {
    width: 90%;
    padding: 10px 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
}

.detailAct {
    height: 30px;
    padding: 0px 10px;
    border-radius: 30px;
    background-color: rgba(255, 255, 255, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    color: var(--first-textcolor);
    cursor: url('./img/pokeballcursor.png') 30 30, pointer;
}

.detailAct:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.detailAbout {
    width: 90%;
    padding: 10px 0px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.detailStats {
    width: 90%;
    padding: 10px 0px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.stats {
    display: flex;
}

.stats span {
    width: 40%;
}

.stats span::first-letter {
    text-transform: uppercase;
}

.statsProgressBar {
    width: 60%;
    display: flex;
    align-items: center;
}

.progressBar {
    border-radius: 30px;
    padding-left: 5px;
}

.stats:nth-child(1) .progressBar {
    background-color: #0000ff;
}

.stats:nth-child(2) .progressBar {
    background-color: #ff0000;
}

.stats:nth-child(3) .progressBar {
    background-color: #2f774c;
}

.stats:nth-child(4) .progressBar {
    background-color: #A02C89;
}

.stats:nth-child(5) .progressBar {
    background-color: #3a1f0c;
}

.stats:nth-child(6) .progressBar {
    background-color: #d4d4d4;
}

.detailMoves {
    width: 90%;
    padding: 10px 0px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    text-align: left;
}

.detailMoves span::first-letter {
    text-transform: uppercase;
}

@media(max-width:810px) {
    .closeIcon {
        display: block;
    }
}


/* PokeTeam */

.subHead h2 {
    margin-block-start: 0.83em;
    margin-block-end: 0;
}

.teamImg {
    height: 15%;
    position: relative;
    cursor: pointer;
}

.teamImg img {
    height: 100%;
}

.teamId-1 {
    filter: invert(11%) sepia(80%) saturate(4535%) hue-rotate(234deg) brightness(126%) contrast(134%);
}

.teamId-2 {
    filter: invert(26%) sepia(99%) saturate(5813%) hue-rotate(356deg) brightness(119%) contrast(140%);
}

.teamId-3 {
    filter: invert(87%) sepia(92%) saturate(4867%) hue-rotate(6deg) brightness(105%) contrast(109%);
}

.teamRemove {
    display: none;
    position: absolute;
    top: 0;
    right: -10px;
    background-color: rgba(255, 255, 255, 0.3);
    height: 20px;
    width: 20px;
    border-radius: 30px;
    cursor: pointer;
}

.teamRemove:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

@media(max-width:810px) {
    .teamImg {
        height: 30%;
    }
}


/* Types */

.grass {
    background-color: #56C182;
}

.grassIcon {
    background-color: #2f774c;
}

.poison {
    background-color: #A561A5;
}

.poisonIcon {
    background-color: #763d76;
}

.fire {
    background-color: #FB6C6C;
}

.fireIcon {
    background-color: #ff0000;
}

.flying {
    background-color: #9CADF7;
}

.flyingIcon {
    background-color: #899cf0;
}

.bug {
    background-color: #ABC837;
}

.bugIcon {
    background-color: #76B573;
}

.dark {
    background-color: #333333;
}

.darkIcon {
    background-color: #252525;
}

.dragon {
    background-color: #9393AC;
}

.dragonIcon {
    background-color: #6F6F91;
}

.electric {
    background-color: #FFE680;
}

.electricIcon {
    background-color: #FFDD55;
}

.fairy {
    background-color: #FFD5F6;
}

.fairyIcon {
    background-color: #FFAAEE;
}

.fighting {
    background-color: #FF9955;
}

.fightingIcon {
    background-color: #cd7b44;
}

.ghost {
    background-color: #3E3748;
}

.ghostIcon {
    background-color: #342f3a;
}

.ground {
    background-color: #DEAA87;
}

.groundIcon {
    background-color: #bb815a;
}

.ice {
    background-color: #AFE9DD;
}

.iceIcon {
    background-color: #87DECD;
}

.normal {
    background-color: #e1e1e1;
}

.normalIcon {
    background-color: #d4d4d4;
}

.psychic {
    background-color: #C837AB;
}

.psychicIcon {
    background-color: #A02C89;
}

.rock {
    background-color: #764d31;
}

.rockIcon {
    background-color: #3a1f0c;
}

.steel {
    background-color: #999999;
}

.steelIcon {
    background-color: #808080;
}

.water {
    background-color: #2A7FFF;
}

.waterIcon {
    background-color: #0000ff;
}


/* Loader */

.loader {
    width: 95%;
    height: calc(100vh - 110px);
    position: absolute;
    top: 70px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--first-textcolor);
    font-size: 2em;
    text-align: center;
    gap: 60px;
    text-shadow: 2px 2px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

@media(max-width:400px) {
    .loader {
        font-size: 1.5em;
    }
}

.container {
    width: 200px;
    height: 150px;
    margin: 0 auto;
}

.ball {
    width: 20px;
    height: 20px;
    margin: 20px auto;
    border-radius: 50px;
}

.ball:nth-child(1) {
    background: #ffffff;
    animation: right2 1s infinite ease-in-out;
}

.ball:nth-child(2) {
    background: #ffffff;
    animation: left2 1.1s infinite ease-in-out;
}

.ball:nth-child(3) {
    background: #ffffff;
    animation: right2 1.05s infinite ease-in-out;
}

.ball:nth-child(4) {
    background: #ffffff;
    animation: left2 1.15s infinite ease-in-out;
}

.ball:nth-child(5) {
    background: #ffffff;
    animation: right2 1.1s infinite ease-in-out;
}

.ball:nth-child(6) {
    background: #ffffff;
    animation: left2 1.05s infinite ease-in-out;
}

.ball:nth-child(7) {
    background: #ffffff;
    animation: right2 1s infinite ease-in-out;
}

@keyframes right2 {
    0% {
        transform: translate(-30px);
    }
    50% {
        transform: translate(30px);
    }
    100% {
        transform: translate(-30px);
    }
}

@keyframes left2 {
    0% {
        transform: translate(30px);
    }
    50% {
        transform: translate(-30px);
    }
    100% {
        transform: translate(30px);
    }
}

footer {
    color: rgba(255, 255, 255, 0.2);
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0px 10px;
    z-index: 0;
}

footer a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.2);
}

@media(max-width:810px) {
    footer {
        font-size: 0.8em;
    }
}

.bgImpressum {
    background-image: url('./img/pokeball.jpg');
    background-size: cover;
    background-position: center;
    padding: 70px 10px;
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    overflow: scroll;
}

.impressum {
    padding: 0px 100px;
    color: white;
    height: 100vh;
}

.impressum a {
    color: white;
    text-decoration: none;
}

@media(max-width:810px) {
    .impressum {
        padding: unset;
    }
}