/*color variables*/
:root{
    --dark: #3a2c31;
    --medium: #dbb4ad;
    --light: #ffe3dc;
    --accentLight: #82a7a6;
    --accentDark: #7b0b37;
}

/*reset defaults*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--light);
    font-family:Georgia, 'Times New Roman', Times, serif;
}

a{
    text-decoration: none;
    color: var(--dark);
}

ul{
    list-style: none;
}

/*Header*/
.header {
    background-color: var(--accentLight);
    box-shadow: 1px 1px 5px 0px var(--medium);
    position: sticky;
    color: var(--dark);
    text-align: center;
    font-size: 18px;
    top: 0;
    width: 100%;
    min-height: 120px;
}
/*Logo*/
.logo{
    float: left;
    width: 15%;
    min-width: 96px;
    margin-top: 10px;
    margin-left: 10px;
}

#searchbox {
    font-size: 1em;
    margin: 10px 0;
}
#searchbox::placeholder {
    color: var(--dark);
}
main{
    width: 90%;
}
.welcome{
    text-align: center;
    margin-bottom: 20px;
    font-family: 'Brush Script MT', 'Lucida Handwriting', cursive;
    font-size: 4em;
    color: var(--dark);
}
.textbox {
    width: 80%;
    padding: 20px;
    margin: 20px 10%;
    color: var(--dark);
}
#vision{
    border-style: solid;
    border-color: var(--medium);
    text-align: center;
    font-family: 'Lucida Handwriting', cursive;
}
/*product list*/
.product-group {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.product-description{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 300px;
    height: 500px;
    background-color: var(--medium);
    border: solid 3px var(--accentDark);
    border-radius: 5px;
    text-align: center;
    margin: 24px;
    padding: 10px;
}
.product-description p, .product-order p {
    padding: 20px 10px;
    display: flex;
}
.product-group a:link, .product-group a:visited {
    color: var(--dark);
}
.product-group a:hover{
    color: var(--dark);
    font-style: italic;
}
/*portfolio*/
.portfolio-block{
    display: flex;
    flex-direction: column;
    clear: both;
    width: 90%;
    margin-left: 5%;
    padding: 20px;
    text-align: center;
}
.portfolio-block img {
    border: solid 3px var(--accentDark);
    border-radius: 5px;
} 
.portfolio-text {
    border: solid 3px var(--accentLight);
    border-radius: 5px;
    padding: 5px;
}
.left-image, .right-image, .product-page-image {
    display: block;
    width: 50%;
    margin-left: 25%;
    margin-bottom: 20px;
}
/*product page*/
.product-page-image {
    margin-top: 20px;
}
.product-order {
    display: block;
    text-align: center;
    font-size: 1.5em;
}

#price-option-1, #price-option-2, #price-option-3 {
    display: none;
}
#product-option-1:checked ~ #price-option-1 {
    display: block;
}
#product-option-1:checked ~ #price-option-2, #price-option-3 {
    display: hidden;
}
#product-option-2:checked ~ #price-option-2 {
    display: block;
}
#product-option-2:checked ~ #price-option-1, #price-option-3 {
    display: hidden;
}
#product-option-3:checked ~ #price-option-3 {
    display: block;
}
#product-option-3:checked ~ #price-option-1, #price-option-2 {
    display: hidden;
}

#add-cart-button {
    font-size: 1.5em;
    width: 50%;
    margin: 20px 25%;
}
#add-cart-button a{
    color: var(--light);
}
/*about page*/
#about{
    background-image: url(images/crocheting-hands.jpg);
    background-position: center;
    width: 100%;
    min-height: 300px;
    color: var(--light);
    font-size: 1.5em;
    text-align: center;
    line-height: 1.5;
    padding: 30px 10px;
}
/*contact page/forms*/
.form label {
    margin-left: 20px;
}
.formbutton {
    background-color: var(--accentDark);
    color: var(--light);
    display: block;
    width: 40%;
    margin-left: 10%;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    padding: 3px;
    border-style: outset;
    text-align: center;
}
.formbutton a {
    color: var(--light);
}
.form {
	width: 100%;
	color: var(--dark);
	padding: 10px;
}
#name, #email, #subject, #feedback {
	display: block;
	width: 80%;
    margin-left: 10%;
    border: 1px solid var(--accentDark);
    border-radius: 5px;
	font-family: Verdana, Tahoma, sans-serif;
    padding: 5px;
    margin-top: 5px;
}
#feedback {
    height: 300px; 
}
/*cart form*/
.row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    margin: 0 -16px;
    flex-direction: column-reverse;
  }
  
  #login-page {
    flex-direction: column;
  }

  .col-25 {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    margin-bottom: 20px;
  }
  
  .col-50 {
    -ms-flex: 50%; /* IE10 */
    flex: 50%;
  }
  
  .col-75 {
    -ms-flex: 75%; /* IE10 */
    flex: 75%;
  }
  
  .col-25,
  .col-50,
  .col-75 {
    padding: 0 16px;
  }
  
  .container {
    background-color: transparent;
    padding: 5px 20px 15px 20px;
    border: none;
  }
  
  .cart-text-input, .login-text-input {
    width: 100%;
    margin-bottom: 20px;
    padding: 12px;
    border: 1px solid var(--medium);
    border-radius: 5px;
    background-color: var(--light);
  }
  
  .cart-label {
    margin-bottom: 10px;
    display: block;
  }
  
  #paypal-button {
    display: block;
    text-align: center;
    margin: 20px;
  }
  #paypal-button a:link, a:visited, a:hover {
    color: var(--light);
  }
  #cart {
    font-size: 1.25em;
  }
  #cart a:link {
    color: var(--dark);
  }
  #cart a:hover {
    text-decoration: underline;
    background:transparent;
  }
  #cart a:visited {
    color: var(--accentDark);
  }
  span.price {
    float: right;
    color: var(--dark);
  }
  #password-requirements {
    width: 100%;
    padding-bottom: 12px;
    font-size: 0.8em;
  }

/*confirmation*/
.change-limitations {
    width: 80%;
    margin-left: 10%;
    font-size: .75em;
    color: var(--accentDark);
}
/*account*/
#previous-orders {
    margin-top: 20px;
    background-color: var(--light);
}

/*Hide hands image, footer in mobile*/
.footer{
    display: none;
}
#handsimage{
    display: none;
}
/*Chat icon*/
.chat-icon{
    position: fixed;
    bottom: 10px;
    right: 20px;
    cursor: pointer;
    width: 10%;
    min-width: 64px;
    max-width: 96px;
}
/*Nav Menu*/
.nav{
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: var(--dark);
    overflow: hidden;
}
#menu a{
    display: block;
    padding: 10px;
    color: var(--light);
}
#menu a:hover{
    background-color: var(--accentDark);
}
.nav{
    max-height: 0;
    transition: max-height .5s ease-out;
}
/*Menu Icon*/
.hamb{
    cursor: pointer;
    float: right;
    padding: 20px 20px;
}
.hamb-line {
    background: var(--accentDark);
    display: block;
    height: 2px;
    position: relative;
    width: 24px;
}
/*span tag*/
.hamb-line::before,
.hamb-line::after {
    background: var(--accentDark);
    content: ' ';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}
.hamb-line::before{
    top: 5px;
}
.hamb-line::after{
    top: -5px;
}
/*hide checkbox*/
.side-menu{
    display: none;
}
/*Toggle menu icon*/
.side-menu:checked ~ nav {
    max-height: 100%;
}
.side-menu:checked ~ .hamb .hamb-line {
    background: transparent;
}
.side-menu:checked .hamb .hamb-line::before {
    transform: rotate(-45deg);
    top:0;
}
.side-menu:checked .hamb .hamb-line::after {
    transform: rotate(45deg);
    top:0;
}

/*chat*/
.chat-popup {
    display: none;
    position: fixed;
    bottom: 108px;
    right: 15px;
    border: 3px solid var(--dark);
    border-radius: 5px;
    z-index: 9;
    color: var(--dark);
}
.chat-container {
    max-width: 300px;
    padding: 10px;
    background-color: var(--medium);
}

.chat-container textarea::placeholder {
    color: var(--accentDark);
}

.chat-container textarea {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    border: 1px solid var(--accentDark);
    border-radius: 2px;
    background: var(--accentLight);
    resize: none;
    min-height: 200px;
    color: var(--dark);
}

.chat-container textarea:focus {
    background-color: var(--light);
    outline: none;
}

.chat-container .formbutton:hover {
    background-color: var(--accentLight);
    color: var(--accentDark);
}
.chat-box {
    display: none;
}
.chat-box:checked ~ .chat-popup {
    display: block;
}
/*Responsiveness*/
@media (min-width: 900px) {
    #title {
        padding-top: 10px;
    }
    .nav{
        max-height: none;
        top:0;
        position: relative;
        display: inline-block;
        width: fit-content;
        background-color: transparent;
    }
    #menu li{
        float: left;
        color: var(--accentDark);
        font-size: 18px;
    }
    #menu a{
        color: var(--accentDark);
    }
    #menu a:hover{
        background-color: var(--accentDark);
        color: var(--accentLight);
    }
    .hamb{
        display: none;
    }
    #searchbox{
        display: block;
        float: right;
        padding: 5px;
        width: 20%;
        margin-top: 10px;
        margin-right: 10px;   
    }
    #searchbox::placeholder {
        color: var(--accentDark);
    }
    .logo{
        width: 128px;
    }   
    
    main {
        clear: both;
        color: var(--dark);
        width: 90%;
        margin: 20px 5%;
    }
    /*portfolio*/
    .portfolio-block{
        flex-direction: row;
        width: 100%;
        justify-content: center;
        align-items: center;
    }
    .row-reverse {
        flex-direction: row-reverse;
    }
    .left-image {
        width: 300px;
        margin-left: 40px;
    }
    .right-image {
        width: 300px;
        margin: 40px;
    }
    .portfolio-text {
        height: 100px;
        margin-left: 20px;
        padding-top: 20px;
        border: 3px solid var(--accentLight);
        border-radius: 5px;
        width: 50%;
    }
    #handsimage {
        display: block;
        float: left;
        width: 390px;
        height: 216px;
        margin-right: 20px;
    }
    #about {
        background: none;
        color: var(--dark);
        width: 80%;
        margin: 0 10%;
        border: solid 2px var(--medium);
        border-radius: 5px;
        padding: 48px;
        font-size: 1em;
    }
    .form {
        width: 80%;
        margin-left: 10%;
        border: 3px solid var(--accentDark);
        border-radius: 5px;
        background-color: var(--medium);
    }
    .formbutton {
        display: inline-block;
        width: 200px;
        font-size: 1.25em;
    }
    .product-page-image {
        float: left;
        border: 2px solid var(--accentDark);
        border-radius: 5px;
        margin: 0 20px 20px 0;
        width: 35%;
        max-width: 300px;
    }
    .product-order {
        float: right;
        width: 60%;
        margin: 0 0 20px 0;
        min-height: 300px;
    }
    #add-to-cart {
        align-self: center;
    }
    /*cart form*/
    .row, #login-page{
        flex-direction: row;
    }
    #login-form {
        border-right: 3px solid var(--accentLight);
    }
    #between-order-types {
        display: none;
    }
    .chat-icon {
        bottom: 10px;
        right: 20px;
        width: 96px;
    }
    .footer {
        display: block;
        clear: both;
        width: 100%;
        background-color: var(--accentLight);
        color: var(--light);
        text-align: center;
        min-height: 40px;
    }
    
    .footer a:link {
        text-decoration: none;
        color: var(--light);
    }
    
    .footer a:visited {
        text-decoration: none;
        color: var(--dark);
    }
    
    .footer a:hover {
        text-decoration: underline;
        color: var(--accentDark);
        background-color: transparent;
    }   
}