*{margin:0;padding:0;box-sizing:border-box;transition:all .4s ease-in-out}:root{--bg-rgb:29, 35, 38;--bg-alt-rgb:36, 43, 45;--fg-rgb:230, 231, 230;--fg-alt-rgb:206, 211, 220;--primary-rgb:126, 154, 171;--secondary-rgb:190, 66, 52;--tertiary-rgb:150, 176, 136;--bg:rgb(var(--bg-rgb));--bg-alt:rgb(var(--bg-alt-rgb));--fg:rgb(var(--fg-rgb));--fg-alt:rgb(var(--fg-alt-rgb));--primary:rgb(var(--primary-rgb));--secondary:rgb(var(--secondary-rgb));--tertiary:rgb(var(--tertiary-rgb))}body{background-color:var(--bg-alt);color:var(--fg);font-family:sans-serif;line-height:1.5;display:grid;grid-template-areas:"header" "content";grid-template-rows:317px auto;margin:0 1rem}section#header{grid-area:header;display:grid;&.hub{grid-template-areas:"clock" "search";grid-template-rows:212px calc(105px - 1rem);justify-items:center;gap:1rem;.clock{grid-area:clock;text-align:center;padding-top:4rem;.clock-time{font-size:5rem;font-weight:500;letter-spacing:4px;text-wrap:nowrap}.clock-date{font-size:1.2rem;letter-spacing:2px}}.search{grid-area:search;align-self:center;width:90%;.search-input{width:100%;padding:.8em 1.2em;font-size:1.1rem;color:var(--fg);background:var(--bg);border:none;border-radius:1em;outline:none;box-shadow:0 3px 8px -4px rgba(0,0,0,.15)}.search-input:hover{box-shadow:0 4px 12px -6px rgba(0,0,0,.2)}.search-input:focus{background:linear-gradient( 145deg,var(--bg),rgba(var(--primary-rgb),.05) )}.search-input::placeholder{color:var(--fg-alt);opacity:.7}}.shortcut-hints span i{margin-right:.4em;width:1.2em}}&.subhub{grid-template-areas:"home" "title";grid-template-rows:50px 251px;justify-items:center;gap:1rem;.title{grid-area:title;text-align:center;h1{font-size:2rem;font-weight:500;letter-spacing:4px;margin-bottom:4rem}.subtitle{font-size:1.2rem;letter-spacing:2px}}.back-link{grid-area:home;align-self:center;justify-self:left;color:var(--fg-alt);text-decoration:none;opacity:.7;&:hover{opacity:1;color:var(--primary)}}}}main{grid-area:content;display:grid;grid-auto-flow:row;grid-gap:2em;justify-items:stretch;.container{display:flex;flex-direction:column;align-items:center;padding:2em 1em;border-radius:1em;background-color:var(--bg);box-shadow:0 3px 8px -4px rgba(0,0,0,.15);&:hover{box-shadow:0 4px 12px -6px rgba(0,0,0,.2)}h2{font-size:1.2rem;text-transform:uppercase;margin:.6em;font-weight:700}&.general-container h2{color:var(--tertiary)}&.swimming-container h2{color:var(--primary)}&.lacrosse-container h2{color:var(--secondary)}a i{margin-right:.5em;width:1.2em}h2 i{margin-right:.5em}}a{width:100%;padding:.3em;margin:.2em 0;color:var(--fg);text-align:center;text-decoration:none;font-weight:500;border-radius:.5em;position:relative;z-index:1;&::before{content:"";position:absolute;top:0;left:0;width:0;height:100%;z-index:-1;border-radius:.5em;transition:.2s ease-in-out}&:hover::before{width:100%}}span.link-pending{display:flex;align-items:center;justify-content:center;gap:.35em;width:100%;padding:.3em;margin:.2em 0;color:var(--fg-alt);opacity:.5;text-align:center;font-weight:500;cursor:default;.pending-icon{width:.85em;height:.85em;flex-shrink:0;fill:currentColor}}.group{width:100%;transition:none;summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.4em;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;margin:.8em 0 .2em;padding:.3em;font-weight:600;color:var(--fg-alt);opacity:.6;border-radius:.5em;&::-webkit-details-marker{display:none}&::after{content:"";width:.4em;height:.4em;border-right:1.5px solid;border-bottom:1.5px solid;transform:rotate(-45deg);transition:transform .2s ease-in-out}&:hover{opacity:1}}&:first-of-type summary{margin-top:.2em}.group-links{display:flex;flex-direction:column;align-items:center}&[open]{summary::after{transform:rotate(45deg)}}}&.general-container a:hover::before{background:rgba(var(--tertiary-rgb),.05)}&.swimming-container a:hover::before{background:rgba(var(--primary-rgb),.05)}&.lacrosse-container a:hover::before{background:rgba(var(--secondary-rgb),.05)}&.general-container a:hover{color:var(--tertiary)}&.swimming-container a:hover{color:var(--primary)}&.lacrosse-container a:hover{color:var(--secondary)}}@media(min-width:992px){body{margin:0 3rem}section#header.hub{.search{width:550px}}section#header.subhub{.title{h1{font-size:5rem;text-wrap:nowrap;margin-bottom:unset}}}main{grid-template-columns:1fr 1fr 1fr;gap:3rem;&.subhub{.title{h1{font-size:5rem;margin-bottom:0}}}}}