app-header{width:100%;height:var(--header-height);background-color:var(--background-color);border-bottom:3px solid var(--primary-color);z-index:100;display:block;position:fixed;top:0;left:0}app-header .header-container{height:100%;padding:0 var(--space-6);justify-content:space-between;align-items:center;margin:0 auto;display:flex}app-header .logo{color:var(--primary-color);border-radius:.25rem;font-family:Lato,sans-serif;font-size:1.5rem;font-weight:900}app-header .logo img{vertical-align:middle;height:40px}app-header>.nav-links{gap:var(--space-6);display:flex}app-header>.nav-link{color:var(--text-color);padding:var(--space-2)var(--space-3);border-bottom:2px solid #0000;border-radius:.25rem;font-weight:500;text-decoration:none;transition:all .2s}app-header>.nav-link:hover{color:var(--primary-color);background-color:var(--hover-color);border-bottom:2px solid var(--primary-color)}app-header .external-link{color:#fff;padding:var(--space-2)var(--space-4);background-color:var(--primary-color);cursor:pointer;border-radius:.25rem;font-weight:600;transition:all .2s}app-header .external-link:hover{background-color:var(--primary-color);opacity:.9;text-decoration:none}app-header .right-side{align-items:center;gap:var(--space-4);display:flex}app-header .hamburger-menu{background-color:#0000;border:none;display:none}app-header .hamburger-menu .hamburger-icon{background-color:#fff;width:24px;height:24px;display:block}@media (width<=1300px){app-header .hamburger-menu{display:block}}@media (width<=768px){app-header .nav-links{display:none}}@media (width<=400px){app-header .external-link{display:none}}app-sidenav{padding:var(--space-6)var(--space-4);height:100%;display:block}app-sidenav .section{margin-bottom:var(--space-8)}app-sidenav .section-title{text-transform:uppercase;color:var(--secondary-color);margin-bottom:var(--space-3);padding:0 var(--space-2);border-bottom:2px solid var(--secondary-color);padding-bottom:var(--space-2);font-family:Lato,sans-serif;font-size:.875rem;font-weight:700}app-sidenav .nav-list{list-style:none}app-sidenav .nav-item{margin-bottom:var(--space-1)}app-sidenav .nav-link{padding:var(--space-2);color:var(--text-color);border-left:2px solid #0000;border-radius:.25rem;font-size:.925rem;text-decoration:none;transition:all .2s;display:block}app-sidenav .nav-link:hover{border-left:2px solid var(--secondary-color);background-color:#a487ae1a;text-decoration:none}app-sidenav .nav-link.active{color:var(--secondary-color);border-left:2px solid var(--secondary-color);background-color:#a487ae26;font-weight:500}app-pagenav{padding:var(--space-6)var(--space-4);display:block}app-pagenav .title{text-transform:uppercase;color:var(--tertiary-color);margin-bottom:var(--space-4);border-bottom:2px solid var(--tertiary-color);padding-bottom:var(--space-2);font-family:Lato,sans-serif;font-size:.875rem;font-weight:700}app-pagenav .nav-list{list-style:none}app-pagenav .nav-item{margin-bottom:var(--space-2);font-size:.875rem}app-pagenav .nav-link{color:var(--text-color);padding:var(--space-1)0;padding-left:var(--space-3);border-left:2px solid #0000;text-decoration:none;transition:all .2s;display:block}app-pagenav .nav-link:hover{color:var(--tertiary-color);background-color:#7cb0ca1a}app-pagenav .nav-link.active{color:var(--tertiary-color);border-left-color:var(--tertiary-color);font-weight:500}app-pagenav .nav-item.sub{padding-left:var(--space-4)}app-pagination{margin:var(--space-12)0 var(--space-8);display:block}app-pagination .pagination{border-top:1px solid var(--border-color);padding-top:var(--space-8);justify-content:space-between;gap:10px;display:flex}app-pagination .pagination-btn{background-color:var(--info-color);color:#fff;padding:var(--space-3)var(--space-5);border-radius:var(--border-radius-md);cursor:pointer;font-family:inherit;font-size:inherit;box-shadow:var(--shadow-sm);border:none;align-items:center;width:fit-content;transition:all .2s;display:flex}app-pagination .pagination-btn:hover{background-color:var(--info-color);opacity:.9;box-shadow:var(--shadow-md)}app-pagination .pagination-btn:focus{outline:none;box-shadow:0 0 0 3px #eabf6f4d}app-pagination .page-text{flex-direction:column;display:flex}app-pagination .direction{color:#ffffffe6;margin-bottom:var(--space-1);text-transform:uppercase;font-size:.75rem;font-weight:600}app-pagination .title{color:#fff;font-weight:500}app-pagination .prev{text-align:left;padding-right:var(--space-5)}app-pagination .next{padding-left:var(--space-5);text-align:right}app-pagination .arrow-icon{stroke:#fff;margin:0 var(--space-2)}app-pagination .prev .arrow-icon{margin-right:var(--space-3)}app-pagination .next .arrow-icon{margin-left:var(--space-3)}@media (width<=850px){app-pagination .pagination{flex-direction:column;align-items:center}app-pagination .direction{display:none}app-pagination .title{font-size:.875rem}}app-footer{border-top:2px solid var(--accent-color);padding:var(--space-8)0;background-color:#e37a701a;display:block}app-footer .footer-container{max-width:1400px;padding:0 var(--space-8);justify-content:space-between;align-items:center;margin:0 auto;display:flex}app-footer .copyright,app-footer .message{color:var(--text-color);font-size:.875rem}app-footer .copyright span,app-footer .message span{color:var(--accent-color);font-weight:600}app-footer .message span{color:var(--tertiary-color);display:inline-flex}app-footer .message span svg{scale:.7}app-footer .links{gap:var(--space-6);display:flex}app-footer .footer-link{color:var(--text-color);padding:var(--space-2);border-radius:.25rem;font-size:.875rem;text-decoration:none;transition:color .2s}app-footer .footer-link:hover{color:var(--accent-color);background-color:#e37a701a}@media (width<=1900px){app-footer .footer-container{max-width:unset;margin:0 230px 0 250px}app-footer .links{justify-content:center}}@media (width<=1400px){app-footer .footer-container{gap:var(--space-4);text-align:center;flex-direction:column;margin:0 auto}app-footer .links{justify-content:center}}.bottom-tray{z-index:1001;background-color:#fff;border-top-left-radius:16px;border-top-right-radius:16px;height:75vh;transition:transform .3s ease-out;position:fixed;bottom:0;left:0;right:0;overflow:hidden;transform:translateY(100%);box-shadow:0 -8px 30px #00000040}.bottom-tray.open{transform:translateY(0)}.tray-header{border-bottom:1px solid #0000000d;justify-content:center;align-items:center;padding:12px;display:flex;position:relative}.tray-handle{background-color:#e0e0e0;border-radius:4px;width:40px;height:4px}.close-button{cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:8px;transition:background-color .2s;display:flex;position:absolute;top:12px;right:12px}.close-button:hover{background-color:#0000000d}.tray-content{height:calc(100% - 56px);padding:0 20px 20px;overflow-y:auto}.bottom-tray .section{margin-bottom:var(--space-8)}.bottom-tray .section-title{text-transform:uppercase;color:var(--secondary-color);margin-bottom:var(--space-3);padding:0 var(--space-2);border-bottom:2px solid var(--secondary-color);padding-bottom:var(--space-2);font-family:Lato,sans-serif;font-size:.875rem;font-weight:700}.bottom-tray .nav-list{margin:0;padding:0;list-style:none}.bottom-tray .nav-item{margin-bottom:var(--space-1)}.bottom-tray .nav-link{padding:var(--space-2);color:var(--text-color);border-left:2px solid #0000;border-radius:.25rem;font-size:.925rem;text-decoration:none;transition:all .2s;display:block}app-header .bottom-tray .nav-link:hover{border-left:2px solid var(--secondary-color);color:var(--text-color);background-color:#a487ae1a;border-bottom:none;text-decoration:none}app-header .bottom-tray .nav-link.active{color:var(--secondary-color);border-left:2px solid var(--secondary-color);background-color:#a487ae26;font-weight:500}.tray-overlay{z-index:999;opacity:0;visibility:hidden;background-color:#00000080;transition:opacity .3s;position:fixed;inset:0}.tray-overlay.open{opacity:1;visibility:visible}@media (height<=500px){.bottom-tray{height:85vh}}@media (width>=1300px){.bottom-tray{display:none}}media-container{margin:var(--space-8)0;width:100%;display:block}
/*# sourceMappingURL=1-introduction-to-uiux-defining-ui-ux-and-product-design.ecaaa361.css.map */