/* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* font  */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Document
   ========================================================================== */

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

/* Sections
     ========================================================================== */

body {
    margin: 0;
    background-color: grey;
    /* font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
        sans-serif; */
    font-family: "Poppins", sans-serif;
}

main {
    display: block;
}

/* Grouping content
     ========================================================================== */

h1 {
    font-size: 2em;
    margin: 0.6em 0;
}

/* Text-level semantics
     ========================================================================== */

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted;
}

b,
strong {
    font-weight: bolder;
}

code,
kbd,
samp,
pre {
    font-family: monospace, monospace;
    font-size: 1em;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Embedded content
     ========================================================================== */

img {
    border-style: none;
}

/* Forms
     ========================================================================== */

button,
input,
optgroup,
select,
textarea {
    /* font-family: inherit; */
    font-family: "Poppins", sans-serif;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

button,
input {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

/* button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
} */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

fieldset {
    padding: 0.35em 0.75em 0.625em;
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

progress {
    vertical-align: baseline;
}

textarea {
    overflow: auto;
}

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

/* Interactive
     ========================================================================== */

details {
    display: block;
}

summary {
    display: list-item;
}

/* Misc
     ========================================================================== */

template {
    display: none;
}

[hidden] {
    display: none;
}

.container {
    width: calc(100% - 30px);
    max-width: 1140px;
    margin: 0px auto;
}

header {
    padding: 0px 0px;
    /* background: #ff1c1c; */
    background: linear-gradient(135deg, #ff4444, #ffcc00);

}

header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header .container .logo h1 {
    color: #fff;
    cursor: pointer;
    text-decoration: none;
}

header .container nav ul {
    margin: 0px;
    list-style-type: none;
    padding: 0px;
}

header .container nav ul li {
    display: inline-block;
    padding-right: 10px;
}

header .container nav ul li:last-child {
    padding: 0px;
}

header .container nav ul li a {
    text-decoration: none;
    color: #fff;
}

.randomgenerate-btn {
    background-color: #000;
    color: #fff;
    border-radius: 5px;
    width: 100%;
    cursor: pointer;
    padding: 11.81px;
    border: 0px;
}

select {
    width: 100%;
    margin: 10px 0px;
    border-radius: 5px;
    padding: 10px;
}

.random-pokes {
    background-color: #fff;
    padding: 20px;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    width: calc(100% - 40px);
    max-width: 500px;
}

.randompokemons {
    width: 100%;
    background: url(../img/bg.jpg);
    margin: 0% auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    /* height: 80vh; */
}

.randompokemons .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 25px;
    min-height: calc(100vh - 125px);
    width: calc(100% - 30px);
    padding: 25px 0px;
}

.categories-pokemons {
    width: 35vw;
    margin: 30px auto;
}

.categorized-poke {
    background-color: antiquewhite;
    padding: 20px;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    width: calc(100% - 40px);
    max-width: 500px;
}

.select-category {
    width: 100%;
    margin: 10px 0px;
    border-radius: 5px;
}

.category-btn {
    background: linear-gradient(135deg, #ff4444, #ffcc00);
    color: #fff;
    border-radius: 5px;
    width: 100%;
    cursor: pointer;
    border: none;
    padding: 8px;
    border-radius: 5px;
    transition: 0.3s;
}

a {
    text-decoration: none
}

.category-btn:hover {
    background: #ff4444;
}

.random-pokes p {
    font-size: 1.5em;
    font-weight: 900;
    text-align: center;
}

.generated-pokemons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 25px;
    background-color: #fff;
    border-radius: 20px !important;
    overflow: hidden;
}


.generated-pokemons .item .pokemon-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background-color: #fff;
}

.generated-pokemons .item .pokemon-box img {
    display: flex;
    background: #fff;
    border-radius: 10px;
}

section.about {
    padding: 75px 0px;
    background: #fff;
}

.logo a {
    text-decoration: none;
}

section.about .container {
    text-align: center;
    max-width: 930px;
}

p {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #444;
    line-height: 1.6;
}

.nav-list li a {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    color: white;
    text-decoration: none;
    font-weight: 500;
    padding: 10px 15px;
    transition: all 0.3s ease-in-out;
    border-radius: 5px;
}

/* Hover Effect */
.nav-list li a:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

footer {
    background: linear-gradient(135deg, #ffcc00, #ff4444);
    text-align: center;
    padding: 10px;
}

footer p {
    color: #fff;
    font-size: 16px;
}

.container-blog {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1,
h2,
h3 {
    color: #ffcc00;
    text-align: center;
}

p {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

.cta {
    text-align: center;
    margin-top: 20px;
}

.cta a {
    display: inline-block;
    padding: 10px 20px;
    background: linear-gradient(135deg, #ffcc00, #ff4444);
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: 0.3s;
}

.cta a:hover {
    background: #ff4444;
    color: #fff;
}

@media (max-width: 768px) {
    footer p {
        font-size: 10px;
    }

    body p {
        font-size: 10px;
    }

    body h1 {
        font-size: 18px;
    }

    .about {
        padding: 1px 0px !important;
    }

    .container-blogs {
        padding: 35px !important;
    }

    .about-container {
        height: 80vh;
    }

    .contact-container {
        height: 80vh;
        padding: 20px !important;

    }

    .container-faqs {
        padding: 20px;
    }

    .faq-question {
        font-size: 14px !important;
    }

    /* .randompokemons {
        height: 90vh;
    } */

    .contact-form input,
    .contact-form textarea {
        width: 80% !important;
    }

    .cta {
        padding: 10px 10px;
        border-radius: 5px;
        /* font-weight: bold; */
        text-decoration: none;
        font-size: 14px;
        margin-top: 12px;
        transition: background 0.3s;
    }
}

.container-blog p img {
    width: 100%;
}