*               {
                    scroll-margin-top: 60px;
                    box-sizing: border-box;
                }
:root           {
                    --sky:            #daeaf7;
                    --sky-deep:       #c0d9f0;
                    --sky-light:      #edf5fc;
                    --gold:           #c8922a;
                    --infblue:        #30506D;
                    --BerkBlue:       #003262;
                    --BerkLightBlue:  #3B7EA1;
                    --goldEmp:        #C4820E;
  
                      /* Los Angeles Dodgers */
                    --lad-prim:       #005A9C;
                    --lad-sec:        #EF3E42;
                    --lad-third:      #FFFFFF;

                    /* Los Angeles Kings */
                    --lak-prim:       #111111;
                    --lak-sec:        #A2AAAD;
                    --lak-third:      #FFFFFF;

                    /* Angel City FC */
                    --acfc-prim:      #F50A5A;
                    --acfc-sec:       #000000;
                    --acfc-third:     #8A1538;

                    /* Seattle Reign FC */
                    --rgn-prim:       #1F1E4E;
                    --rgn-sec:        #E51937;
                    --rgn-third:      #B7B7B7;

                    /* USWNT */
                    --wnt-prim:       #0C2340;
                    --wnt-sec:        #C8102E;
                    --wnt-third:      #FFFFFF;

                    /* USMNT */
                    --mnt-prim:       var(--wnt-prim);
                    --mnt-sec:        var(--wnt-sec);
                    --mnt-third:      var(--wnt-third);

                    /* Arsenal */
                    --ars-prim:      #EF0107;
                    --ars-sec:       #FFFFFF;
                    --ars-third:     #063672;

                    /* Arsenal Women FC */
                    --arw-prim:      var(--ars-prim);
                    --arw-sec:       var(--ars-sec);
                    --arw-third:     var(--ars-third);

                    /* Montana State Bobcats */
                    --mtst-prim:    #003F87;
                    --mtst-sec:     #B9975B;
                    --mtst-third:   #FFFFFF;

                    /* Seattle Orcas */
                    --seaorc-prim:  #003B5C;
                    --seaorc-sec:   #00A3E0;
                    --seaorc-third: #78BE20;

                    /* Seattle Mariners */
                    --sea-prim:     #0C2C56;
                    --sea-sec:      #005C5C;
                    --sea-third:    #C4CED4;

                    /* Seattle Seahawks */
                    --hwks-prim:    #002244;
                    --hwks-sec:     #69BE28;
                    --hwks-third:   #A5ACAF;

                    /* Green Bay Packers */
                    --gbp-prim:     #203731;
                    --gbp-sec:      #FFB612;
                    --gbp-third:    #FFFFFF;
                }
.grid           {
                    display: grid;
                    grid-template-columns: auto 650px auto;
                    grid-template-areas:
                        "header header header"
                        "nav    main   aside"
                        "footer footer footer";
                    gap:            1rem;
                    margin:         auto;
                    padding-top:    60px;
                }
header          {   grid-area:         header;
                    position:          fixed;
                    overflow:          hidden;
                    background:        var(--sky-light);
                    width:             100%;
                    padding:           0.5rem;
                    top:               0;
                    z-index:           200;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    gap: 0.5rem;
                }
nav             {   grid-area:         nav;    
                    position:          fixed;
                    overflow:          hidden;
                    top:               60px;
                    left:              0;
                    width:             150px;
                    display:           flex;
                    flex-direction:    column;
                    gap:               0.5rem;
                    padding:           1rem;
                    z-index:           140;
                }
main            {   grid-area:         main;
                    padding-bottom:    2rem;
                }
footer          {   grid-area:         footer;
                    position:          fixed;
                    overflow:          hidden;
                    background:        var(--sky-light);
                    width:             100%;
                    padding:           0.5rem;
                    bottom:            0; 
                    z-index:           200;
                }
body
                {
                    margin:         auto;
                    max-width:      650px;
                    line-height:    1.6;
                    font-family:    'Cormorant Garamond', Georgia, serif;
                    background:     var(--sky-light);
                    padding-top:    2rem;
                    color:          #222;
                }
h1, h2, h3,
h4, h5, h6      {
                    text-align:     center;
                    margin-bottom:  0.15rem;
                }
a:link          {
                    color:          var(--BerkBlue); /* Unvisited link */
                }
a:visited       {
                    color:          var(--BerkLightBlue); /* Visited link */
                }
a:hover         {
                    color:          var(--gold); /* Mouse over link */
                }
a:active        {
                    color:          var(--sky-deep); /* Selected link */
                }
p               {
                    padding:        0.1rem;
                    margin:         0.625rem;
                }
span
                {
                    color:          var(--goldEmp);
                }
span.tooltip    {
                    position:       relative;
                    color:          #222;
                }
.tip            {
                    display:    none;
                }

.tooltip:hover .tip {
                    display:        inline;
                    background:     #222;
                    color:          white;
                    padding:        4px 8px;
                    border-radius:  4px;
                }
.hamburger      {
                    display: none;
                    cursor: pointer;
                    background: none;
                    border: none;
                    font-size: 1.5rem;
                }

@media (max-width: 768px) {
    .hamburger {
                    display: block;
                    position: static;
                    background: var(--sky-light);
                    padding: 0.25rem 0.5rem;
                    border-radius: 4px;
                    z-index: 140;
              }
  *            {
                    scroll-margin-top: 3.5rem;
                }
    body       {
                    padding: 0;
                }
    nav       {
                    display: none;
                    position: fixed;
                    overflow: hidden;
                    top: 60px;
                    left: 0;
                    width: 100%;
                    background: var(--sky-light);
                    padding: 1rem;
              }
    nav.open {
                    display: flex;
                    flex-direction: column;
                    min-height: 100vh;
                    z-index: 140;
            }
    nav.open details{
                      display:block;
                      width: 100%;
                    }
  nav.open details a  {
                      display: block;
                      padding-left: 1rem;
                      }
                      }