body {
    background: rgb(223, 238, 242);
    font-family: 'Poppins', sans-serif;
    padding: 0px;
    margin: 0px !important;
}

header {
    background: rgb(255, 255, 255);
    background: linear-gradient(28deg, rgb(122, 224, 241) 0%, rgb(255, 255, 255) 22%, rgba(122, 224, 241) 100%);
    padding: 20px;
    text-align: center;
}

#logo {
    width: 350px;
    max-width: 100%;
}

#cartbutton{
	font-size: 4.0rem;
}	

header ul {
    display: flex;
    list-style-type: none;
    justify-content: center;
    padding-left: 0px;
}

    header ul li a {
        padding: 8px 16px;
        background: rgb(19, 17, 128);
        border-radius: 12px;
        margin: 0px 5px;
        text-decoration: none;
        color: white;
        font-weight: bold;
    }

h1 {
    font-size: 2.8rem;
}

h2 {
    text-align: center;
    font-size: 1.2rem;
    color: rgb(17, 47, 112);
}

h4 {
    text-align: center;
    font-weight: 500;
}


section {
    padding: 20px;
}

#hero-title-box {
    width: 80%;
    padding: 20px;
    background: rgba(255, 255, 255, 0.37);
    margin: 0 auto;
}

.big-h2 {
    font-size: 2.2rem;
    background: rgb(2,0,36);
    background: linear-gradient(28deg, rgba(2,0,36,1) 0%, rgba(17,17,83,1) 22%, rgba(100,177,227,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

section#hero {
    background-image: url('images/computer-chip.jpg');
    background-size: cover;
    min-height: 300px;
    display: flex;
    align-items: center;
}

section#convention {
    background-color: rgb(250, 125, 23);
}

#conv-title {
    color: white;
    font-size: 2.2rem;
}

#conv-subtitle {
    color: white;
    font-size: 1.3rem;
}

section#science-book {
    background-color: rgb(248, 213, 117);
}

section#books {
    background: rgb(224, 255, 175);
}

#books-container {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 20px;
    justify-content: center;
}

    #books-container div {
        padding: 20px;
        margin: 0px;
        background: rgb(238, 255, 207);
        border-radius: 20px;
        width: 40%;
        border: 3px solid rgb(206, 255, 150);
    }

.book {
    text-align: center;
    max-width: 100%;
}

footer {
    background: rgb(17, 47, 112);
    text-align: center;
    margin: 0px !important;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 10px;
    color: white;
}

/* Media Queries ------ */

@media (max-width: 918px) {

    #books-container div {
        width: 100%;
    }
}

@media (max-width: 630px) {

    h1 {
        font-size: 2.6rem;
    }

    header ul {
        display: flex;
        list-style-type: none;
        align-items: center;
        flex-direction: column;
    }

        header ul li {
            margin: 4px 0px;
            padding: 8px 15px;
            width: 100%;
            background: rgb(231, 154, 37);
            border-radius: 12px;
        }

            header ul li a {
                padding: 8px 16px;
                background: rgb(19, 17, 128);
                border-radius: 12px;
                margin: 0px 5px;
                text-decoration: none;
                color: white;
                font-weight: bold;
            }
}