*{margin:0;padding:0;box-sizing:border-box;transition:.2s ease-in-out}h1{text-align:center}button{cursor:pointer;padding:8px}main{display:grid;grid-template-areas:"gender-toggle" "controls" "top-events" "scy" "lcm";justify-items:center;column-gap:8px;row-gap:8px; #gender-toggle { grid-area: gender-toggle; display: flex; border: 1px solid rgba(34,36,38,.3); border-radius: 4px; overflow: hidden; button { background: none; border: none; padding: 4px 12px; cursor: pointer; color: inherit; &.active { background-color: rgba(0,0,50,.12); font-weight: bold; } &:hover:not(.active) { background-color: rgba(0,0,50,.05); } } } #controls { grid-area: controls; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; } #scy, #lcm { border: 1px solid rgba(34,36,38,.15); .section-label { display: block; text-align: center; font-weight: bold; padding: 4px; background-color: rgba(0,0,50,.05); } div { display: grid; grid-template-columns: 112px auto 80px; gap: 8px; padding: 4px; border-top: 1px solid rgba(34,36,38,.15); input { width: 125px; } label, span { justify-self: right; } } div:nth-child(odd) { background-color: rgba(0,0,50,.05); } } #scy { grid-area: scy; justify-self: center; } #lcm { grid-area: lcm; justify-self: center; } #top-events { grid-area: top-events; #overall-powerindex { font-weight: bold; font-size: 2rem; } #first, #second, #third, #fourth { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } } .popup { display: none; min-height: 146px; width: 340px; position: fixed; left: calc(50% - 170px); top: 80px; padding: 24px; background-color: #fff; border: 2px solid rgba(34,36,38,.15); box-shadow: 4px 4px 2px 0px rgba(0, 0, 0, 0.5); &.active { display: grid; grid-template-rows: auto auto auto auto; row-gap: 8px; align-items: start; } #web-id-entry { display: grid; grid-template-areas: "label1 input1" "label2 input2" "button1 button2"; gap: 4px; align-items: center; } #saved-swimmers { max-height: 160px; overflow-y: auto; .saved-hint { font-size: 0.85rem; color: rgba(0,0,0,0.45); } .saved-row { display: grid; grid-template-columns: 1fr 80px auto auto; gap: 6px; align-items: center; padding: 3px 0; border-top: 1px solid rgba(34,36,38,.1); .saved-name { font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .saved-id { color: rgba(0,0,0,0.55); font-size: 0.85rem; } } } #web-status { font-size: 0.85rem; color: rgba(0,0,0,0.55); } #close-popup { position: absolute; right: 4px; top: 4px; border: none; background: none; color: rgba(0,0,0,0.45); font-size: 0.85rem; &:hover { cursor: pointer; } } }}@media(min-width:576px){main{.popup{width:480px;left:calc(50% - 240px)}}}@media(min-width:769px){main{grid-template-areas:"gender-toggle gender-toggle" "scy lcm" "controls controls" "top-events top-events"; #scy { grid-area: scy; justify-self: right; } #lcm { grid-area: lcm; justify-self: left; }}}