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

:root {
    --white-color: white;
    --dark-grey-color: #424242;
    --orange-color: #DA6220;
    --light-grey-color: #E0E2E1;
    --blue-color: #30A7D7;
    --light-green-color: #9BCC50;
}

h1 {
    font-size: clamp(2rem, 1.474rem + 2.807vw, 4rem);
}

h2 {
    font-size: clamp(1.3rem, 0.984rem + 1.684vw, 2.5rem);
}

h3 {
    font-size: clamp(1.2rem, 0.937rem + 1.404vw, 2.2rem);
}

p {
    font-size: clamp(1rem, 0.868rem + 0.702vw, 1.5rem);
    font-weight: 500;
}

body {
    font-family: 'Poppins', sans-serif;
    background-image: url("images/background-pattern.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.pokedex-section, .logo-holder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.logo-holder {
    background: var(--white-color);
    width: 100%;
}

.logo-holder img {
    width: 12rem;
}

li {
    list-style: none;
}

.container {
    width: 90vw;
}

.list-container {
    width: 100%;
}

.list-box {
    background: var(--dark-grey-color);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 1rem;
}

.list-box li {
    background: var(--orange-color);
    padding: 10px;
    width: 10rem;
    text-align: center;
    color: var(--white-color);
    font-size: 1rem;
    font-weight: 600;
}

.details-container {
    background: rgba(255,255,255, 0.5);
    width: 100%;
}


.details h1 {
    padding: 2rem;
}

.details h1, .image-container, .front-back-div, .default-image, .front-image, .back-image, .description-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.description-container {
    gap: 2rem;
}

.default-image, .front-image, .back-image{
    background: var(--light-grey-color);
    border-radius: 10px;
}

.default-image {
    width: 100%;
}

.default-image img {
    width: inherit;
}

.image-container, .front-back-div {
    gap: 1rem;
}

.image-container, .description-container {
    padding: 3rem;
}

.front-back-div {
    flex-direction: row;
    width: 100%;
}

.front-image, .back-image {
    width: 50%;
}

.description-box1 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 2rem;
    width: 100%;
    background: var(--blue-color);
    border-radius: 10px;
}



.weight h2, .base-exp h2 {
    color: var(--white-color);
    margin-bottom: 0.5rem;
}

.abilities {
    background: var(--light-green-color);
    border-radius: 10px;
    padding: 2rem;
    width: 100%;
}

.abilities h2 {
    color: var(--white-color);
    margin-bottom: 1rem;
}

.abilities ul li h3 {
    color: var(--dark-grey-color);
    margin-bottom: 1rem;
    margin-left: 1rem;
}

.abilities ul li p {
    color: var(--white-color);
    margin-left: 2rem;
    margin-bottom: 2rem;
}

@media (min-width: 1200px) {
    .container {
        width: 65vw;
    }

    .details {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, auto);
        justify-items: stretch;
        align-items: center;
        width: 100%;
    }

    .pokemon-name { grid-area: 1 / 1 / 2 / 3; }
    .image-container { grid-area: 2 / 1 / 3 / 2; }
    .description-container { grid-area: 2 / 2 / 3 / 3; }

    .image-container, .description-container {
        align-self: flex-start;
    }

    .details h1 {
        width: 100%;
    }

    .list-box {
        padding: 2rem;
    }
}