@import url("https://use.typekit.net/muo8qtw.css");
* {
     margin: 0;
     padding: 0;
}

 body {
     font-family: "ingra", sans-serif;
     font-weight: 400;
     font-style: normal;
     text-align: left;
     font-size: 16px;
     color: #4a5b29;
}
 .container {
     max-width: auto;
     margin: 0 auto;
}
 h3 {
     color: #C3FF00 ;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.1em;
}
 h4 {
     font-family: "ingra", sans-serif;
     font-weight: 700;
     font-style: normal;
}
 .disabled h3 {
     color: #ecebcb;
     cursor: not-allowed;
}
 .button-active {
     color: #C3FF00;
     background-color: #ecebcb;
}
 nav {
     background-color: #ecebcb;
     color: #4a5b29;
     padding: 15px;
}
 nav .container {
     display: flex;
     justify-content: space-between;
     align-items: center;
}
 nav .container .logo {
     width: fit-content;
   padding: 0.25em;
}
 nav .container .login-button,
 nav .container .menu-button,
 .nav .container .contact-button {
     text-transform: uppercase;
     letter-spacing: 0.1em;
     padding: 1em 1.25em;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     cursor: pointer;
}
 .nav-menu {
     background-color: #ecebcb;
     color: #4a5b29;
     display: flex;
     justify-content: center;
}
 .nav-menu .container {
     padding: 1.5em;
     display: flex;
}
 .nav-menu .container ul {
     list-style: none;
}
 .nav-menu .container ul li {
     padding: 0.25em 2em;
}

.active {
     background-color: #d9e02d;
     color: #303030;
}

 .nav-menu .container ul li:first-child {
     text-transform: uppercase;
     color: #4a5b29;
     letter-spacing: 0.05em;
}
 .hide {
     display: none;
}
 .login-form, .contact-form {
     background-color: #ecebcb;
     padding: 1em 0 0;
     color: #4a5b29;
     display: none;
}
 .login-form .container, .contact-form .container {
     padding: 0 0.5em;
}
 .login-form h4, .contact-form h4 {
     font-weight: 400;
}
 .login-form input, .contact-form input {
     width: calc(100% - 1em);
     border: none;
     height: 2em;
     margin: 0.5em 0;
     font-size: 1em;
     padding: 0 0.5em;
}
 .login-form .sign-in-button, .contact-form .submit-button {
     background-color:#4a5b29 ;
     color: #ecebcb;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     text-align: center;
     width: 100%;
     height: 2.5em;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     cursor: pointer;
}
 .product-card {
     margin: 1em 0;
}


 .product-card .Mystery3, .product-card .Mystery1, .product-card .Mystery2, .product-card .Galaxy, .product-card .Sakura,  .product-card .Dolphin{
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     height: 400px;
     transition: 0.2s;
}


 .product-card .Mystery1 {
     background-image: url("../img/green1.jpg");
}
 .product-card .Mystery2 {
     background-image: url("../img/blue2.jpg");
}
 .product-card .Mystery3 {
     background-image: url("../img/pink1.jpg");
}
.product-card .Galaxy {
     background-image: url("../img/green2.jpg");
}
 .product-card .Sakura {
     background-image: url("../img/blue1.jpg");
}
 .product-card .Dolphin {
     background-image: url("../img/pink2.jpg");
}


 .product-card .photo-active {
     background-size: 110%;
     transition: 0.2s;
}
 .product-card .product-details {
     margin-top: -5px;
     background-color: #EFEFEF;
     display: flex;
     justify-content: space-between;
}
 .product-card .product-details h4, .product-card .product-details p {
     padding: 0.7em 1.25em;
}
 .product-card .product-details div {
     display: flex;

}
 .product-card .product-details .more-details-button {
     background-color: #4a5b29;
     padding: 0.75em 1.25em;
     cursor: pointer;
     
     transition: 0.1s;
}
 .product-card .product-details .more-details-button img {
     position: relative;
     left: 0.1em;
}
 .product-card .product-details .more-details-button .rotate {
     transition: 0.1s;
     transform: rotate(90deg);
}
 .product-card .toys-details {
     display: none;
     background-color: #4a5b29;
     color: #EFEFEF;
}
 .product-card .toys-details .active {
     background-color: #d9e02d;
     color: #303030;
}
 .product-card .Material-chart, .product-card p {
     padding: 1em 1.25em;
}
 .product-card .Material-chart ul, .product-card p ul {
     list-style: none;
     display: flex;
     justify-content: space-around;
     margin-top: 1em;
}
 .product-card .Material-chart ul li, .product-card p ul li {
     padding: 0.5em;
     background-color: #303030;
     width: 100%;
     text-align: center;
     margin-right: 2px;
     cursor: pointer;
}
 .product-card .buy-now-button {
     height: 60px;
     background-color: #303030;
     text-align: center;
     padding: 0.75em;
     cursor: pointer;
}
 .shopping-cart {
     background-color: #171717;
     position: fixed;
     bottom: 0;
     z-index: 99;
     width: 100%;
     box-shadow: 2px 0 4px 0 rgba(0, 0, 0, 0.5);
     display: none;
     height: 3.5em;
}
 .shopping-cart .container {
     display: flex;
     justify-content: space-between;
     padding: 1em;
}
 .shopping-cart .container .cart {
     display: flex;
}
 .shopping-cart .container .cart object {
     margin-right: 0.75em;
}
 footer {
     color: #EFEFEF;
     background-color: #303030;
     margin-top: 0;
     padding: 2em 0.5em;
}
 footer .container {
     display: flex;
     justify-content: space-between;
}
 footer .container object {
     width: 4.5em;
}
@media only screen and (min-width: 480px) and (max-width:320px) {
body{
     font-size: 12px;
     display: inline-block;
     width: 100%;
}
h3 {
     font-size: 14px;
}


.product-card .Mystery3, .product-card .Mystery1, .product-card .Mystery2, .product-card .Galaxy, .product-card .Sakura,  .product-card .Dolphin{
     height: 300px;
}
.product-card .buy-now-button {
     height: 30px;
}
.product-card .Material-chart {
     padding: 1em 1.25em;
}

}
@media only screen and (min-width:321px) and (max-width:768px) {
     .product-card .Mystery3, .product-card .Mystery1, .product-card .Mystery2, .product-card .Galaxy, .product-card .Sakura,  .product-card .Dolphin{
          height: 200px;
     }
     body{
          font-size: 9px;
     }
     h4 {
          font-size: 14px;
     }
     h3 {
          font-size: 14px;
     }
     ul {
          padding-inline-start: 10px;
     }
     .product-card .buy-now-button {
          height: 30px;
     }
}