:root{--navcolor:#0d0d4d;--fadenavcolor:#29295c66;--fontcolor:#fff;--color-primary:#0000804d;--color-secondary:#ffcb03;--homebuttons:2rem;--bgbuttons:#1d1d61;--bgcolor:#bcbcdf1a;--buttonscolor:#fff;--footerBackground:#0d0d4d;--success:green;--out-of-stock:#bcbcdf66;--hover-add-to-cart:#d6d6f5;--header-footer-bg:#00000080}.playmusic{color:var(--color-secondary);z-index:100;font-size:1.5rem;position:fixed;bottom:2vh;left:1rem}.input-icon{color:var(--navcolor);opacity:.6;transition:all .3s;position:absolute;top:1rem;left:1rem}html,body{font-optical-sizing:auto;background-color:var(--bgcolor);width:100%;min-height:100vh;margin:0;padding:0;font-family:EB Garamond;font-style:normal;font-weight:400;position:relative;overflow-x:hidden}.topmargin{padding-top:8vh;padding-bottom:20vh}.fade-in{opacity:0;transition:opacity .5s ease-in-out}.fade-in.visible{opacity:1}@media (max-width:900px){.topmargin{padding-top:8vh}}.error{color:red;margin-bottom:1rem}.orange{color:orange}@media (max-width:500px){.topmargin{padding-top:5vh}}@media (max-width:400px){.topmargin{padding-top:6vh}}
header{z-index:110;width:100%;position:fixed;top:0}nav{color:#fff;background-color:var(--navcolor);z-index:1;text-shadow:2px 2px 5px #000000e6;align-items:center;padding:0 20px;display:flex;position:relative}nav:before{content:"";opacity:.6;z-index:-1;background-image:url(../media/background-header.b5d04513.webp);background-position:50%;background-size:cover;width:100%;height:100%;position:absolute;top:0;left:0}nav:after{content:"";background-color:var(--header-footer-bg);z-index:-1;width:100%;height:100%;position:absolute;top:0;left:0}h1{margin:0}.h1-link{color:#fff;text-decoration:none}.crown{color:gold}.log-sign .big-screen-search-button{margin-right:1rem}.small-screen-search-button{margin-right:2vw}.big-screen-nav{justify-content:space-between;align-items:center;padding:.5rem 2rem;display:flex}.big-screen-nav p{cursor:pointer;margin:0}.cart-link{color:#fff;text-decoration:none}.big-screen-link{color:#fff;justify-content:center;align-items:center;text-decoration:none;display:flex}.big-screen-link:hover{text-decoration:underline}.big-screen-link p{margin:0}.log-sign{display:flex}.log-sign .big-screen-link{margin-left:2rem}nav .bold-link{color:red}.header-links{justify-content:space-between;width:30%;display:flex}.small-screen-nav{display:none}.small-nav-links{z-index:99;background-color:var(--navcolor);color:#fff;flex-direction:column;justify-content:space-between;align-items:center;margin:0;padding:2rem 0;display:none;position:relative}.small-nav-links:before{content:"";opacity:.6;z-index:-1;background-image:url(../media/background-header.b5d04513.webp);background-position:50%;background-size:cover;width:100%;height:100%;position:absolute;top:0;left:0}.small-nav-links:after{content:"";background-color:var(--header-footer-bg);z-index:-1;width:100%;height:100%;position:absolute;top:0;left:0}.picked{color:var(--navcolor);background-color:#fff;border-radius:.5rem;padding:.2rem .3rem}.africalogo{color:gold}.small-nav-links .logout-button{color:var(--navcolor)}.hide-nav{animation:.9s ease-in-out slideOutTop;display:none}.search-overlay{background:var(--navcolor);z-index:100;justify-content:center;align-items:center;width:100%;height:100%;animation:.3s ease-out slideInDown;display:flex;position:absolute;top:0;left:0}.search-input-container{background:#ffffff1a;border:1px solid #fff3;border-radius:50px;align-items:center;width:80%;max-width:800px;padding:5px 20px;display:flex}.search-input{color:#fff;background:0 0;border:none;outline:none;flex:1;padding:10px 15px;font-size:1.1rem}.search-input::placeholder{color:#fff9}.search-icon-inner{color:gold;font-size:1.2rem}.close-search{color:#fff;cursor:pointer;font-size:2rem;transition:transform .2s}.close-search:hover{color:gold;transform:scale(1.1)}@keyframes slideInDown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.cart-search{justify-content:center;align-items:center;display:flex}@keyframes slideOutTop{0%{display:flex;transform:translateY(0)}to{display:none;transform:translateY(-100%)}}.show-nav{animation:.3s ease-in-out slideInTop;display:none}.show-search-input{animation:ease-in-out .3 slideInTop}.hide-search-input{animation:ease-in-out .3 slideOutTop}@keyframes slideInTop{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}.show-nav .nav-link:first-of-type{opacity:1;animation:.3s ease-in-out slideInLeft}.show-nav .nav-link:nth-of-type(2){opacity:1;animation:.5s ease-in-out slideInLeft}.show-nav .nav-link:nth-of-type(3){opacity:1;animation:.7s ease-in-out slideInLeft}.show-nav .nav-link:nth-of-type(4){opacity:1;animation:.9s ease-in-out slideInLeft}.show-nav .nav-link:nth-of-type(5){opacity:1;animation:1s ease-in-out slideInLeft}.show-nav .nav-link:nth-of-type(6){opacity:1;animation:1.2s ease-in-out slideInLeft}@keyframes slideInLeft{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}.links-slide-out:first-of-type{animation:.3s ease-in-out slide-out}.links-slide-out:nth-of-type(2){animation:.5s ease-in-out slide-out}.links-slide-out:nth-of-type(3){animation:.7s ease-in-out slide-out}.links-slide-out:nth-of-type(4){animation:.9s ease-in-out slide-out}.links-slide-out:nth-of-type(5){animation:1.1s ease-in-out slide-out}.links-slide-out:nth-of-type(6){animation:1.3s ease-in-out slide-out}@keyframes slide-out{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-100%)}}@media (max-width:1000px){.big-screen-nav{display:none}.small-screen-nav{justify-content:space-between;align-items:center;padding:0 2rem;display:flex}.h1-menu{align-items:center;display:flex}.menu{margin-right:1rem;font-size:2rem;animation:1.3s ease-in-out menuFadeOut}.picked p{margin:0}.picked{padding:1rem;color:var(--navcolor)!important}@keyframes menuFadeOut{0%{opacity:0}to{opacity:1}}.nav-link{color:#fff;justify-content:center;align-items:center;text-decoration:none;display:flex}.nav-link p{margin-left:.5rem}.show-nav{display:flex}}@media (max-width:500px){.small-screen-nav{padding:0 1rem}}
footer{background-color:var(--footerBackground);color:#fff;z-index:1;width:100%;padding:2rem 0;position:absolute;bottom:0}footer:before{content:"";opacity:.6;z-index:-1;background-image:url(../media/background-header.b5d04513.webp);background-position:50%;background-size:cover;width:100%;height:100%;position:absolute;top:0;left:0}footer:after{content:"";background-color:var(--header-footer-bg);z-index:-1;width:100%;height:100%;position:absolute;top:0;left:0}.footer-container{margin:0 1rem}