p.price{font-size:25px;font-size:1.7rem;font-weight:700;color:#af0000;margin:.5rem 0;display:inline-block}p.price span{font-size:20px}button.buy-button{background-color:#af0000;color:#fff;padding:.6rem 1.2rem;border:none;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:700;transition:background-color .3s ease,transform .2s ease}button.buy-button:hover{background-color:#ffb6b6;color:#000;transform:translateY(-2px)}button.buy-button:active{transform:translateY(0);background-color:#52da52;transition:background-color .1s ease}section.home{--accent-color: #ffabab;display:flex}section.home div.image{flex:1 1 40%;max-width:500px;background-image:url(/assets/rainforest-BT-qSuLz.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;align-items:center;justify-content:center}section.home div.image img{padding:20px;max-width:calc(100% - 40px);height:auto;display:block}section.home .content{flex:1 1 60%;max-width:800px;margin:0 auto;padding:3rem 1rem;text-align:center;color:#222}section.home .content p:first-of-type{font-family:Brush Script MT,cursive,Segoe Script,sans-serif;font-size:1.1rem;font-style:italic;color:#555;margin-bottom:.5rem}section.home .content hr{width:60px;margin:1rem auto 2rem;border:none;border-top:2px solid var(--accent-color)}section.home .content h1{font-size:3rem;font-weight:800;margin:1rem 0;line-height:1.2;color:#111}section.home .content p{font-size:1rem;line-height:1.6;color:#444;margin:1rem 0 2rem}section.home .content button{background-color:var(--accent-color);color:#222;font-size:1.1rem;font-weight:600;padding:.75rem 1.5rem;border:none;border-radius:8px;cursor:pointer;transition:transform .2s ease,background-color .2s ease}section.home .content button:hover{background-color:#f9844a;transform:scale(1.05)}section.home article{margin-top:30px;background:#fff;border:1px solid #e0e0e0;border-radius:16px;box-shadow:0 4px 12px #0000001a;padding:2rem}section.home article h2{margin-top:0;text-align:left}section.home article p{text-align:left}aside{position:fixed;right:0;height:calc(100vh - 59px);width:150px;display:flex;flex-direction:column;align-items:center;border-left:1px solid rgb(142,43,255)}aside header{background-color:#fff;padding-top:10px;padding-bottom:10px;width:100%;position:sticky;top:0;z-index:1000;display:flex;flex-direction:column;align-items:center;text-align:center}aside header h2{margin:0}aside header p.price{font-size:20px;margin:0}aside .scrollable{padding-top:10px;padding-bottom:10px;overflow-y:scroll;gap:10px;display:flex;flex-direction:column}aside article{display:flex;flex-direction:column;align-items:center;margin-left:5px;margin-right:5px}aside article img{max-width:100%;max-height:150px;height:auto;width:auto}aside article div{display:flex;flex-wrap:wrap;justify-content:center}aside article select,aside article button,aside article input{padding:8px 12px;font-size:1rem;border:1px solid #ccc;border-radius:6px;background-color:#fff}aside article form{display:flex}aside article form button{font-size:14px;padding:2px 5px}aside article input{max-width:40px}aside article button{transition:background-color .3s ease}aside article button:hover{background-color:#ffb6b6;color:#000}aside article button:active{background-color:#52da52;transition:background-color .1s ease}main.aside,main.cards{width:calc(100% - 150px);box-sizing:border-box}.cards article{background:#fff;border:1px solid #e0e0e0;border-radius:16px;box-shadow:0 4px 12px #0000001a;padding:2rem;max-width:300px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}.cards article img{max-width:100%;height:auto;display:block;max-height:200px;margin:auto}.cards article a{height:100%;display:flex;flex-direction:column}.cards article a h2{font-size:20px;margin-top:auto}main.cards{padding-left:20px;padding-right:20px;padding-top:79px!important;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}main{width:100%}div.checkout h1{margin-left:40px}div.cart{margin:20px;background-color:#fff;border:2px solid rgb(141,28,72);border-style:ridge}div.cart ul{display:flex;flex-direction:column;margin-right:30px}div.cart ul li{list-style:none;grid-template-columns:250px;display:grid;grid-template-columns:350px 1fr;column-gap:1rem;grid-template-rows:80px;align-items:center;gap:20px}div.cart ul li p:first-child{width:250px}div.cart ul li>a:first-child{height:80px;display:flex;flex-direction:row;align-items:center}div.cart ul li>div:last-child{display:grid;grid-template-columns:1fr 1fr;gap:30px;width:100%;align-items:center}div.cart ul li>div:last-child div{display:flex;text-align:end;gap:5px;min-width:0}div.cart ul li>div:last-child div button{padding:2px 7px}div.cart ul p{margin:0}div.cart ul img{max-height:100%;width:auto;max-width:100px;flex-shrink:1}div.cart{display:flex;flex-direction:column;align-items:center}div.checkout-button{margin-bottom:20px;display:flex;gap:30px}main{display:grid;grid-template-rows:max-content max-content 1fr;grid-template-columns:2fr 3fr;padding:20px;column-gap:20px}main a{grid-area:1 / 1 / 2 / 3}main h1{grid-area:2 / 1 / 2 / 3;justify-self:center}main img{background-color:#fff;grid-area:3 / 1 / 4 / 2;padding:15px;border-radius:4px;justify-self:center;max-width:350px}main div{grid-area:3 / 2 / 4 / 3;display:flex;flex-direction:column;justify-content:center;align-items:center}body{margin:0;padding:0}div#root{display:flex;flex-direction:column;height:100vh}div#root>*:not(header){flex:1;padding-top:59px;background-color:#ffe7e7}header.page{--background-color: #ffabab;--text-color: black;--text-color-alt: rgb(0, 89, 161);position:fixed;top:0;left:0;width:100%;box-sizing:border-box;z-index:1000;background:#222;display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background-color:var(--background-color);color:var(--text-color)}header h1{font-size:1.5rem;margin:0}header nav ul{list-style:none;display:flex;gap:1.5rem;margin:0;padding:0}header nav li{margin:0}header nav a{position:relative;color:var(--text-color);text-decoration:none;font-weight:500;transition:color .2s ease-in-out}header nav a:after{content:"";position:absolute;left:50%;bottom:-3px;transform:translate(-50%) scaleX(0);transform-origin:center;width:100%;height:2px;background-color:var(--text-color-alt);transition:transform .3s ease-in-out}header nav a:hover{color:var(--text-color-alt)}header nav a:hover:after{transform:translate(-50%) scaleX(1)}
