/* Font *//** Lato (400) (Lato full) */@font-face { font-family: 'Lato'; src: url('/assets/fonts/lato/Lato-Regular.woff2') format('woff2'),  url('/assets/fonts/lato/Lato-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap;}/** Lato Latin Italic (400) (Latin only subset) */@font-face { font-family: 'Lato'; src: url('/assets/fonts/lato/LatoLatin-Italic.woff2') format('woff2'),  url('/assets/fonts/lato/LatoLatin-Italic.ttf') format('truetype'); font-weight: normal; font-style: italic; font-display: swap;}/** Lato Latin Semibold (600) (Latin only subset) */@font-face { font-family: 'Lato'; src: url('/assets/fonts/lato/LatoLatin-Semibold.woff2') format('woff2'),  url('/assets/fonts/lato/LatoLatin-Semibold.ttf') format('truetype'); font-weight: bold; font-style: normal; font-display: swap;}/** Lato Heavy (800) (Latin only subset) */@font-face { font-family: 'Lato'; src: url('/assets/fonts/lato/LatoLatin-Heavy.woff2') format('woff2'),  url('/assets/fonts/lato/LatoLatin-Heavy.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap;}/* Defaults */body { background-color: #202542; font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif; font-weight: normal; line-height: 1.625; margin: 0;}h1 { font-weight: 800;}h2, h3, h4, h5, h6 { font-weight: bold;}/* Layout */main { background-color: #fff; color: #202542; padding: 3.1rem 3.2rem 3.2rem 3.1rem;}main > article::after { clear: both; content: " "; display: block;}main > article h1 { margin-top: 0;}/** Max content width */@media (min-width: 1280px) { .header, body .breadcrumb > ol, main > *, .footer {  margin: 0 auto;  max-width: calc(1280px - 6.2rem); }}/* Generic CSS Classes *//** Articles */.article-section { clear: both; margin-top: 3.2rem;}/** Details */.details-box { border: 1px solid #e1e5e9; border-radius: 4px; padding: 0.5em 0.5em 0;}.details-box summary { margin: -0.5em -0.5em 0; padding: 0.5em;}.details-box[open] { padding: 0.5em;}.details-box[open] summary { border-bottom: 1px solid #e1e5e9; margin-bottom: 0.5em;}/** Hidden */.hidden { display: none !important;}/** Images */.article-image-left { float: left; padding: 0 1.6rem 3.2rem 0; width: 32rem;}.article-image-right { float: right; padding: 0 0 3.2rem 1.6rem; width: 32rem;}.article-image-small { width: 22.4rem;}.article-image-top { margin-top: -3.8rem;}@media (max-width: 820px) { .article-image-left, .article-image-right {  float: none;  padding: 0 0 1.6rem; } .article-image-top { margin-top: 0; }}@media (max-width: 580px) { .article-image-left, .article-image-right {  width: 100%; }}/** Lists */.unstyled-list { list-style-type: none; margin: 0; padding: 0;}/** Quotes */.quote { margin: 0; padding: 0;}.quote .quote-author::before { content: "— ";}/** Tables */.table-caption { caption-side: bottom; text-align: left; padding: 1rem 0;}/** iCalendar Download */.ical-download-button { background-color: #0066cc; color: #fff; display: inline-flex; align-items: center; gap: .2rem; padding: .2rem .4rem; text-decoration: none; border-radius: 4px; font-weight: bold; transition: background-color 0.3s ease;}.ical-download-button::before { content: url("/assets/img/icon/calendar-days.svg"); display: inline-block; width: 1.2rem; height: 1.2rem; flex-shrink: 0; filter: brightness(0) invert(1);}.ical-download-button:hover,.ical-download-button:focus { background-color: #0052a3; color: #fff;}/** Tiles */.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; list-style: none; padding: 0; margin: 1.5rem 0;}.tiles li { border: 1px solid #e0e0e0; border-radius: 8px; padding: 1.5rem; background-color: #fafafa; transition: box-shadow 0.3s ease;}.tiles li:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}.tiles .tile-header { display: flex; align-items: center; gap: 1rem;}.tiles .tile-header img { width: 60px; height: 60px; object-fit: contain; flex-shrink: 0;}.tiles h2, .tiles h3 { margin: 0; color: #333; font-size: 1.25rem; flex: 1;}.tiles dl { margin: 0.5rem 0 0 0;}.tiles dt { font-weight: bold; margin-top: 0.75rem; margin-bottom: 0.25rem; color: #333;}.tiles dt:first-child { margin-top: 0;}.tiles dd { margin: 0 0 0.25rem 0; color: #666;}.tiles dd:last-child { margin-bottom: 0;}.tiles.tile-links li { padding: 0; display: flex; flex-direction: column;}.tiles.tile-links a { color: inherit; display: flex; flex-direction: column; padding: 1.5rem; text-decoration: none; height: calc(100% - 3rem); width: calc(100% - 3rem); flex-grow: 1;}.tiles.tile-links .tile-links-nav-hint { font-weight: bold; margin-top: auto; padding-top: 1rem;}.tile-links-nav-hint::after { content: url("/assets/img/icon/chevron-right.svg"); display: inline-block; width: 1rem; height: 1.5rem; margin-left: .2rem; transition: margin-left 0.3s ease; vertical-align: middle;}.tiles.tile-links a:hover .tile-links-nav-hint::after { margin-left: 0.5rem;}/* Header Styles *//* Basic header layout */.header { align-items: center; background-color: #202542; color: #fff; display: flex; flex-direction: row; gap: 2rem; justify-content: space-between; padding: 1.5rem 3.2rem 1.6rem 3rem; position: relative;}.header a { color: #fff; text-decoration: none; text-wrap: nowrap;}.header a:hover,.header a:focus { color: #fff;}/* Homepage link */.header .homepage-link { align-items: center; display: flex;}.header .homepage-link a { align-items: center; display: flex; flex-direction: row; gap: 1.6rem; font-size: 1.6rem; font-style: normal;}.header .homepage-link img { width: 3.2rem;}/* Navigation styles */.header .main-nav { align-items: center; display: flex; transition: all 0.3s ease; position: fixed; top: 0; left: -100%; width: 100%; height: 100vh; background-color: #202542; z-index: 999; justify-content: center;}.header .main-nav.nav-open { left: 0; transition: left 0.3s ease;}/* Disable transitions during viewport changes to prevent unwanted animations */.header .main-nav.resizing { transition: none !important;}.header .main-nav ul { align-self: center; display: flex; flex-direction: column; gap: 2rem; list-style: none; margin: 0; padding: 0;}.header .main-nav li { margin: 0;}.header .main-nav a { display: block; font-size: 1.6rem; padding: .8rem 1.6rem; border-radius: 0.25rem; text-align: center; transition: background-color 0.3s ease;}.header .main-nav a:hover { background-color: rgba(255, 255, 255, 0.1);}/* Hamburger menu */.header .hamburger-menu { display: flex; flex-direction: column; justify-content: space-around; width: 30px; height: 30px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1000;}.header .hamburger-menu.active { position: fixed; top: 2.55rem; right: 3.2rem;}.header .hamburger-menu span { width: 100%; height: 3px; background-color: #fff; border-radius: 3px; transition: all 0.3s ease;}.header .hamburger-menu.active span:nth-child(1) { transform: rotate(45deg) translate(7px, 7px);}.header .hamburger-menu.active span:nth-child(2) { opacity: 0;}.header .hamburger-menu.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px);}/* Desktop navigation styles */@media (min-width: 1025px) { .header .main-nav {  position: static !important;  width: auto !important;  height: auto !important;  background-color: transparent !important;  left: 0 !important;  display: block !important; } .header .main-nav ul {  flex-direction: row;  gap: .8rem; } .header .main-nav a {  font-size: 1.2rem;  padding: .4rem .8rem; } .header .hamburger-menu {  display: none !important; }}/* Footer Styles */.footer { background-color: #202542; color: #d8d8d8; font-size: 1rem; padding: 3.2rem 3.2rem 3.1rem 3.1rem;}.footer a { color: #d8d8d8; text-decoration: none; transition: color 0.3s ease;}.footer a:hover,.footer a:focus { color: #fff; text-decoration: underline;}.footer .title { font-size: 1.5rem; font-weight: bold;}/* Footer nav styles */.footer .footer-nav { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto; gap: .4rem 2rem; margin: 0; padding: 0;}.footer .footer-nav dt { font-size: 1.2rem;}.footer .footer-nav dd { margin: 0; padding: 0;}.footer .footer-nav dd ul { list-style: none; margin: 0; padding: 0;}/* Position each dt and dd pair in the grid */.footer .footer-nav dt:nth-child(1) { grid-column: 1; grid-row: 1;}.footer .footer-nav dd:nth-child(2) { grid-column: 1; grid-row: 2;}.footer .footer-nav dt:nth-child(3) { grid-column: 2; grid-row: 1;}.footer .footer-nav dd:nth-child(4) { grid-column: 2; grid-row: 2;}.footer .footer-nav dt:nth-child(5) { grid-column: 3; grid-row: 1;}.footer .footer-nav dd:nth-child(6) { grid-column: 3; grid-row: 2;}.footer .footer-nav dt:nth-child(7) { grid-column: 4; grid-row: 1;}.footer .footer-nav dd:nth-child(8) { grid-column: 4; grid-row: 2;}/* Footer social nav styles */.footer .social-nav { margin-top: 3.2rem;}.footer .social-nav ul { align-items: center; display: flex; flex-direction: row; gap: 1rem; list-style: none; margin: 0; padding: 0;}.footer .social-nav li { margin: 0;}.footer .social-nav a { align-items: center; display: flex; padding: 0.5rem 0.75rem;}.footer .social-nav .homepage-link a { padding: 0;}.footer .social-nav img { width: 1.6rem;}.footer .social-nav .homepage-link img { width: 3.2rem;}.footer .social-nav .icon { filter: invert(.9);}.footer .social-nav a:hover .icon { filter: invert(1);}@media (max-width: 780px) { .footer .footer-nav {  grid-template-columns: 1fr;  grid-template-rows: repeat(8, auto); } .footer .footer-nav dt:not(:first-child) {  margin-top: 2rem; }  /* Reset positioning for mobile layout - stack vertically */ .footer .footer-nav dt:nth-child(1), .footer .footer-nav dt:nth-child(3), .footer .footer-nav dt:nth-child(5), .footer .footer-nav dt:nth-child(7) {  grid-column: 1; }  .footer .footer-nav dd:nth-child(2), .footer .footer-nav dd:nth-child(4), .footer .footer-nav dd:nth-child(6), .footer .footer-nav dd:nth-child(8) {  grid-column: 1; }  /* Position each element in its own row */ .footer .footer-nav dt:nth-child(1) { grid-row: 1; } .footer .footer-nav dd:nth-child(2) { grid-row: 2; } .footer .footer-nav dt:nth-child(3) { grid-row: 3; } .footer .footer-nav dd:nth-child(4) { grid-row: 4; } .footer .footer-nav dt:nth-child(5) { grid-row: 5; } .footer .footer-nav dd:nth-child(6) { grid-row: 6; } .footer .footer-nav dt:nth-child(7) { grid-row: 7; } .footer .footer-nav dd:nth-child(8) { grid-row: 8; } .footer .social-nav ul {  flex-direction: column; }}/* Breadcrumb Styles */.breadcrumb { background-color: #fff; color: #202542; border-bottom: 1px solid #f4f4f4; font-size: 1rem; padding: .5rem 3.2rem .6rem 3rem;}.breadcrumb ol { align-items: flex-start; display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0; padding: 0;}.breadcrumb a { align-items: center; color: #7C4DFF; display: flex; justify-content: center; margin: 0 1rem 0 0; padding: 0.3rem 0; text-decoration: none;}.breadcrumb a:hover,.breadcrumb a:focus { text-decoration: underline;}.breadcrumb li { align-items: center; display: flex;}.breadcrumb li a[href="#"] { color: #202542; cursor: default; pointer-events: none;}.breadcrumb li + li::before { color: #d9d9d9; content: "/"; margin: 0 1rem 0 0;}/** Try Solid Hero Layout */.try-solid { min-height: calc(100vh - 12.5rem); display: flex; align-items: center; gap: 3.2rem; justify-content: space-around; flex-direction: column;}.try-solid .hero-text h1 { font-size: 3.2rem; line-height: 1.2; margin: 0;}.try-solid .hero-text h2 { font-size: 2.1rem; margin: 0;}.try-solid .hero-text p { margin: .8rem 0 1.6rem;}.try-solid .hero-image img { width: 100%; height: auto;}@media (min-width: 781px) { .try-solid .hero-image, .try-solid .hero-text { width: 83.2%; max-width: 51.2rem; } .try-solid .hero-text { margin-top: -14.6rem; } .try-solid .hero-text p { max-width: 16rem; }}@media (max-width: 780px) { .try-solid { flex-direction: column-reverse; } .try-solid .hero-text { text-align: center; } .try-solid .hero-image { width: 100%; }}/** Try Solid Button */.try-solid-button { background-color: #7C4DFF; color: #fff; display: inline-flex; align-items: center; gap: 0.8rem; padding: 0.4rem 2rem; text-decoration: none; border-radius: 6px; font-weight: bold; font-size: 1.1rem; transition: all 0.2s ease; box-shadow: 0 2px 4px rgba(124, 77, 255, 0.2);}.try-solid-button::after { content: ""; display: inline-block; width: 1.8rem; height: 1.6rem; flex-shrink: 0; background-image: url("/assets/img/solid-emblem.svg"); background-size: contain; background-repeat: no-repeat; background-position: center;}.try-solid-button:hover,.try-solid-button:focus { background-color: #6d3dee; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(124, 77, 255, 0.3);}/** Tim Berners-Lee Quote Styling */.tim-berners-lee-quote { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); font-size: 1.2rem;}.tim-berners-lee-quote blockquote { padding: 2.5rem 2rem;}.tim-berners-lee-quote p { color: #2c3e50; font-style: italic; margin: 0 auto; max-width: 60rem;}.tim-berners-lee-quote footer { margin: 1.5rem auto 0 auto; max-width: 60rem; text-align: right;}/** Apps List */.sort-controls { margin-bottom: 1.6rem; padding: .8rem 1.6rem; background: #f8f9fa; border-radius: 8px; border: 1px solid #e9ecef; display: flex; gap: 1.6rem; flex-wrap: wrap; align-items: flex-end;}.control-group { display: flex; flex-direction: column; gap: .8rem;}.sort-controls select { padding: .4rem; border: 1px solid #ced4da; border-radius: .4rem; background: white; min-width: 200px;}.sort-controls select:focus { outline: none; border-color: #3273dc; box-shadow: 0 0 0 2px rgba(50, 115, 220, 0.25);}.top-app-tag { color: #ff6b35; font-size: 1.6rem; margin-left: .8rem; flex-shrink: 0;}.checkbox-label { display: flex; align-items: center; cursor: pointer; color: #495057; gap: .8rem; margin-bottom: .2rem;}.checkbox-label input[type="checkbox"] { margin: 0; cursor: pointer;}
