A Pen by John

/*Downloaded from https://www.codeseek.co/-J0hn-/a-pen-by-john-oBBpgq */
@import url("https://fonts.googleapis.com/css?family=Arsenal");
body {
  height: 100%;
  background: linear-gradient(20deg, lightgray, navy);
  font-family: sans-serif;
  display: flex;
  justify-content: center;
}

nav {
  border-bottom: solid 1px lightgray;
  margin-bottom: .50em;
  padding: 0 .60em;
}
nav .icon {
  border: solid 1px transparent;
  cursor: pointer;
  width: 25px;
  height: 30px;
}
nav .icon .top {
  height: 2px;
  background: black;
}
nav .icon .middle {
  height: 2px;
  background: black;
}
nav .icon .bottom {
  height: 2px;
  width: 70%;
  background: black;
}
nav .icon .space {
  margin: .30em 0;
}

.icon:hover .space {
  background: #0096c8;
}

.item {
  background: white;
  padding: .50em 0 .90em 0;
  margin-bottom: 1em;
  width: 340px;
}
.item h3 {
  text-transform: capitalize;
  text-align: center;
  font-family: 'Arsenal', sans-serif;
  font-weight: 200;
  margin: 0;
}
.item #price {
  color: #0096c8;
}
.item a {
  color: gray;
  text-transform: capitalize;
  font-size: .80em;
  display: block;
  text-align: center;
  margin-bottom: .40em;
  transition: .25s;
}
.item a:hover {
  color: #0096c8;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Arsenal', sans-serif;
  padding: 0 1.5em;
}
.flex h3 {
  font-size: 1.4em;
}

.img {
  overflow: hidden;
  height: 350px;
  margin: .40em auto .80em auto;
  box-shadow: 0 3px 15px 0 gray;
}
.img img {
  width: 100%;
  height: 100%;
}

p {
  width: 60px;
  margin: .8em auto;
  text-align: center;
  color: gray;
  font-size: .90em;
  text-transform: uppercase;
  border-bottom: solid 1px lightgray;
}

.color-picker .border {
  display: flex;
  justify-content: center;
  align-items: center;
}

.color-picker {
  display: flex;
  justify-content: space-around;
  margin: auto;
  width: 120px;
  margin-top: .20em;
}
.color-picker .border {
  position: relative;
  cursor: pointer;
  width: 30px;
  height: 30px;
  background: white;
  border: solid 2px lightgray;
  border-radius: 50%;
}
.color-picker .border .black {
  width: 20px;
  height: 20px;
  background: black;
  border-radius: 50%;
}
.color-picker .border .red {
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
}
.color-picker .border .navy {
  width: 20px;
  height: 20px;
  background: navy;
  border-radius: 50%;
}

/***************
    SIZE
***************/
.size-picker {
  padding: 0 4em;
  display: flex;
  justify-content: space-around;
  margin: auto;
}

.size-picker .border {
  display: flex;
  justify-content: center;
  align-items: center;
}

.size-picker .border {
  width: 25px;
  height: 25px;
  background: white;
  border: solid 2px lightgray;
  border-radius: 50px;
  color: gray;
  cursor: pointer;
  font-size: .95em;
  padding: .50em;
  text-transform: uppercase;
}
.size-picker .border:hover {
  border-color: gray;
}

.border {
  transition: .25s;
}

.amount a {
  text-decoration: none;
  color: #0096c8;
  padding: 10% 0;
  flex: 1;
}

.amount {
  border: solid 1px lightgray;
  height: 50px;
  width: 200px;
  border-radius: 50px;
  display: flex;
  justify-content: space-around;
  align-items: baseline;
  text-align: center;
  overflow: hidden;
  margin: 2em auto 1em auto;
}

.amount span {
  flex: 2;
  color: #00aac8;
}

/***********
  BUTTON
***********/
#cart-btn {
  text-decoration: none;
  background: #00aac8;
  color: white;
  font-family: sans-serif;
  text-transform: uppercase;
  width: 150px;
  padding: 1em 2em;
  border-radius: 50px;
  display: block;
  margin: auto;
}
#cart-btn:hover {
  opacity: .8;
}

/**************************
SIZE PICKED HIGHLIGHT BORDER
***************************/
.size-picker .border.highlight {
  color: #78aac8;
  border-color: #78aac8;
}

/****************************
COLOR PICKED HIGHLIGHT BORDER
*****************************/
.border.black-border {
  border-color: black;
}

.border.red-border {
  border-color: red;
}

.border.navy-border {
  border-color: navy;
}

/*Downloaded from https://www.codeseek.co/-J0hn-/a-pen-by-john-oBBpgq */

$(document).ready(function(){
  var count = 1;
$('#total').text(count);
  
  function highlightColor(){
    if($(this).hasClass('black')){
      $('.border').removeClass('red-border navy-border');
      $(this).parent().addClass('black-border');
    } else if($(this).hasClass('red')){
      $('.border').removeClass('black-border navy-border');
              $(this).parent().addClass('red-border');
              } else if($(this).hasClass('navy')){
                $('.border').removeClass('red-border black-border');
                        $(this).parent().addClass('navy-border');
                        }
  }
  
  function highlightSize(){
    if($(this).hasClass('m')){
      $(this).prevAll().removeClass('highlight');
      $(this).nextAll().removeClass('highlight');
       $(this).addClass('highlight');
       } else if($(this).hasClass('l')){
                 $(this).prevAll().removeClass('highlight');
                 $(this).nextAll().removeClass('highlight');
                 $(this).addClass('highlight');
                 } else if($(this).hasClass('xl')){
                     $(this).prevAll().removeClass('highlight');
                    $(this).nextAll().removeClass('highlight');
                     $(this).addClass('highlight');
                 } else if($(this).hasClass('xxl')){
                           $(this).prevAll().removeClass('highlight');
                            $(this).nextAll().removeClass('highlight');
                             $(this).addClass('highlight');
                           }
  }
  
  // will highlight to it's corresponding color
  $('.color').on('click',highlightColor);
  
  // shirt size will hightlight when the user clicks
  $('.size').on('click',highlightSize);
  
  // increment/decrement
  $('.amount').on('click', 'a', function(e) {
    e.preventDefault();
    if ($(this).hasClass('fa-plus')) {
      if (count < 10) {
        count++;
        $('#total').text(count);
      }
    } else if ($(this).hasClass('fa-minus')) {
      if (count > 1) {
        count--;
        $('#total').text(count);
      }
    }
  });
});