@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Open+Sans:wght@300;700&display=swap');
 :root {
    --color-block: #404041;
    --color-orange: #f6921e;
    --color-blue: #1db5f5;
    --fontsize-title45: 2.5rem;
    /* xx-large */
    --fontsize-body36: 2rem;
    /* x-large */
    --fontsize-body22: 1.25rem;
    /* large */
    --fontsize-notice43_2: 1.5rem;
    --fontsize-btn_big: 3.125rem;
    --fontsize-btn_n: 2rem;
    --fontsize-header: 1.7rem;
    --fontsize-messagebody: 2rem;
    --fontsize-messagelink: 3rem;
    /* var(--main-btn-text) */
    /* 
        #404041 rgba(64, 64, 65, 0.6)
        #f6921e rgba(246, 146, 30, 0.2)
        #1db5f5 rgba(29, 181, 245, 0.2)
    */
    --font-beba: 'Bebas Neue', cursive, arial;
    --font-open: 'Open Sans', sans-serif, arial;
}

* {
    box-sizing: border-box;
    /* border: 1px solid red; */
    color: #404041;
}

body {
    margin: 0;
}

main {
    min-height: 88.5vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.messagebody {
    width: 65vw;
    height: fit-content;
    padding: 2em;
    color: rgba(64, 64, 65, 0.8);
    background-color: rgba(246, 146, 30, 0.2);
    font-size: var(--fontsize-messagebody);
}

.messagelink {
    color: var(--color-block);
    font-size: var(--fontsize-messagelink);
    text-decoration: none;
    border: 1.2px solid var(--color-orange);
    background-color: #f6921e;
    border: 1px solid rgb(255, 215, 0);
}


/* header */

header {
    max-width: 70vw;
    padding-top: 1.2rem;
    font-family: 'Bebas Neue', cursive, arial;
    margin: 0 auto;
    height: 10vh;
}

.pclogo {
    width: 18vw;
    padding-left: 1rem;
    padding-right: 1rem;
}

.h_Tbtn {
    text-decoration: none;
    color: #404041;
    display: inline;
    font-size: var(--fontsize-header);
    background-color: rgba(64, 64, 65, 0.2);
    width: 12vw;
    max-width: 15vw;
    text-align: center;
    padding: 0.3rem;
}

.pcnav {
    display: flex;
    align-items: center;
    position: relative;
    justify-content: space-between;
    margin: 0;
}

.mobilenav {
    display: none;
    width: 100%;
}


/* footer */

footer {
    background-color: rgba(246, 146, 30, 0.2);
    font-family: 'Bebas Neue', cursive, arial;
    color: var(--color-block);
    text-align: center;
    /* position: fixed; */
    left: 0;
    bottom: 0;
    width: 100%;
}


/* index */

#slidediv {
    height: 35vw;
    max-height: 40vw;
    max-width: 70vw;
    display: block;
    margin-top: 2em;
    width: 70vw;
}

.slides {
    padding: 0;
    width: 70vw;
    height: 35vw;
    display: block;
    margin: 0 auto;
    position: relative;
}

.slides input {
    display: none;
}

.slide-container {
    display: block;
}

.slide {
    top: 0;
    opacity: 0;
    width: 70vw;
    max-height: 80vh;
    height: 35vw;
    position: absolute;
    /* transition: all .7s ease-in-out; */
    overflow: hidden;
    display: flex;
    align-items: center;
}

.slide .promotepic {
    width: 70vw;
}

.slide .promoteproducet {
    width: 35vw;
    padding-left: 0;
}

input:checked+.slide-container .slide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 1;
    transform: scale(1);
    transition: opacity 1s ease-in-out;
}

.index_productinfo {
    align-items: center;
    padding: 1.5rem;
    font-family: 'Open Sans', sans-serif, arial;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-left: 1em;
}

.index_productinfo>p {
    font-size: var(--fontsize-body22);
    margin: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 30vw;
}

.index_productinfo>h3 {
    font-weight: 300;
    margin: 0;
    font-size: var(--fontsize-title45);
    width: 30vw;
}

.indexpromote_btn {
    text-decoration: none;
    padding: 0.4em;
    color: rgba(64, 64, 65, 0.8);
    background-color: rgba(246, 146, 30, 0.2);
    font-family: 'Bebas Neue', cursive, arial;
    font-size: var(--fontsize-btn_n);
    margin-top: 1em;
}

.nav label {
    width: 5vw;
    height: 35vw;
    display: none;
    position: absolute;
    opacity: 0;
    z-index: 9;
    cursor: pointer;
    transition: opacity .2s;
    color: #FFF;
    font-size: 8rem;
    text-align: center;
    align-items: center;
    background-color: rgba(255, 255, 255, .3);
    text-shadow: 0px 0px 15px rgb(119, 119, 119);
    top: 0;
}

.slide:hover+.nav label {
    opacity: 0.5;
}

.nav label:hover {
    opacity: 1;
}

.nav .next {
    right: 0;
}

input:checked+.slide-container .nav label {
    display: flex;
}

.nav-dots {
    margin-top: 0.7em;
    width: 70vw;
    padding-left: 0;
    text-align: center;
}

.nav-dots .nav-dot {
    margin: 0 0.5em;
    position: relative;
    border-radius: 100%;
    display: inline-block;
    background-color: rgba(64, 64, 65, 0.6);
    content: '';
    width: 1rem;
    height: 1rem;
}

.nav-dots .nav-dot:hover {
    cursor: pointer;
    background-color: rgba(64, 64, 65, 0.8);
}

input#img-1:checked~.nav-dots label#img-dot-1,
input#img-2:checked~.nav-dots label#img-dot-2,
input#img-3:checked~.nav-dots label#img-dot-3,
input#img-4:checked~.nav-dots label#img-dot-4,
input#img-5:checked~.nav-dots label#img-dot-5,
input#img-6:checked~.nav-dots label#img-dot-6 {
    background: rgba(64, 64, 65, 0.8);
}

#aboutarticle {
    display: block;
    margin-top: 2em;
    width: 65vw;
    max-width: 70vw;
    margin-bottom: 2em;
}

#aboutarticle p {
    font-family: 'Open Sans', sans-serif, arial;
    line-height: 3rem;
    margin: 0;
    font-size: var(--fontsize-body36);
    margin-bottom: 1em;
}

#about {
    font-family: 'Bebas Neue', cursive, arial;
    margin-bottom: 0.7em;
    margin-top: 0;
    font-size: var(--fontsize-title45);
}


/* login */

#loginform {
    width: 25vw;
}

.login-container {
    max-width: 70vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 70vw;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    height: 30vw;
}

#logindiv {
    width: 35vw;
    border: 3px solid rgba(64, 64, 65, 0.6);
    padding: 0.8em;
    display: flex;
    justify-content: center;
    align-items: center;
}

#logindiv input[type="text"],
#logindiv input[type="password"],
#logindiv input[type="email"] {
    width: 25vw;
    max-width: 30vw;
    display: block;
    font-family: 'Bebas Neue', cursive, arial;
    color: var(--color-block);
    font-size: var(--fontsize-title45);
    background-color: rgba(29, 181, 245, 0.2);
    margin-bottom: 0.5em;
    border: 3px solid rgba(64, 64, 65, 0.6);
}

#forget_btn {
    text-decoration: none !important;
    color: rgba(64, 64, 65, 0.8) !important;
    font-size: var(--fontsize-body22);
    background-color: white;
    width: 10vw;
    position: relative;
    margin: 0;
    font-family: 'Bebas Neue', cursive, arial;
}

.login-container img {
    width: 35vw;
}

.login-container p {
    font-family: 'Bebas Neue', cursive, arial;
    left: 5vw;
    width: 20vw;
    padding-left: 0.1em;
}

#logindiv div {
    margin-top: 0.2em;
    display: flex;
    justify-content: space-between;
    width: 25vw;
    max-width: 35vw;
}

#logindiv input[type="submit"] {
    text-decoration: none;
    color: rgba(64, 64, 65, 0.8);
    font-size: var(--fontsize-body36);
    background-color: rgba(246, 146, 30, 0.2);
    width: 10vw;
    max-width: 13vw;
    font-family: 'Bebas Neue', cursive, arial;
    margin: 0;
    border: none;
}

.btn_login {
    text-decoration: none;
    color: rgba(64, 64, 65, 0.8);
    font-size: var(--fontsize-body36);
    background-color: rgba(246, 146, 30, 0.2);
    width: 10vw;
    max-width: 13vw;
    padding: 0.3rem;
    font-family: 'Bebas Neue', cursive, arial;
    text-align: center;
    margin: 0;
    /* border: 1px solid var(--color-orange); */
}


/* signup */

#signup-container {
    display: flex;
    width: 70vw;
    justify-content: center;
    align-items: center;
    max-width: 70vw;
    height: 35vw;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    border: 3px solid rgba(64, 64, 65, 0.6);
}

#signupdiv {
    display: flex;
    width: 35vw;
    justify-content: space-around;
    align-items: center;
}

#signupdiv input[type="text"],
#signupdiv input[type="password"],
#signupdiv input[type="email"],
#signupdiv input[type="text"] {
    width: 30vw;
    max-width: 30vw;
    display: block;
    font-family: 'Bebas Neue', cursive, arial;
    color: var(--color-block);
    font-size: var(--fontsize-title45);
    background-color: rgba(29, 181, 245, 0.2);
    margin-bottom: 0.45em;
    border: 3px solid rgba(64, 64, 65, 0.6);
}

#signupdiv input[type="submit"] {
    text-decoration: none;
    color: rgba(64, 64, 65, 0.8);
    font-size: var(--fontsize-body36);
    background-color: rgba(246, 146, 30, 0.2);
    width: 10vw;
    max-width: 13vw;
    font-family: 'Bebas Neue', cursive, arial;
    margin: 0;
    border: none;
}

#signuppic {
    width: 35vw;
}


/* product-list */

.filterdiv {
    width: 70vw;
    font-family: 'Open Sans', sans-serif, arial;
    padding-top: 2em;
    padding-bottom: 1em;
    font-size: var(--fontsize-body22);
}

#sortfilter {
    font-family: 'Open Sans', sans-serif, arial;
    font-size: var(--fontsize-body22);
    border: 1px solid rgba(64, 64, 65, 0.6);
}

.filterdiv option {
    text-decoration: none;
    color: var(--color-block);
}

.list-container {
    width: 70vw;
    margin-bottom: 1em;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: fit-content;
    padding: 1em;
    border: 2px solid rgba(64, 64, 65, 0.6);
}

.list-container a {
    margin: 0;
    text-decoration: none;
    display: flex;
}

.list-container img {
    max-width: 20vw;
    width: 11vw;
    height: auto;
}

.list-container>div {
    width: 50vw;
    position: relative;
    padding-bottom: 0;
    left: 2em;
    font-family: 'Open Sans', sans-serif, arial;
    font-size: medium;
    max-width: max-content;
    margin-left: 0;
    align-items: center;
}

.list-container>div>h3 {
    margin: 0;
    font-family: 'Open Sans', sans-serif, arial;
    font-size: var(--fontsize-body36);
    font-weight: 300;
    margin-bottom: 0.3em;
}

.list-container>div>p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: 0.3em;
}

.list-container div input[type='number'] {
    width: 5vw;
    font-size: medium;
}

div#pricediv {
    width: 10vw;
    flex-wrap: wrap;
    display: flex;
    flex-direction: initial;
}

input#productqty {
    width: 6vw;
}

.plist_add_btn {
    /* max-width: fit-content; */
    background-color: rgba(246, 146, 30, 0.2);
    font-family: 'Bebas Neue', cursive, arial;
    font-size: 1.5rem;
    padding: 0.2em;
    color: rgba(64, 64, 65, 0.8);
    text-decoration: none;
    width: 13vw;
    /* align-items: center; */
    justify-content: center;
    display: flex;
    white-space: nowrap;
}


/* cart */

#cart-face {
    width: 70vw;
    height: fit-content;
    margin-bottom: 3em;
    margin-top: 3em;
    border: 3px solid rgba(64, 64, 65, 0.6);
    padding: 3em;
    padding-bottom: 7em;
}

.cartblockdiv {
    width: 60vw;
    display: flex;
    margin-bottom: 1.2em;
    justify-content: flex-start;
    align-items: center;
    height: fit-content;
    border: 2px solid rgba(64, 64, 65, 0.8);
    padding: 1.2em;
}

.cartblockdiv div {
    margin-left: 0.3em;
    font-family: 'Open Sans', sans-serif, arial;
    width: 40vw;
    position: relative;
    align-items: center;
    height: 8vw;
    max-height: fit-content;
}

.cartblockdiv div p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin: 0;
}

.cartblockdiv div h3 {
    font-weight: 300;
    margin: 0;
    height: fit-content;
}

#cart-face img {
    width: 7vw;
}

.carttotal {
    text-align: right;
    color: rgba(64, 64, 65, 0.8);
    font-family: 'Bebas Neue', cursive, arial;
    font-size: var(--fontsize-notice43_2);
    width: 60vw;
    position: relative;
}

.delete_btn {
    position: relative;
    /* top: -2em; */
    text-decoration: none;
    background-color: rgba(246, 146, 30, 0.2);
    color: rgba(64, 64, 65, 0.8);
    font-family: 'Bebas Neue', cursive, arial;
    font-size: var(--fontsize-notice43_2);
    padding: 0.3em 0.5em 0.3em 0.5em;
    margin-left: 1.5em;
}

#car_btn {
    width: 60vw;
    font-family: 'Bebas Neue', cursive, arial !important;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 1em;
}

#continue_shopping_btn {
    margin: 0;
    text-decoration: none;
    background-color: rgba(29, 181, 245, 0.2);
    color: rgba(64, 64, 65, 0.8);
    font-size: var(--fontsize-notice43_2);
    padding: 0.3em;
}

#go_pay_btn {
    text-decoration: none;
    background-color: rgba(246, 146, 30, 0.2);
    color: rgba(64, 64, 65, 0.8);
    font-size: var(--fontsize-notice43_2);
    padding: 0.3em;
    margin-left: 1em;
}


/* payment */

#payment-face {
    margin-top: 1em;
    width: 60vw;
    border: 3px solid rgba(64, 64, 65, 0.8);
    font-family: 'Open Sans', sans-serif, arial;
    padding: 2em;
}

#payment-face img {
    width: 10vw;
    height: auto;
}

.payblockdiv {
    width: 50vw;
    display: flex;
    align-items: center;
    border: 2px solid rgba(64, 64, 65, 0.8);
    margin-bottom: 1em;
}

.payblockdiv a {
    display: flex;
}

.payblockdiv div {
    width: 35vw;
}

.payblockdiv div h3 {
    font-weight: 300;
}

.payment-face {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.payment-face div {
    display: flex;
}

.paytotal {
    color: rgba(64, 64, 65, 0.8);
    font-family: 'Bebas Neue', cursive, arial;
    font-size: var(--fontsize-notice43_2);
    width: 50vw;
    text-align: right;
}

#customerinfo {
    width: 70vw;
    display: flex;
    align-content: center;
    justify-content: space-around;
    margin-top: 2em;
    margin-bottom: 2em;
}

.shipmentblock {
    width: 30vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#shipmentdiv {
    display: flex;
    align-content: flex-start;
    width: 30vw;
    padding: 0.5em;
}

.shiptitle {
    margin: 0;
    width: fit-content;
    height: fit-content;
    text-decoration: underline;
    color: rgba(64, 64, 65, 0.8);
    font-family: 'Bebas Neue', cursive, arial;
    font-size: var(--fontsize-notice43_2);
    text-align: center;
}

#titlediv {
    display: flex;
    align-content: flex-start;
    width: 15vw;
    flex-direction: column;
}

#shipmentdiv input[type='text'],
#shipmentdiv p {
    margin: 0;
    font-size: var(--fontsize-body36);
    font-family: 'Bebas Neue', cursive, arial;
    margin-bottom: 0.2em;
    padding: 0.3em;
    color: rgba(64, 64, 65, 0.8);
}

#ship_email,
#ship_address1,
#ship_address2 {
    width: 16vw;
    border: 1px solid rgba(64, 64, 65, 0.8);
    color: rgba(64, 64, 65, 0.6);
}

.ship_blocktitle {
    width: 12vw;
    text-align: left;
    padding: 0.2em;
}

.addressblock {
    display: flex;
    align-content: flex-start;
    width: 30vw;
    flex-direction: column;
    justify-content: center;
}

#citypro,
#postcountry,
#ship_namediv {
    width: 16vw;
    align-content: flex-start;
    display: flex;
    justify-content: space-between;
}

#ship_city,
#ship_province,
#ship_postcode,
#ship_country,
#ship_fname,
#ship_lname {
    width: 7.6vw;
    border: 1px solid rgba(64, 64, 65, 0.8);
    color: rgba(64, 64, 65, 0.6);
}

.paymentsave_btn {
    text-decoration: none;
    background-color: rgba(246, 146, 30, 0.2);
    color: rgba(64, 64, 65, 0.8);
    font-size: 1.3rem;
    padding: 0.3em;
    font-family: 'Bebas Neue', cursive, arial;
    margin-top: 0.5em;
    border: none;
}

#paymentdiv {
    width: 30vw;
    max-width: 40vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: flex-start;
}

#paymentdiv input[type='text'] {
    font-size: var(--fontsize-body36);
    font-family: 'Bebas Neue', cursive, arial;
    border: 1px solid rgba(64, 64, 65, 0.8);
    margin-bottom: 0.2em;
    padding: 0.3em;
    color: rgba(64, 64, 65, 0.8);
    ;
}

#cardexpcode {
    width: 25vw;
    display: flex;
    justify-content: space-between;
}

#pay_name,
#pay_card {
    width: 25vw;
}

#pay_exp,
#pay_code {
    width: 12vw;
}

#pay_name {
    margin-top: 0.3em;
}

#place_btn {
    text-decoration: none;
    background-color: rgba(29, 181, 245, 0.2);
    color: rgba(64, 64, 65, 0.8);
    font-size: var(--fontsize-btn_big);
    padding: 0.3em;
    font-family: 'Bebas Neue', cursive, arial;
    margin-top: 2.3em;
    width: 14vw;
    text-align: center;
}

#paymentcontent {
    margin-top: 0.5em;
    width: 30vw;
    display: flex;
    align-content: flex-start;
    flex-direction: column;
    justify-content: center;
}


/* place-order */

h2#placemsg {
    margin-top: 2em;
}


/* member */

.ordercontent {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    width: 70vw;
    margin-top: 2em;
    margin-bottom: 2em;
}

.memberblockdiv {
    width: 60vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border: 1px solid rgba(64, 64, 65, 0.8);
    margin-bottom: 0.5em;
}

.memberblockdiv a {
    display: flex;
}

.ordercontent>p {
    width: 60vw;
}

.memberblockdiv>a img {
    width: 8vw;
}

.memberblockdiv div {
    margin-left: 1em;
    height: fit-content;
}

.orderdiv {
    border: 2px solid rgba(64, 64, 65, 0.8);
    margin-top: 2em;
    display: flex;
    flex-wrap: wrap;
    width: 70vw;
    padding: 1em;
    justify-content: center;
}

.orderdiv>p {
    width: 60vw;
}

.memberblockdiv div * {
    margin: 0;
    display: flex;
}

.membertotal {
    color: rgba(64, 64, 65, 0.8);
    font-family: 'Bebas Neue', cursive, arial;
    font-size: var(--fontsize-notice43_2);
    width: 60vw;
    text-align: right;
}


/* product */

.product-container {
    margin-top: 2em;
    width: 70vw;
    display: flex;
    align-content: flex-start;
    justify-content: space-between;
    align-items: center;
    height: fit-content;
}

.product-container img {
    width: 35vw;
    height: auto;
}

.product-container>div {
    width: 45vw;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: self-start;
    flex-direction: column;
    font-family: 'Open Sans', sans-serif, arial;
    margin-left: 2em;
}

.product-container>div * {
    margin: 0;
}

.productpricediv {
    width: 11vw;
    flex-wrap: wrap;
    height: fit-content;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: initial;
}

.product-container>div h3 {
    font-weight: 300;
    font-size: var(--fontsize-title45);
}

.product-container>div>input[type=number] {
    font-size: var(--fontsize-body22);
    width: 5vw;
}


/* forget */

#password-container {
    width: 50vw;
    height: 20vh;
    margin-top: 2em;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border: 3px solid rgba(64, 64, 65, 0.8);
}

form.forgetform {
    display: flex;
    width: 50vw;
    justify-content: space-around;
}

input#forgetemail {
    width: 30vw;
    font-family: var(--font-beba);
    font-size: 1.5rem;
    color: rgba(64, 64, 65, 0.8);
    border: 2px solid rgba(64, 64, 65, 0.8);
}

input#find_btn {
    width: 15vw;
    font-family: var(--font-beba);
    font-size: 1.5rem;
    background-color: rgba(29, 181, 245, 0.2);
    color: rgba(64, 64, 65, 0.8);
    border: none;
}

#repass1,
#repass2 {
    width: 30vw;
    font-family: var(--font-beba);
    font-size: 1.5rem;
    color: rgba(64, 64, 65, 0.8);
    border: 2px solid rgba(64, 64, 65, 0.8);
    margin-bottom: 1em;
}

#resetpass-cont {
    display: none;
    width: 50vw;
    height: 30vh;
    margin-top: 2em;
    /* display: flex; */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 3px solid rgba(64, 64, 65, 0.8);
}

form#resetform input[type='reset'] {
    width: 15vw;
    font-family: var(--font-beba);
    font-size: 1.5rem;
    background-color: rgba(29, 181, 245, 0.2);
    color: rgba(64, 64, 65, 0.8);
    border: none;
}


/* 800px */

@media screen and (max-width:800px) {
    .messagebody,
    .messagelink {
        width: 85vw;
        font-size: 1rem;
    }
    /* header */
    .pcnav {
        display: none;
    }
    .mobilenav {
        display: flex;
        width: 100%;
    }
    header {
        width: 100%;
        display: flex;
        max-width: 100vw;
        margin-top: 0;
        padding-top: 0;
    }
    .container {
        width: auto;
        height: 10vh;
    }
    #cartimg {
        width: 2em;
        height: 2em;
        position: absolute;
        right: 4.7em;
        top: 2em;
    }
    #mobilelogo {
        width: 30vw;
        height: auto;
    }
    .navbar {
        width: 100%;
        box-shadow: 0 1px 4px rgb(146 161 176 / 15%);
    }
    .navbar .nav-container a:hover {
        font-weight: bolder;
    }
    .nav-container .checkbox {
        position: absolute;
        height: 3em;
        width: 3em;
        top: 2em;
        right: 1.2em;
        z-index: 6;
        opacity: 0;
        cursor: pointer;
        margin: 0;
    }
    .nav-container .hamburger-lines {
        position: absolute;
        height: 2em;
        width: 2em;
        z-index: 5;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        right: 1.5em;
        top: 2em;
    }
    .nav-container .hamburger-lines .line {
        display: block;
        height: 5px;
        width: 2.5em;
        border-radius: 20px;
        background: #0e2431;
        transition: all 300ms cubic-bezier(0.18, 0.05, 0.03, 0.95);
    }
    .nav-container .hamburger-lines .line1 {
        transform-origin: 0% 0%;
        transition: transform 0.4s ease-in-out;
    }
    .nav-container .hamburger-lines .line2 {
        transition: transform 0.2s ease-in-out;
    }
    .nav-container .hamburger-lines .line3 {
        transform-origin: 0% 100%;
        transition: transform 0.4s ease-in-out;
    }
    .navbar .menu-items {
        margin-top: 10vh;
        box-shadow: inset 0 0 2000px rgb(255 255 255 / 50%);
        height: 100vh;
        width: 100vw;
        transform: translate(-150%);
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: transform 0.5s ease-in-out;
        text-align: center;
        z-index: 4;
        position: absolute;
        background-color: #ececec;
    }
    .menu-items a {
        text-decoration: none;
        font-size: 2rem;
        padding: 0.4em;
        width: 30vw;
        margin-top: 1em;
        color: #404041;
        border-radius: 5px;
        display: flex;
        justify-content: center;
    }
    .menu-items h3 {
        text-decoration: underline;
        font-size: 4rem;
        color: #404041;
    }
    .logo {
        position: absolute;
        top: 1.8em;
        left: 1em;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        width: 30vw;
        height: fit-content;
    }
    .nav-container input[type="checkbox"]:checked~.menu-items {
        transform: translateX(0);
    }
    .nav-container input[type="checkbox"]:checked~.hamburger-lines .line1 {
        transform: rotate(45deg);
    }
    .nav-container input[type="checkbox"]:checked~.hamburger-lines .line2 {
        transform: scaleY(0);
    }
    .nav-container input[type="checkbox"]:checked~.hamburger-lines .line3 {
        transform: rotate(-45deg);
    }
    /* index */
    #slidediv {
        height: 50vw;
        width: 90vw;
        max-height: 80vh;
        max-width: 90vw;
        margin-top: 1em;
    }
    .slides {
        width: 90vw;
        height: 50vw;
    }
    .slide {
        width: 90vw;
        height: 50vw;
    }
    .slide .promoteproducet {
        height: 50vw;
        width: auto;
    }
    .nav label {
        height: 50vw;
        width: fit-content;
    }
    .nav-dots .nav-dot {
        width: 0.7rem;
        height: 0.7rem;
    }
    .slide .promotepic {
        width: 90vw;
    }
    .index_productinfo {
        display: none;
    }
    .indexpromote_btn {
        padding: 0.2em;
        font-size: 1rem;
    }
    #about {
        text-align: center;
    }
    #aboutarticle p {
        font-family: 'Open Sans', sans-serif, arial;
        line-height: 3rem;
        margin: 0;
        font-size: var(--fontsize-body36);
        margin-bottom: 1em;
    }
    #aboutarticle p:nth-of-type(2) {
        margin-bottom: 2em;
    }
    .promoteproducet {
        width: 50vw;
    }
    input:checked+.slide-container .slide {
        background-color: var(--color-orange);
        justify-content: center;
    }
    #aboutarticle {
        margin-bottom: 3em;
        text-align: center;
    }
    /* login */
    #logindiv {
        width: 85vw;
        height: fit-content;
        padding: 1em;
    }
    .login-container {
        height: 60vh;
        width: fit-content;
    }
    .login-container img {
        display: none;
    }
    #logindiv input[type='submit'],
    #signup_btn {
        width: 25vw;
        max-width: 25vw;
    }
    form#loginform {
        width: 55vw;
    }
    #logindiv div {
        width: 55vw;
        max-width: 55vw;
    }
    #logindiv input[type="text"],
    #logindiv input[type="password"],
    #logindiv input[type="email"] {
        width: 55vw;
        max-width: 60vw;
        font-size: 2rem;
    }
    /* products */
    .list-container {
        width: 90vw;
        padding: 0.3em;
    }
    .filterdiv {
        width: 90vw;
    }
    .list-container>div {
        left: 1em;
        font-size: 0.8rem;
        width: 55vw;
    }
    .list-container>div>h3 {
        font-size: 1.5rem;
    }
    .list-container>div>p,
    .list-container>div>label,
    .list-container>div>input[type='number'] {
        font-size: 1rem;
        margin: 0;
    }
    .list-container>div>input[type='number'] {
        width: 10vw;
        font-size: 0.8rem;
    }
    .plist_add_btn {
        font-size: 1rem;
        width: 15vw;
    }
    .list-container img {
        width: 30vw;
        max-width: 50vw;
    }
    .filterdiv {
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        font-size: 1rem;
    }
    #sortfilter {
        font-size: 1rem;
    }
    #password-container {
        width: 70vw;
    }
    form.forgetform {
        width: 70vw;
        flex-direction: column;
        align-items: center;
    }
    div#resetpass-cont {
        display: none;
        width: 60vw;
    }
    input#forgetemail {
        width: 50vw;
        margin-bottom: 0.5em;
    }
    input#find_btn {
        width: 50vw;
    }
    /* cart */
    #cart-face {
        width: 90vw;
        padding: 1em;
    }
    .cartblockdiv div p:nth-of-type(1) {
        display: none;
    }
    .carttotal,
    #car_btn,
    .cartblockdiv {
        width: auto;
    }
    /* payment */
    #payment-face {
        width: 90vw;
        padding: 1em;
    }
    #payment-face img {
        width: 30vw;
    }
    .payblockdiv {
        width: 85vw;
    }
    .payblockdiv div {
        width: 50vw;
        margin-left: 1em;
    }
    .shipmentblock {
        width: 85vw;
        align-items: center;
    }
    .payblockdiv div p {
        margin: 0;
    }
    #shipmentdiv {
        padding: 0;
        width: 85vw;
    }
    #shipmentdiv input[type='text'],
    #shipmentdiv p {
        font-size: 1.5rem;
        margin-top: 3vh;
    }
    .shiptitle {
        font-size: 2rem;
        margin-top: 2em;
    }
    #customerinfo {
        width: 90vw;
        flex-direction: column;
        align-items: center;
    }
    .addressblock {
        width: 85vw;
        z-index: 2;
    }
    #titlediv {
        position: absolute;
        width: 85vw;
    }
    .ship_blocktitle {
        width: 85vw;
    }
    #titlediv p:nth-of-type(1) {
        margin-top: 0;
    }
    .paytotal {
        width: auto;
    }
    #shipmentdiv input[type='text']:nth-of-type(1),
    #shipmentdiv input[type='text']:nth-of-type(2),
    #shipmentdiv input[type='text']:nth-of-type(3) {
        width: 85vw;
    }
    #ship_city,
    #ship_province,
    #ship_postcode,
    #ship_country,
    #ship_fname,
    #ship_lname {
        width: 40vw !important;
    }
    #ship_city,
    #ship_province,
    #ship_postcode,
    #ship_country {
        margin-top: 0 !important;
    }
    .paymentsave_btn {
        width: 40vw;
        margin-left: 45vw;
    }
    #citypro,
    #postcountry,
    #ship_namediv {
        width: 85vw;
    }
    #paymentdiv {
        width: 85vw;
        max-width: 85vw;
    }
    #paymentcontent {
        width: 85vw;
    }
    #paymentdiv input[type='text'] {
        font-size: 1.5rem;
    }
    #pay_name,
    #pay_card {
        width: 85vw;
    }
    #cardexpcode {
        width: 85vw;
    }
    #pay_exp,
    #pay_code {
        width: 40vw;
    }
    #place_btn {
        width: 40vw;
        font-size: 2rem;
    }
    /* product */
    .product-container {
        width: 90vw;
    }
    .product-container img {
        width: 45vw;
    }
    .product-container>div {
        width: 40vw;
    }
    #signupdiv {
        width: 70vw;
        margin-top: 3em;
    }
    #resetpass-cont {
        width: 60vw;
    }
    form#resetform input[type='reset'] {
        width: 30vw;
    }
}

@media screen and (max-width:400px) {
    .index_productinfo {
        display: none;
    }
    .list-container>div>h3 {
        font-size: 1rem;
    }
    .list-container>div>p {
        font-size: 0.7rem;
        margin: 0;
    }
    .plist_add_btn {
        font-size: 0.8rem;
    }
    #logindiv input[type="text"],
    #logindiv input[type="password"],
    #logindiv input[type="email"],
    #logindiv input[type="submit"] {
        font-size: 1.5rem;
    }
    .btn_login {
        font-size: 1.5rem;
        align-items: center;
        justify-content: center;
        display: flex;
    }
    .cartblockdiv {
        padding: 0.7em;
    }
    .cartblockdiv div h3 {
        font-size: 1em;
    }
    .cartblockdiv div {
        height: auto;
    }
    .delete_btn {
        padding: 0.1em 0.2em 0.1em 0.2em;
    }
    #payment-face {
        padding: 1em;
    }
    #aboutarticle>p {
        font-size: 1rem !important;
        line-height: 1.5rem !important;
    }
    .product-container>div h3 {
        font-size: 1.5rem;
    }
    .product-container>div>input[type=number] {
        font-size: 1rem;
    }
    .plist_add_btn {
        width: 20vw !important;
    }
    .list-container>div {
        width: 50vw;
    }
    input#productqty {
        width: 10vw;
    }
    #signupdiv input[type="text"],
    #signupdiv input[type="password"],
    #signupdiv input[type="email"] {
        width: 70vw;
        max-width: 85vw;
        font-size: 1rem;
    }
    #signupdiv input[type="imput"] {
        width: 30vw;
        max-width: 30vw;
    }
    .messagebody,
    .messagelink {
        width: 80vw;
        font-size: 1rem;
        margin: 0;
    }
    #continue_shopping_btn,
    #go_pay_btn {
        text-align: center;
    }
    #cart-face img {
        width: 20vw;
    }
    .delete_btn {
        margin-left: 0.5em;
    }
    .payblockdiv div {
        width: 50vw;
    }
    .payblockdiv {
        width: 80vw;
    }
    #place_btn {
        width: 40vw !important;
    }
    #resetpass-cont {
        width: 70vw;
    }
    #repass1,
    #repass2,
    form#resetform input[type='reset'] {
        width: 40vw;
    }
}

@media screen and (max-width:1200px) {
    .index_productinfo>h3 {
        font-size: 1.5rem;
    }
    .index_productinfo>p {
        font-size: 1rem;
    }
    .indexpromote_btn {
        padding: 0.2em;
        font-size: 1.5rem;
    }
    #aboutarticle>p {
        font-size: 1.5rem;
        line-height: 2.2rem;
    }
    /* signup */
    #signuppic {
        display: none;
    }
    #signupdiv input[type="text"],
    #signupdiv input[type="password"],
    #signupdiv input[type="email"] {
        width: 55vw;
        max-width: 60vw;
        font-size: 2rem;
    }
    #signupdiv input[type='submit'] {
        width: 25vw;
        font-size: 1.5rem;
        max-width: 25vw;
    }
    #signup-container {
        height: fit-content;
        padding: 3em;
    }
}