* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: white;
}
html {
    scroll-behavior: smooth;
}
h1 {
    font-family:'Courier New', Courier, monospace;
    font-size: 66px;
    position: relative;
    text-align: center;
    top: calc(50% - 33px);
    color : white ;
    text-shadow: 2px 3px 10px black
    
}
a:hover {
    color: rgb(176, 98, 98);
    text-decoration: none;

}
header {
    background-color: white;
    position: fixed;
    width: 100%;
    top: 0px;
    z-index: 1;
    .inria-sans-regular {
  font-family: "Inria Sans", sans-serif;}
  font-size: 26px;
}
/* header, */
main,footer,#banner,.grid {
    max-width: 2000px;
    margin: 0 auto;
    position: relative;
}
#banner {
    background-image: url(../img/pokeballbg3.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    top: 0px;
    height: 100vh;
    background-position: center center;
}
nav {text-align: center;
padding: 5px;
}
nav ul li {
    display: inline;
    /* margin-right: 60px; */
    margin-left: 25px;
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    outline: black;
    outline-width: 1px;
    outline-style: solid;
    line-height: 2em;
}
nav ul li a {
    text-decoration: none;
    color: white;
    /* .italiana-regular { */
                font-family: "Italiana", sans-serif;
                font-weight: 400;
                font-style: normal;
                text-align: center;
}

nav ul li:nth-child(1){
    background-color: #48782C;
}
nav ul li:nth-child(2){
    background-color: #BA3D3D;
}
nav ul li:nth-child(3){
    background-color: #4B79BE;
}
nav ul li:nth-child(4){
    background-color: #CAB434;
}

main {
    margin-top: 30px;
}
main {
    display: grid;
    grid-template-columns: 2fr;
    padding: 10px;
}

footer {
    background-color: grey;
    padding: 5px;
    min-height: 50px;
    text-align: center;
}

        .grid{
            display: grid;

            /* grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); */
            grid-template-columns: repeat(5, 1fr);
            gap: 10px;
            place-items: center;
        }
        .grid-item {
            text-align: center;
        }
        .grid-item img {
            width: 100%;
            height: 300px;
            object-fit: cover;
        }
        @media screen and (max-width:1000px){
            .grid{
                grid-template-columns: 1fr;
            }
            
        }
        article, section {
            padding-top: 65px;
            padding-bottom: 40px;


        }
            h2 {
                font-size: 40px;
                border-radius: 5px;
                max-width: 250px;
                text-align: center;
                color: white;
                /* .italiana-regular { */
                font-family: "Italiana", sans-serif;
                font-weight: 400;
                font-style: normal;
                outline-color: black;
                outline-width: 1px;
                outline-style: auto;
                
            }
            .summary{
                  background-color: green;
            }
            .origin{
                background-color: rgb(182, 62, 62)
            }
            .basic_rules{
                background-color: rgb(75, 121, 190);
            }
            .card_types{
                background-color: rgb(202, 180, 52);
            }

            .summaryp{
                padding-top: 25px;
                font-size: 25px;
                padding-bottom: 250px;
                max-width: 45ch;
            }
            .originp{
                font-size: 25px;
                /* margin-bottom: 200px; */
                /* margin-top: 50px; */
                max-width: 25ch;
            }
            .basic_rulesp{
                font-size: 25px;
                margin-bottom: 200px;
                margin-top: 50px;
                max-width: 60ch;
            }
            .basic_rulesp2{
                font-size: 25px;
                padding-bottom: 50px;
            }
        
            .grid{
                padding-bottom: 75px;
            }
            .grid-item{
                padding-bottom: 25px;
            }


            .text-grid{

                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 30px;
            }
            .text-grid-item img{
                width: 90%;
            }

            .prismevo{
                max-width: 350px
            }
            .ptcgonlineimg{
                max-width: 750px;
            }
            .ptcglogo{
                max-width: 500px;
            }
            .arctibax{
                max-width: 550px;
            }

            @media screen and (max-width: 700px) {
                .text-grid{
                    grid-template-columns: 1fr;
                }
                
            }