*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--white: #fff;--black: #000;--text-dark: #9e9e9e;--bg-color: #151f2c;--light-green: #27981d;--dark-blue: #1c5e5b;--light-blue: #00fff2;--light-red: #be4040}html{font-family:sans-serif;font-size:10px;color:var(--text-dark)}ul li{list-style:none}a{text-decoration:none;font-weight:600;color:var(--text-dark)}button{border:0;background-color:transparent;color:var(--text-dark)}#app{background-color:var(--bg-color);width:100%;min-height:100vh}.string-validation{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr;justify-items:center}.user-list-data{display:flex;flex-direction:column;gap:1rem 0}.user-element-data{display:flex;justify-content:space-between}.user-element-data__title{font-size:2rem;justify-self:flex-start}.api-interaction{display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;grid-area:interaction;gap:3rem 0}@media (width >= 1024px){.api-interaction{gap:0}}.api-interaction__title{font-size:3rem}.api-interaction__showButton{margin-top:5rem;padding:.7rem 2rem;background-color:transparent;border:1px solid var(--text-dark);border-radius:1rem}@media (width >= 1024px){.api-interaction__showButton{cursor:pointer;font-weight:600;transition:.2s ease-in-out}.api-interaction__showButton:hover{background-color:var(--text-dark);color:var(--bg-color);transition:.2s ease-in-out}}.images-list{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}@keyframes imageAnimation{0%{scale:0;opacity:0}75%{scale:0;opacity:0}to{scale:1;opacity:1}}.image0{animation:imageAnimation .5s ease-in-out}.image1{animation:imageAnimation .7s ease-in-out}.image2{animation:imageAnimation .9s ease-in-out}.image3{animation:imageAnimation 1.1s ease-in-out}.image4{animation:imageAnimation 1.3s ease-in-out}.image5{animation:imageAnimation 1.5s ease-in-out}.image6{animation:imageAnimation 1.7s ease-in-out}.image7{animation:imageAnimation 1.9s ease-in-out}.image8{animation:imageAnimation 2.1s ease-in-out}.image9{animation:imageAnimation 2.3s ease-in-out}.image10{animation:imageAnimation 2.5s ease-in-out}.image-wrapper__img{width:70px;height:70px}#shopCatalog{border:1px solid var(--text-dark);margin:0 2rem;padding:1.5rem 0rem}.availability-container{margin-top:4rem;text-align:center}.availability-container label{font-size:2rem}.user-choice-availability{display:flex;justify-content:center;gap:0 2rem;margin-top:2rem}.choice-box{display:flex;flex-direction:column;gap:.5rem 0}.choice-box label{font-size:1.5rem}@media (width >= 1024px){.choice-box input{cursor:pointer}}.show-product-list{width:min(15rem,100%);margin-bottom:3rem}.error-message{display:none;padding-top:3rem;color:#e64545}.availability-images{align-items:flex-start;margin-top:4rem}.product-list{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;height:43rem;overflow:auto}.showProducts{margin-top:2rem;padding:.5rem;font-size:1.5rem;color:var(--black);background-color:var(--text-dark);border-radius:.5rem;transition:.2s ease-in-out}@media (width >= 1024px){.showProducts:hover{cursor:pointer;background-color:#7e7d7d;transition:.2s ease-in-out}}.product-element{display:grid;grid-template-areas:"title delete" "price price" "status checkButton";grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;align-items:center;gap:2rem 1rem;width:30rem;height:150px;padding:1rem;font-size:1rem;border:1px solid var(--text-dark)}.product-element__title{font-size:2em;text-align:start;grid-area:title;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.product-element__delete{grid-area:delete;justify-self:flex-end;padding:.5rem 1rem;font-size:1.5em;background-color:#8d2525;border-radius:.5rem;transition:.2s ease-in-out}@media (width >= 1024px){.product-element__delete:hover{cursor:pointer;background-color:#b12f2f;transition:.2s ease-in-out}}.product-element__price{font-size:2em;grid-area:price}.product-element__status{display:none;font-size:1.4em;grid-area:status}.product-element__checkAvailableButton{grid-area:checkButton;padding:.5rem;font-size:1.4em;color:var(--black);background-color:var(--text-dark);border-radius:.5rem;transition:.2s ease-in-out}@media (width >= 1024px){.product-element__checkAvailableButton:hover{cursor:pointer;background-color:#7e7d7d;transition:.2s ease-in-out}}.available,.unavailable{display:block}.available{color:#1eb343}.unavailable{color:#dd3b1e}.test-content{display:flex;flex-direction:column;gap:4rem 10rem;padding:10rem 0;border-bottom:1px solid var(--text-dark)}@media (width >= 1024px){.test-content{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:1fr 3fr 3fr 1fr;grid-template-areas:"title title" "interaction images" "result images" "link link"}}.test-header{grid-area:title;font-size:2rem;text-align:center}@media (width >= 1024px){.test-header{align-self:flex-end}}.form{display:flex;flex-direction:column;grid-area:interaction}.form__box{display:flex;flex-direction:column;align-self:center;gap:.7rem;margin-top:1.5rem;width:min(40rem,80%);font-size:1.5rem}.form__box input{background-color:var(--text-dark);border:0;padding:.5rem 1rem;border-radius:.5rem;outline:none}.form__box input:focus{background-color:#fff}.form__button{align-self:center;margin-top:5rem;padding:.7rem;width:10rem;background-color:transparent;border:1px solid var(--text-dark);border-radius:1rem}@media (width >= 1024px){.form__button{cursor:pointer;font-weight:600;transition:.2s ease-in-out}.form__button:hover{background-color:var(--text-dark);color:var(--bg-color);transition:.2s ease-in-out}}.form .string-bottom{width:13rem;align-items:flex-end;grid-column:1/3;grid-row:3/-2}.result-container{grid-area:result;align-self:center;text-align:center;font-size:2rem;width:min(70%,70rem)}.result-container__title{font-size:3rem}.result-container__result{margin-top:3rem}@media (width >= 1024px){.result-container{margin:0 auto}}.test-images{grid-area:images;display:flex;flex-direction:column;align-items:center;gap:4rem 0}.test-images__img{width:95%;object-fit:cover;border:1px solid var(--light-red)}@media (width >= 1024px){.test-images{display:grid;flex-direction:row;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.test-images__img{object-fit:fill;height:20rem}}.test-link{position:relative;grid-area:link;align-self:center;margin-top:2rem;font-size:2rem}@media (width >= 1024px){.test-link{width:25rem;justify-self:center;text-align:center}.test-link:before{content:"";position:absolute;display:block;bottom:-.5rem;left:50%;transform:translate(-50%);width:0;height:2px;background-color:var(--light-red);transition:width .3s ease-in-out}.test-link:hover:before{width:25rem;transition:.3s ease-in-out}}