style.css

@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");

:root {
  /* font-family */
  --main-ff: Inter, sans-serif, -apple-system, BlinkMacSystemFont,
    "Apple Color Emoji", "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol";

  /* colors */
  --cart-bg-color: #f3f1ee;
  --body-bg-color: #efefe7;
  --btn-bg-color: #000000;
  --btn-second-bg-color: #50eda1;
  --paypal-bg-color: #ffd403;
  --twitter-bg-color: #01aced;
  --facebook-bg-color: #3b5794;
  --gs-red: #8f0421;
  --gs-yellow: #fdac18;
}

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

body {
  font-family: var(--main-ff);
}

/* ---------------------------------- */
/*               NAVBAR               */
/* ---------------------------------- */

.nav {
  padding: 1rem 3rem;
  display: flex;
  justify-content: space-between;
  box-shadow: 2px 1px 8px black;
}

.nav .left {
  text-decoration: none;
  font-size: 0.8rem;
}

.nav .left:hover {
  color: var(--gs-yellow) !important;
  transition-duration: 0.3s;
}

.header .gs-logo,
.header .gs-store {
  height: 100px;
}

.right .gs-user {
  height: 55px;
  margin-top: 15px;
  width: 100%;
}

h2 {
  margin-left: 3rem !important;
}

/* ---------------------------------- */
/*                MAIN                */
/* ---------------------------------- */

.offer {
  color: var(--gs-yellow);
  background-color: var(--gs-red);
  text-align: center;
  font-size: 1rem;
  padding: 0.2rem 0 0.2rem 3rem;
  margin-top: 1rem;
}

.main {
  display: flex;
  justify-content: center;
}

h2 {
  margin-top: 1.5rem;
}

/* ---------------------------------- */
/*                form                */
/* ---------------------------------- */

.form {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  order: -1;
}

.contact label,
.shipping label {
  margin: 0.5rem 0 0.3rem 0;
}

.form input {
  outline: none;
}

.form .contact {
  margin-bottom: 2rem;
}

.contact input,
.shipping input,
.form select {
  border: 1px solid gray;
  border-radius: 5px;
  height: 40px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.form .shipping {
  margin-bottom: 2rem;
}

.location .country {
  margin-right: 1rem;
}

.input-with-icon {
  position: relative;
  width: 100%;
}
.input-with-icon input {
  padding-left: 35px; /* Space for Icons*/
  padding-right: 10px;
  width: 100%;
}
.input-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.opacity {
  opacity: 0.6;
}

.continue {
  text-align: right;
}

.btn-continue {
  background-color: var(--gs-yellow);
  color: white;
  padding: 0.3rem 0.5rem;
}

.btn-continue:hover {
  color: var(--gs-red);
  transition-duration: 0.3s;
}

/* ---------------------------------- */
/*              checkout              */
/* ---------------------------------- */

.checkout {
  background-color: var(--body-bg-color);
  padding: 2rem 2rem 0 0;
  border-radius: 10px;
  font-size: 0.8rem;
  height: 100%;
  order: 1;
  margin-left: 1rem;
}

.checkout .item {
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--gs-red);
}

.checkout img {
  height: 80px;
  width: 75px;
  border-radius: 10px;
}

.checkout .item-info {
  margin-left: 1rem;
  line-height: 0.5rem;
}

.checkout .item-info .item-name {
  font-size: 0.8rem;
}

.checkout .size {
  margin-top: 1rem !important;
}

.checkout .prices #price {
  color: var(--gs-yellow) !important;
}

.item-count {
  width: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.item-count .minus,
.item-count .plus {
  background-color: lightgray;
  padding: 0 0.5rem;
  border-radius: 5px;
}

.item-remove i:hover {
  opacity: 0.7;
  cursor: pointer;
}

.summary {
  padding-left: 2rem;
}

.summary p {
  border-bottom: 1px solid lightgrey;
  display: flex;
  justify-content: space-between;
  padding: 0 0.5rem;
}

.summary .total {
  font-size: larger;
  font-weight: bolder;
}

/* ---------------------------------- */
/*            RESPONSIVITY            */
/* ---------------------------------- */

@media only screen and (max-width: 374px) {
  body {
    display: none;
  }
}

@media only screen and (max-width: 550px) {
  .right .gs-user,
  .right p {
    display: none;
  }

  .header {
    margin: auto !important;
  }
}

@media only screen and (max-width: 640px) {
  .nav {
    padding: 0 2rem;
  }

  .nav .left {
    display: none;
  }

  .header .gs-logo,
  .header .gs-store {
    height: 60px !important;
  }

  .right .gs-user {
    height: 40px !important;
    margin-top: 20px !important;
    width: 100%;
  }

  .right p {
    font-size: 10px !important;
    margin-top: 0.1rem;
  }

  .offer {
    padding: 0.2rem 0;
  }

  h2 {
    margin-left: 0 !important;
  }

  .main {
    display: block;
  }

  .main > .form {
    margin-top: 2rem;
  }

  .memory {
    display: flex;
    justify-content: start;
    align-items: center;
  }

  .memory label {
    margin-left: 0.5rem;
  }
}

@media only screen and (max-width: 768px) {
  .nav {
    padding: 0.5rem 2rem;
  }

  .nav .left {
    font-size: 0.7rem;
  }

  .header .gs-logo,
  .header .gs-store {
    height: 80px;
  }

  .right .gs-user {
    height: 45px;
    margin-top: 15px;
    width: 100%;
  }

  .right p {
    font-size: 0.6rem;
    margin-top: 0.1rem;
  }

  .location {
    display: block !important;
  }

  .location input,
  .location label,
  .location select {
    margin-top: 0.5rem;
  }

  .postal-code i {
    top: 23px;
  }

  .form input,
  .form select {
    height: 30px;
  }

  .memory {
    display: flex;
    justify-content: start;
    align-items: center;
  }

  .memory label {
    font-size: 0.7rem;
    margin-left: 0.5rem;
  }
}

@media only screen and (max-width: 992px) {
  .right .gs-user {
    height: 60px;
    margin-top: 15px;
    width: 100%;
  }

  .right p {
    font-size: 0.8rem;
    margin-top: 0.1rem;
  }

  .item-count .minus,
  .item-count .plus {
    padding: 0.2rem 0.3rem;
  }

  .checkout .item {
    margin-bottom: 0.5rem;
  }
}

@media only screen and (min-width: 992px) {
  .checkout {
    font-size: 1rem !important;
  }

  .checkout .item-info {
    line-height: 1rem !important;
  }

  .checkout img {
    height: 150px !important;
    width: 150px !important;
  }

  .checkout .item-info .item-name {
    font-size: 1rem !important;
  }
}

@media only screen and (max-width: 1200px) {
  .right .gs-user {
    height: 60px;
    margin-top: 15px;
    width: 100%;
  }

  .right p {
    font-size: 0.8rem;
    margin-top: 0.1rem;
  }
}

@media only screen and (min-width: 1200px) {
  h2 {
    margin: 2rem 0 !important;
  }

  .checkout {
    font-size: 1rem !important;
  }

  .checkout img {
    height: 200px !important;
    width: 200px !important;
  }

  .checkout .item-info .item-name {
    font-size: 1rem !important;
  }

  .right .gs-user {
    height: 60px;
    margin-top: 15px;
    width: 100%;
  }

  .right p {
    font-size: 0.8rem;
    margin-top: 0.1rem;
  }

  .main > .form {
    margin-right: 3rem;
  }

  .main > .checkout {
    margin-left: 3rem;
  }

  .form label {
    font-size: larger;
  }

  .form h4 {
    font-size: 1.5rem;
  }
}