style.css

html {
  scroll-behavior: smooth;
  height: 100%;
  width: 100%;
}
body {
  margin: 0px;
  color: #222831;
  font-family: 'didact gothic';
  background-image: url('imgs/wallpaper/wallpaper.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
@media screen and (max-width: 500px){
  #left {
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
  }
  #title {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #end-left {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #shop-list {
    width: 100%;
  }
  .shop-line {
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .shop-item {
    width: 90%;
    border-radius: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background: #222831;
  }
  .shop-item1 {
    background: white;
    width: 100%;
    border-radius: 19px;
  }
  .shop-item1-img {
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .shop-item1-info {
    margin: auto;
    width: 200px;
    height: 200px;
  }
  .shop-item1-title {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 70px;
  }
  .shop-item1-desc {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .shop-item1-price {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .shop-item-icon {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .shop-item-plus-minus {
    float: left;
    width: 33%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .shop-item-plus-minus-hover {
    cursor: pointer;
    transition: 0.2s;
    border-radius: 10px;
    width: 75%;
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .shop-item-plus-minus-hover img {
    transition: 0.2s;
    height: 40px;
    width: 40px;
  }
  .shop-item-plus-minus-hover:hover {
    background: #31363F;
  }
  .shop-item-plus-minus-hover:hover img{
    width: 48px;
    height: 48px;
  }
  .shop-item-plus-minus-down {
    float: left;
    width: 33%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .shop-item-plus-minus-hover-down {
    cursor: pointer;
    transition: 0.2s;
    border-radius: 10px;
    width: 75%;
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .shop-item-plus-minus-hover-down img {
    transition: 0.2s;
    height: 40px;
    width: 40px;
  }
  .shop-item-plus-minus-hover-down:hover {
    background: #31363F;
  }
  .shop-item-plus-minus-hover-down:hover img{
    width: 48px;
    height: 48px;
  }
  #right-cart {
    width: 100%;
    background: #f1f1f1;
  }
  #right-cart-title {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #right-cart-tot {
    width: 100%;
    display: flex;
    justify-content:center;
    align-items: center;
  }
  #right-cart-content {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #right-cart-content1 {
    overflow: auto;
    width: 85%;
    background: white;
    border-radius: 20px;
  }
  .right-cart-content-container {
    width: 100%;
    height: 128px;
    display: none;
    justify-content: center;
    align-items: center;
  }
  .right-cart-content-item {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    height: 100px;
    background: #222831;
    border-radius: 10px;
  }
  .right-cart-content-item1 {
    width: 75%;
    height: 100px;
    background: white;
    border-radius: 9px;
  }
  .right-cart-content-top {
    width: 100%;
    height: 33px;
  }
  .right-cart-content-name {
    width: 50%;
    height: 33px;
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
  }
  .right-cart-content-quantity {
    width: 50%;
    height: 33px;
    display: flex;
    justify-content: center;
    align-items: center;
    float: right;
  }
  .right-cart-content-bottom {
    width: 100%;
    height: 67px;
  }
  .right-cart-content-img {
    width: 50%;
    height: 67px;
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
  }
  .right-cart-content-price {
    width: 50%;
    height: 67px;
    display: flex;
    justify-content: center;
    align-items: center;
    float: right;
  }
  .right-cart-content-icon {
    width: 25%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .right-cart-content-icon-hover {
    transition: 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 75%;
    height: 75px;
    border-radius: 5px;
  }
  .right-cart-content-icon-hover img {
    width: 32px;
    height: 32px;
    transition: 0.2s;
  }
  .right-cart-content-icon-hover:hover {
    background: #31363F;
  }
  .right-cart-content-icon-hover:hover img {
    height: 40px;
    width: 40px;
  }
  #end-right {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}









@media screen and (min-width: 501px){
  #left {
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
  }
  #title {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #end-left {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #shop-list {
    width: 100%;
  }
  .shop-line {
    width: 100%;
    height: 280px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .shop-item {
    width: 90%;
    height: 240px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background: #222831;
  }
  .shop-item1 {
    display: flex;
    align-items: center;
    background: white;
    width: 85%;
    height: 240px;
    border-radius: 19px;
  }
  .shop-item1-img {
    width: 240px;
    height: 240px;
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
  }
  .shop-item1-info {
    width: 240px;
    height: 240px;
  }
  .shop-item1-title {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 80px;
  }
  .shop-item1-desc {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .shop-item1-price {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .shop-item-icon {
    width: 15%;
    height: 240px;
  }
  .shop-item-plus-minus {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .shop-item-plus-minus-hover {
    cursor: pointer;
    transition: 0.2s;
    border-radius: 10px;
    width: 75%;
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .shop-item-plus-minus-hover img {
    transition: 0.2s;
    height: 40px;
    width: 40px;
  }
  .shop-item-plus-minus-hover:hover {
    background: #31363F;
  }
  .shop-item-plus-minus-hover:hover img{
    width: 48px;
    height: 48px;
  }
  .shop-item-plus-minus-down {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .shop-item-plus-minus-hover-down {
    cursor: pointer;
    transition: 0.2s;
    border-radius: 10px;
    width: 75%;
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .shop-item-plus-minus-hover-down img {
    transition: 0.2s;
    height: 40px;
    width: 40px;
  }
  .shop-item-plus-minus-hover-down:hover {
    background: #31363F;
  }
  .shop-item-plus-minus-hover-down:hover img{
    width: 48px;
    height: 48px;
  }
  #right-cart {
    width: 100%;
    background: #f1f1f1;
  }
  #right-cart-title {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #right-cart-tot {
    width: 100%;
    display: flex;
    justify-content:center;
    align-items: center;
  }
  #right-cart-content {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #right-cart-content1 {
    overflow: auto;
    width: 85%;
    background: white;
    border-radius: 20px;
  }
  .right-cart-content-container {
    width: 100%;
    height: 128px;
    display: none;
    justify-content: center;
    align-items: center;
  }
  .right-cart-content-item {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    height: 100px;
    background: #222831;
    border-radius: 10px;
  }
  .right-cart-content-item1 {
    width: 75%;
    height: 100px;
    background: white;
    border-radius: 9px;
  }
  .right-cart-content-top {
    width: 100%;
    height: 33px;
  }
  .right-cart-content-name {
    width: 50%;
    height: 33px;
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
  }
  .right-cart-content-quantity {
    width: 50%;
    height: 33px;
    display: flex;
    justify-content: center;
    align-items: center;
    float: right;
  }
  .right-cart-content-bottom {
    width: 100%;
    height: 67px;
  }
  .right-cart-content-img {
    width: 50%;
    height: 67px;
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
  }
  .right-cart-content-price {
    width: 50%;
    height: 67px;
    display: flex;
    justify-content: center;
    align-items: center;
    float: right;
  }
  .right-cart-content-icon {
    width: 25%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .right-cart-content-icon-hover {
    transition: 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 75%;
    height: 75px;
    border-radius: 5px;
  }
  .right-cart-content-icon-hover img {
    width: 32px;
    height: 32px;
    transition: 0.2s;
  }
  .right-cart-content-icon-hover:hover {
    background: #31363F;
  }
  .right-cart-content-icon-hover:hover img {
    height: 40px;
    width: 40px;
  }
  #end-right {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}









@media screen and (min-width: 1001px){
  #left {
    background: rgba(0, 0, 0, 0.3);
    float: left;
    width: 75%;
    height: 100vh;
  }
  #title {
    width: 100%;
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #end-left {
    height: 10vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #shop-list {
    overflow: auto;
    height: 80vh;
    width: 100%;
  }
  .shop-line {
    width: 100%;
    height: 256px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .shop-item {
    width: 90%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background: #222831;
  }
  .shop-item1 {
    display: flex;
    align-items: center;
    background: white;
    width: 85%;
    height: 200px;
    border-radius: 19px;
  }
  .shop-item1-img {
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
  }
  .shop-item1-info {
    width: 200px;
    height: 200px;
  }
  .shop-item1-title {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 70px;
  }
  .shop-item1-desc {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .shop-item1-price {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .shop-item-icon {
    width: 15%;
    height: 200px;
  }
  .shop-item-plus-minus {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .shop-item-plus-minus-down {
    display: none;
  }
  .shop-item-plus-minus-hover {
    cursor: pointer;
    transition: 0.2s;
    border-radius: 10px;
    width: 75%;
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .shop-item-plus-minus-hover img {
    transition: 0.2s;
    height: 40px;
    width: 40px;
  }
  .shop-item-plus-minus-hover:hover {
    background: #31363F;
  }
  .shop-item-plus-minus-hover:hover img{
    width: 48px;
    height: 48px;
  }
  #right-cart {
    float: right;
    height: 100vh;
    width: 25%;
    background: #f1f1f1;
  }
  #right-cart-title {
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #right-cart-tot {
    height: 20vh;
    width: 100%;
    display: flex;
    justify-content:center;
    align-items: center;
  }
  #right-cart-content {
    overflow: auto;
    width: 100%;
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #right-cart-content1 {
    width: 85%;
    height: 55vh;
    background: white;
    border-radius: 20px;
  }
  .right-cart-content-container {
    width: 100%;
    height: 128px;
    display: none;
    justify-content: center;
    align-items: center;
  }
  .right-cart-content-item {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    height: 100px;
    background: #222831;
    border-radius: 10px;
  }
  .right-cart-content-item1 {
    width: 75%;
    height: 100px;
    background: white;
    border-radius: 9px;
  }
  .right-cart-content-top {
    width: 100%;
    height: 33px;
  }
  .right-cart-content-name {
    width: 50%;
    height: 33px;
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
  }
  .right-cart-content-quantity {
    width: 50%;
    height: 33px;
    display: flex;
    justify-content: center;
    align-items: center;
    float: right;
  }
  .right-cart-content-bottom {
    width: 100%;
    height: 67px;
  }
  .right-cart-content-img {
    width: 50%;
    height: 67px;
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
  }
  .right-cart-content-price {
    width: 50%;
    height: 67px;
    display: flex;
    justify-content: center;
    align-items: center;
    float: right;
  }
  .right-cart-content-icon {
    width: 25%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .right-cart-content-icon-hover {
    transition: 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 75%;
    height: 75px;
    border-radius: 5px;
  }
  .right-cart-content-icon-hover img {
    width: 32px;
    height: 32px;
    transition: 0.2s;
  }
  .right-cart-content-icon-hover:hover {
    background: #31363F;
  }
  .right-cart-content-icon-hover:hover img {
    height: 40px;
    width: 40px;
  }
  #end-right {
    width: 100%;
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .cart-down {
    display: none;
  }
}