/*BODY*/
body {
background: #FFFFFF;
background: -moz-linear-gradient(top, #FFFFFF 0%, #FFFFFF 87%, #DEDEDE 100%);
background: -webkit-linear-gradient(top, #FFFFFF 0%, #FFFFFF 87%, #DEDEDE 100%);
background: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 87%, #DEDEDE 100%);
}

/* GENERAL */
        .deviderA {
            display: block;
            height: 25px;
            width: auto;
        }

        .devider50vh {
            display: block;
            height: 25vh;
            width: auto;
        }


/*INFOBOX*/

    .infoBox {
        border: 1.5em solid orangered;
        border-radius: 5em;
        padding: 1em 1.5em;
    }

    .infoBox p{
        font-size: 1em;
        text-align: center;
        letter-spacing: -0.05em;
        color: black;
    }


/*SHOPPING CART*/
    .shoppingCart {
        background-color: rgb(220, 220, 220);
        margin-top: 2em;
        padding: 1em;
    }


    #shoppingPosition{
        display: flex; 
        gap: 0.5em;
    }

    #shoppingPosition p:hover, #checkoutSummary p:hover{
        color: black;
    }


    



    /*Contact Form Settings*/ 

    #contactFormDiv_payment {
        padding-top: 10vh ;
        
    }

    .contactForm input, .contactForm textarea{
                    display: flex;
                    width: 100%;
                    min-height: 10vw;
                    max-height: 20vw;
                    border-radius: 1.5px;
                    border: 0px;
                    resize: none;
                    overflow: auto;
                    box-sizing: border-box;
                    padding-left: 0.2em;

                    
                    font-family: "Arial", sans-serif;
                    font-weight: bold;
                    font-size: 7.5vw;
                    line-height: 0.98em;
                    letter-spacing: -0.2vw;
                    color: rgb(220, 220, 220);
                    background-color: white;
                    }

                    .contactForm input:hover, .contactForm textarea:hover {
                    background-color: rgb(250, 250, 250 );
                    border-radius: 3px;

                }


                 .contactForm input:focus, .contactForm textarea:focus {
                    background-color: rgb(240, 240, 240);
                    border: none;
                    box-shadow: none;
                    outline: none;
                }

                 .contactForm textarea {
                    min-height: 20vh;
                    max-height: 40vh;
                }



                .contactForm input::paceholder, .contactForm textarea::placeholder{
                    font-family: "Arial", sans-serif;
                    font-weight: regular;
                    font-size: 5vw;
                    line-height: 0.98em;
                    letter-spacing: -0.2vw;
                    color: rgb(220, 220, 220);
                    margin-left: 10px;

                }

    /*

        input[type="text"], input[type="email"], input[type="tel"], textarea {
            max-width: 100vw;
            box-shadow: none;
            border: none;
            font-size: 5vw;

            font-family: "Arial", sans-serif;
            font-weight: bold;
            text-align: left;
            line-height: 0.98em;
            letter-spacing: -0.2vw;
            hyphens: auto;
            word-wrap: break-word;
            overflow-wrap: break-word;
            color: rgb(220, 220, 220);
        } 

        input[type="text"]::placeholder, input[type="email"]::placeholder, input[type="tel"]::placeholder, textarea::placeholder {
            color: rgb(220, 220, 220);
            letter-spacing: -0.06em;
        }


        input[type="text"]:hover, input[type="email"]:hover, input[type="tel"]:hover, textarea:hover {

        }

        input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, textarea:focus {
            color: ;
        }


*/
    /*CHECKBOX AREA*/

    .checkBox{
                    display: flex;
                }

        

        #checkBoxDiv1 {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            max-width: 100vw;
            height: auto;
            margin-top: 5vh;
            padding-left: 0.5em; 
            }

            .checkBoxLabel {
                display: inline-flex;
                align-items: center;
            }

            .checkBox label{
                font-size: 0.6em;
                color: rgb(200, 200, 200);

            }


            #HomeLink_PrivacyPolicy {
                text-decoration: underline;
            }


            input[type="checkbox"]{
                -webkit-appearance: none; /* Safari/Chrome */
                -moz-appearance: none;    /* Firefox */
                appearance: none;         /* Standard */
                

                margin: 0;
                width: 1rem;
                height: 1rem;
                border: 1px solid rgb(200, 200, 200);
                cursor: pointer;
                margin-right: 2rem;
            }

            input[type="checkbox"]:hover {
                background-color: rgb(200, 200, 200);
                }

            input[type="checkbox"]:checked {
                background-color: rgb(200, 200, 200 );
                border: none;
                transform: scale(0.7);
                }


    /*Button Area*/

    #submitBtnContainer {
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        width: 100vw;
        height: 20vh;
        box-sizing: border-box;


    }

    #buyBtnContainer {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        width: 100vw;
        max-height: 25vh;
        gap: 1rem;

        position: fixed;
        bottom: 1rem;
    }



    #nextBtn, #discardBtn{
        all: unset;
        
        font-weight: bold;
        padding: 0.2em;

        font-family: "Arial", sans-serif;
        font-weight: bold;
        font-size: 7.5vw;
        line-height: 0.98em;
        letter-spacing: -0.2vw;

        background-color: none;
        color: none;
        border: none;
        border-radius: none; 
        transition: all 0.15s ease-in;
    }

            #discardBtn{
                margin-left: 0em;
                margin-right: auto;
                color: rgb(240, 240, 240);
            }

            #nextBtn{
                margin-right: 0em;
                margin-left: auto;
            }


    #buyBtn {
        min-width: 35vw;
        font-size: 4rem;
        font-weight: bold;
        padding: 0.2em 1em;
        background-color: rgb(220, 220, 220);
        color: black;
        border: 1px solid black;
        border-radius: 0.1rem; 
        transition: all 0.15s ease-in;
        
        margin-top: 5rem;

    }


       #paypalInfo {
        width: 10vw;
        margin-top: 0.2rem;


    }


    #buyBtn:hover {
        /*border-radius: 2rem;*/
        background: linear-gradient(to bottom, white, green);

    }

     #discardBtn:hover {
        /*border-radius: 2rem;*/
        color: black;

    }

    #nextBtn:hover {
        color: rgb(240, 240, 240);
    }


     #nextBtn:active, #discardBtn:active {
        color: white;
    }





/*MEDIA QUERIES & RESPONSIVE DESIGN */
@media screen and (min-width: 1800px) {
}

@media screen and (max-width: 1800px) {
}

@media screen and (max-width: 1000px) {
    
    .infoBox{
        padding: 0.8em;
    }

    .infoBox p{
        font-size: 2em;
        text-align: center;
        letter-spacing: -0.05em;
        color: black;
    }

    .BoxA {
        flex-direction: column;
        gap: 1em;
    }

    input, textarea{
                    height: 1.3em;
                    font-size: 10vw;
                
                    }

    .shippingInp {
                    height: 40vw;
                }




    input::paceholder, textarea::placeholder{
                    font-size: 10vw;

                }



    #buyBtn{
        font-size: 3rem;
    }

     #paypalInfo {
        width: 25%;
    }

    #dataScreen {
        margin-bottom: 5vh;
    }

}

@media screen and (max-width: 700px) {
    #paypalInfo {
        width: 30%;
    }

}