:root {
  --salt: #f3fafd;
}

.master {
  margin: 0 0 0 0;
  padding: 0;
  background-color: #222222;
  color: var(--salt, white);
  overflow-x: hidden;
}

#nav-bar {
  background-color: black !important;
  position: fixed;
  width: 100%;
  display: flex;
  top: 0;
  z-index: 2;
}

#ss-logo {
  color: blue;
  font-size: 1.5rem;
  font-weight: bold;
  animation: rotateAnimation 5s linear infinite;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  margin-left: 0.5rem;
  display: flex;
}

@keyframes rotateAnimation {
  from {
    transform: rotateY(0deg);
  }

  to {
    transform: rotateY(360deg);
  }
}

.nav-bar-items {
  font-size: 1.25rem;
  list-style: none;
}

.nav-bar-item {
  text-decoration: none;
  color: var(--salt, white);
  display: block;
  cursor: pointer;
  padding: initial;
  margin-left: 1.5rem;
}

.nav-bar-item:hover {
  color: lightblue;
  transition: 0.5s;
}

#nav-menu {
  color: var(--salt, white);
}

.dropdown-menu {
  background-color: black !important;
}

.dropdown-item {
  color: var(--salt, white) !important;
}

.dropdown-item:hover {
  background-color: black !important;
  color: lightblue !important;
}

#shopping-cart {
  display: none;
}

#sign-out {
  cursor: pointer;
}

#nav-cart-count {
  font-size: 1.1rem;
  margin-left: 0.25rem;
}

#main {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 6rem;
}

.search-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1rem;
  max-width: 40rem !important;
}

#search-bar {
  grid-column: 1/5;
  grid-row: 1/2;
}

#search-button {
  grid-column: 5/6;
  grid-row: 1/3
}

#gender-list {
  grid-column: 1/2;
  grid-row: 2/3
}

#category-list {
  grid-column: 2/3;
  grid-row: 2/3
}

#min-price {
  grid-column: 3/4;
  grid-row: 2/3
}

#max-price {
  grid-column: 4/5;
  grid-row: 2/3
}

#shopping-items,
.shopping-history {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5rem;
  list-style: none;
}

#shopping-items {
  margin-top: 5rem;
}

.shopping-grid-item {
  margin-left: auto;
  margin-right: auto;
  max-width: 19rem;
  border: 1px solid rgb(0, 82, 102) !important;
  box-shadow: 3px 3px rgb(0, 82, 102);
}

.card-body {
  display: grid;
}

.btn-control {
  width: fit-content;
  margin-left: auto;
}

.card-title {
  font-weight: bold;
  font-size: 1.2rem;
}

.card-img-top {
  width: 17rem !important;
  height: 20rem !important;
}

#footer {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 3rem;
}

.profile-link {
  cursor: pointer;
  color: var(--salt, white);
  text-decoration: none;
  margin-top: 0.2rem;
}

.profile-link:hover {
  color: red;
}

/* registration and log in pages */

#registration-section-content,
#payment-section-content,
#profile-section {
  border: 2px solid red;
  border-radius: 30px;
  box-shadow: 0px 0px 12px palevioletred;
  padding: 2.5rem 3rem 2.5rem 3rem;
  width: 1000px;
}

.form-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-element-package,
.account-element-package {
  display: grid;
  grid-template-columns: 1fr 4fr;
  font-size: 1.1rem;
}

.account-element-package {
  margin-top: 2rem;
}

.change-password-button-section {
  display: grid;
  grid-template-columns: 1fr;
  font-size: 1.1rem;
  margin-top: 2rem;
}

.secondary-title {
  margin-bottom: 2rem;
  text-align: center;
  font-size: 2rem;
}

#email-error,
#password-error,
#current-password-error,
#new-password-error,
#re-new-password-error,
#card-name-error,
#card-number-error,
#card-expiration-error,
#card-cvc-error,
#first-name-error,
#last-name-error,
#address-error,
#date-of-birth-error {
  color: orange;
  display: none;
  grid-column: 2/3;
}

/* payment page */

#payment-section-content {
  display: none;
}

#cart-contents,
#cart-details-list,
.receipt {
  margin-top: 3rem;
}

.receipt-transaction,
.receipt-item {
  font-size: 1.6rem;
}

.receipt-item {
  display: flex;
  justify-content: space-between;
}

.receipt-total {
  margin-top: 1rem;
}

/* history */

#history-list {
  list-style: none;
}

.shopping-history,
.transaction-header,
.transaction-total-amount {
  margin-top: 3rem;
}

.transaction-header,
.transaction-total-amount {
  font-size: 1.6rem;
}

.transaction-total-amount {
  text-align: right;
}

/* user account */

#change-password {
  margin-top: 2rem;
  box-shadow: 2px 2px #8B635C;
}

#password-change-success {
  margin-left: auto;
  margin-top: 1rem;
  color: green;
  display: none;
}

/* media control */

@media(max-width: 991px) {
  .search-form {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  #search-bar {
    grid-column: 1/2;
    grid-row: 1/2;
  }

  #search-button {
    grid-column: 1/2;
    grid-row: 6/7
  }

  #gender-list {
    grid-column: 1/2;
    grid-row: 2/3
  }

  #category-list {
    grid-column: 1/2;
    grid-row: 3/4
  }

  #min-price {
    grid-column: 1/2;
    grid-row: 4/5
  }

  #max-price {
    grid-column: 1/2;
    grid-row: 5/6
  }

  #shopping-items,
  .shopping-history {
    grid-template-columns: 1fr 1fr;
  }
}

@media(max-width: 820px) {

  #shopping-items,
  .shopping-history,
  #history-list {
    grid-template-columns: 1fr;
    padding: 0;
  }
}

@media(max-width: 767px) {

  .form-element-package,
  .account-element-package,
  .change-password-button-section {
    grid-template-columns: 1fr;
  }

  #email-error,
  #password-error,
  #current-password-error,
  #new-password-error,
  #re-new-password-error,
  #card-name-error,
  #card-number-error,
  #card-expiration-error,
  #card-cvc-error,
  #first-name-error,
  #last-name-error,
  #address-error,
  #date-of-birth-error {
    grid-column: 1/2;
  }
}

@media(max-width: 575px) {

  #registration-section-content,
  #payment-section-content,
  #profile-section {
    max-width: 500px;
  }
}

@media(max-width: 500px) {

  #registration-section-content,
  #payment-section-content,
  #profile-section {
    max-width: 400px;
  }
}

@media(max-width: 400px) {

  #registration-section-content,
  #payment-section-content,
  #profile-section {
    max-width: 300px;
  }

  .secondary-title {
    font-size: 1.4rem;
  }
}

@media(max-width: 300px) {

  #registration-section-content,
  #payment-section-content,
  #profile-section {
    max-width: 200px;
  }

  #profile-section {
    border: 0px none transparent;
    border-radius: 0px;
    box-shadow: 0px 0px 0px transparent;
    padding: 0;
  }

  #payment-section-content {
    padding: 1rem 0.5rem;
  }

  #button-payment {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
  }
}