/* ==================== CSS FOR BUY.AARONKUEHN.COM ==================== */

:root {
    --color-back: #4d4d4d;
    --color-nav: #66b2ff;
    --color-paper: #f2f2f2;
    --color-text: #0d0d0d;
    --color-tail: #ffea00;
    --color-buy: #64dd17;
    --color-discount: #f44336;
    --line-height-main: 2em;
    --line-height-nav: 1.75em;
    --line: .6vmin;
    --size-text: 4.5vmin;
    --size-textmed: 5.5vmin;
    --size-textnav: 7vmin;
    --wide: 100vw;
    --wide-image: 80vw;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@font-face {
    font-family: 'Kuehn';
    src:  url('https://aaronkuehn.com/aaron-kuehn-mono.woff') format('woff');
}

* {
    margin: 0;
    padding: 0;
}

body {
    -webkit-hyphens: auto;
    background-color: var(--color-back);
    color: var(--color-text);
    font-family: 'Kuehn', sans-serif;
    font-size: var(--size-text);
    hyphens: auto;
    line-height: var(--line-height-main);
}

a {
    -webkit-box-decoration-break: clone;
    border-bottom: var(--line) solid var(--color-nav);
    box-decoration-break: clone;
    color: var(--color-text);
    margin: -.125em 0;
    padding: .125em 0;
    text-decoration: none;
}

a:hover, 
a:focus {
    border-bottom: var(--line) solid var(--color-paper);
    -webkit-box-decoration-break: clone;
    background-color: var(--color-nav);
}

nav a {
    border-bottom: var(--line) solid var(--color-paper);
}

nav a:hover, 
nav a:focus {
    border-bottom: none;
    -webkit-box-decoration-break: clone;
    background-color: var(--color-paper);
}

.pix {
    border-bottom: none;
    margin: 0;
    padding: 0;
}

.pix:hover,
.pix:focus {
    border-bottom: none;
}

.title {
    text-transform: uppercase;
}

.active-title {
    border-bottom: var(--line) solid var(--color-nav);
    -webkit-box-decoration-break: clone;
    background-color: var(--color-paper);
    box-decoration-break: clone;
    margin: -.083em -.667em;
    padding: .083em .667em;
}

.active-title:hover {
    border-bottom: var(--line) solid var(--color-paper);
    background-color: var(--color-nav);
    padding: 0;
    margin: 0;
}

p {
}

img {
}

strong {
    font-size: var(--size-textmed);
    text-transform: uppercase;
    font-weight: normal;
}

h1 {
    -webkit-hyphens: none;
    font-weight: normal;
    hyphens: none;
    text-transform: uppercase;
    font-size: var(--size-textnav);
    color: var(--color-nav);
}

h2 {
    -webkit-hyphens: none;
    font-weight: normal;
    hyphens: none;
    text-transform: uppercase;
    font-size: var(--size-textmed);
}

blockquote {
    padding-left: .667em;
}

hr {
    border-bottom: var(--line) solid var(--color-text);
}

ul {
    list-style-type: none;
    margin: 0;
    position: relative;
}

li {
    padding-left: .666em;
    list-style-type: none;
}

/* ==================== NAV ==================== */

nav {
    -webkit-hyphens: none;
    background-color: var(--color-nav);
    float: bottom;
    hyphens: none;
    line-height: var(--line-height-nav);
    margin: 0 auto;
    padding: 10vmin 10vmin;
    width: var(--wide);
    font-weight: normal;
    text-transform: uppercase;
    font-size: var(--size-textnav);
    box-sizing: border-box;
}

#aaron-kuehn {
    padding-left: 0;
}

.depth-0 {
    padding-left: 0;
}

.depth-1 {
    padding-left: 0;
}

.depth-2 {
    padding-left: .667em;
}

.tail {
    background-color: var(--color-tail);
}

.here:before {
    color: var(--color-paper);
    content:"→";
    position: absolute;
    left: -1em;
    font-weight: normal;
    font-size: var(--size-textnav);
}

#info {
    background-color: var(--color-paper);
    hyphens: auto;
    margin: 0 auto;
    padding: 10vmin;
    webkit-hyphens: auto;
    width: var(--wide);
    box-sizing: border-box;
    display: grid;
    grid-row-gap: 10vmin;

}

#info img {
    display: block;
    height: auto;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

#discount {
    background-color: var(--color-discount);
    hyphens: auto;
    margin: 0 auto;
    padding: 10vmin;
    webkit-hyphens: auto;
    width: var(--wide);
    box-sizing: border-box;
    color: white;

}

.chapter img {
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

figure {
    margin: 0;
}

figcaption {
    padding: 0;
    margin-top: 5vmin;
    text-align: center;
}


/* ==================== BIG CARTEL SPECIFIC ==================== */


/* ==================== FORM ==================== */

input, 
textarea {
    background-color: var(--color-nav);
    font-family: 'Kuehn', sans-serif;
    font-size: var(--size-text);
    border: none;
}

input[type=text] {
    text-align: center;
    width: 2em;
    margin: -.1em 0;
    padding: .1em 0;
}


/* ==================== PRODUCTS PAGE ==================== */

#mosaic {
    display: grid;
    grid-gap: 2.5vw;
    grid-template-columns: 30vw 30vw 30vw;
    padding: 2.5vmin;
    width: 100vw;
    margin: 0 auto;
}

.pix-mosaic {
    border-bottom: none;
    margin: -2.5vw;
    padding: 2.5vw;
    place-self: center;
}

.pix-mosaic:hover,
.pix-mosaic:focus {
    border-bottom: none;
    background-color: var(--color-buy);
}

.portrait-thumb {
    display: block;
    height: 30vw;
    width: auto;
}

.landscape-thumb {
    display: block;
    width: 30vw;
}

.square-thumb {
    display: block;
    width: 30vw;
}

.products {
    padding-left: 0;
    margin: 0 auto;
    width: var(--wide);
    padding: 5vmin 0;
}

.products:hover {
    background-color: var(--color-buy);
}

/* ==================== PRODUCT PAGE ==================== */

.product_image {
    display: block;
    margin: 10vmin auto;
    text-align: center;
    width: 100%;
}

.portrait {
    display: block;
    margin: 0 auto;
    height: var(--wide-image);
}

.landscape {
    display: block;
    margin: 0 auto;
    width: var(--wide-image);
}

.square {
    display: block;
    margin: 0 auto;
    width: var(--wide-image);
}

.description {
    margin: 0 auto;
    position: relative;
    line-height: 3em;
    width: 75vw;
}

#product_options {
    margin: 1em auto;
    position: relative;
    line-height: 3em;
    width: 75vw;
}

#product_thumbs img {
    display: block;
    margin: 0 auto;
    width: var(--wide);
}


/* ==================== CART ==================== */

#cart_page {
}

.cart_item {
  display: grid;
  grid-gap: .5em;
  grid-template-columns: auto auto 2em 1em;
  margin-bottom: 2em;
}

#add_items {
    margin-bottom: 3em;

}


#total_line {
  display: grid;
  grid-gap: .5em;
  grid-template-columns: auto auto 2em;
  margin-bottom: 2em;
}

.cart_item_title {
    -webkit-hyphens: none;
    hyphens: none;
    text-align: left;
}

.cart_item_price {
    text-align: right;
}

.cart_item_qty input {
    text-align: center;
}

.cart_item_remove {
    text-align: center;
}

.remove {
    padding: 0 .5em;
    border: none;
    text-align: center;
}

.cart_subtotal {
    text-align: left;
}

.cart_total {
    border-top: var(--line) solid var(--color-text);
    text-align: right;
}

.button {
    background-color: var(--color-buy);
    border: var(--line) solid var(--color-paper);
    border-radius: 1.5em;
    display: block;
    font-family: 'Kuehn', sans-serif;
    font-size: var(--size-textnav);
    margin: 10vmin auto 0;
    padding: .5em 1em;
    text-transform: uppercase;
}

.button:hover, 
.button:focus {
    background-color: var(--color-paper);
    box-shadow: 0 0 0 2.5vmin var(--color-buy);
}