*{margin:0;padding:0;box-sizing:border-box;transition:.2s ease-in-out}:root{--fg-rgb:0, 0, 0;--fg-alt-rgb:255, 255, 255;--bg-rgb:255, 255, 255;--bg-alt-rgb:0, 0, 0;--primary-rgb:213, 35, 31;--primary-alt-rgb:228, 71, 67;--secondary-rgb:192, 192, 192;--secondary-alt-rgb:167, 167, 167;--tertiary-rgb:0, 0, 0;--tertiary-alt-rgb:26, 3, 3;--fg:rgb(var(--fg-rgb));--fg-alt:rgb(var(--fg-alt-rgb));--bg:rgb(var(--bg-rgb));--bg-alt:rgb(var(--bg-alt-rgb));--primary:rgb(var(--primary-rgb));--primary-alt:rgb(var(--primary-alt-rgb));--secondary:rgb(var(--secondary-rgb));--secondary-alt:rgb(var(--secondary-alt-rgb));--tertiary:rgb(var(--tertiary-rgb));--tertiary-alt:rgb(var(--tertiary-alt-rgb))}ol,ul{padding:0 45px}body{display:grid;width:100vw;max-width:100vw;overflow-x:hidden;grid-template-rows:70px 50px 1fr 50px;color:var(--fg);background-color:var(--bg);font-family:libre franklin,sans-serif;font-optical-sizing:auto;font-weight:500;font-style:normal;.header { display: grid; grid-template-columns: 80px 1fr; margin: 10px; img { height: 55px; } h1 { justify-self: left; align-self: center; font-size: 20px; font-weight: 700; } } .navigation { max-width: 100vw; overflow-x: scroll; padding: 0 10px; color: var(--bg-alt); background-color: var(--bg-alt); font-weight: bolder; font-size: 15px; border-top: 2px solid var(--secondary); border-bottom: 2px solid var(--secondary); ul { display: flex; flex-wrap: nowrap; column-gap: 10px; list-style: none; margin: 0 0; padding: 0; } ul li { display: inline-block; flex-grow: 1; height: 46px; line-height: 46px; text-align: center; &:hover, &:active, &:focus, &.selected { color: var(--fg-alt); background-color: var(--primary); cursor: pointer; } a, a:hover, a:active, a:focus, a:link, a:visited { display: block; color: var(--fg-alt); text-decoration: none; text-transform: uppercase; cursor: pointer; } } } .footer { display: grid; grid-template-columns: auto 25px 25px; grid-column-gap: 15px; align-items: center; padding: 0 10px; border-top: 1px solid var(--fg); color: var(--fg); background-color: var(--secondary); font-size: 12px; img { width: 25px; } p { opacity: 0.4; justify-self: center; align-self: center; } }}#main{margin:10px}#main.roster{.content { max-width: 100%; display: flex; column-gap: 25px; row-gap: 45px; flex-wrap: wrap; .player { margin-left: auto; margin-right: auto; display: grid; grid-template-columns: 350px; grid-template-rows: 400px auto 40px; border: 1px solid var(--secondary); border-radius: 4px; .player-image { position:relative; background-color: var(--secondary-alt); img { border-radius: 4px 4px 0 0; } .player-number { position: absolute; bottom: 5px; right: 5px; border-radius: 5px; border: 1px solid var(--tertiary); padding: 10px; background-color: var(--primary); color: var(--fg-alt); font-size: 1.5rem; font-weight: 800; } } .player-info { padding: 10px; .name { font-size: 2rem; font-weight: 900; } .position { color: var(--primary); font-size: 1rem; text-transform: uppercase; } .vitals { display: flex; flex-wrap: nowrap; padding-top: 10px; color: var(--secondary-alt); span { padding: 0 5px; text-align: left; &.height, &.weight { border-right: 1px solid var(--secondary-alt); } &.height { padding-left: 0; } } } } .socials { padding: 10px; border-top: 1px solid var(--secondary); background-color: var(--secondary); .email { width: 20px; } .facebook { width: 20px; filter: invert(32%) sepia(58%) saturate(2011%) hue-rotate(335deg) brightness(81%) contrast(119%); } .instagram { width: 20px; filter: invert(32%) sepia(58%) saturate(2011%) hue-rotate(335deg) brightness(81%) contrast(119%); } } } }}#main.staff{.content { max-width: 100%; display: flex; column-gap: 25px; row-gap: 45px; flex-wrap: wrap; .coach { margin-left: auto; margin-right: auto; display: grid; grid-template-columns: 350px; grid-template-rows: 400px auto 40px; border: 1px solid var(--secondary); border-radius: 5px; .coach-image { background-color: var(--secondary-alt); img { border-radius: 4px 4px 0 0; } } .coach-info { padding: 10px; .name { font-size: 2rem; font-weight: 900; } .coach-title { color: var(--primary); font-size: 1rem; text-transform: uppercase; } .bio { text-align: justify; p { padding: 10px 0; } } } .socials { padding: 10px; border-top: 1px solid var(--secondary); background-color: var(--secondary); .email { width: 20px; } .facebook { width: 20px; filter: invert(32%) sepia(58%) saturate(2011%) hue-rotate(335deg) brightness(81%) contrast(119%); } .instagram { width: 20px; filter: invert(32%) sepia(58%) saturate(2011%) hue-rotate(335deg) brightness(81%) contrast(119%); } } } }}#main.schedule{display:grid;h1 { margin: 10px 0 0 0; font-size: 1.5rem; } .season-summary { display: grid; width: 100%; grid-template-columns: 1fr 1fr 1fr 1fr; height: 88px; border: 1px solid var(--secondary); border-radius: 5px; .overall, .pct, .conf, .confpct, .streak, .home, .away, .neutral { display: grid; grid-template-rows: 20px 20px; .label { justify-content: center; align-content: center; text-align: center; font-weight: 400; color: var(--secondary-alt) } .value { justify-content: center; text-align: center; align-content: center; font-weight: 700; } } } .schedule-event { display: grid; grid-template-rows: 25px 50px 0 50px 50px; border: 1px solid var(--secondary); border-radius: 5px; justify-items: center; &.W, &.L { grid-template-rows: 25px 50px 75px 50px 50px; } .date-box { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border: 1px solid var(--tertiary); border-radius: 5px 5px 0 0; font-weight: 900; color: var(--fg-alt); background-color: var(--bg-alt); .month { justify-self: right; align-self: center; font-size: 0.75rem; line-height: 25px; padding-right: 5px; } .day { justify-self: left; align-self: center; font-size: 0.75rem; line-height: 25px; padding-left: 5px; } } &.home { .date-box { color: var(--fg-alt); background-color: var(--primary-alt); } } &.away { .date-box { color: var(--fg-alt); background-color: var(--primary-alt); } } .teams { width: 100%; padding: 15px 0; text-align: center; font-weight: 900; } .location { display: grid; grid-template-rows: 1fr 1fr; width: 100%; font-weight: 900; .name { justify-self: center; align-self: end; font-size: 1rem; text-align: center; } .venue { justify-self: center; align-self: start; text-transform: uppercase; color: var(--secondary); } } .result { display: grid; grid-template-rows: 1fr 0.5fr; justify-self: left; align-self: center; width: 100%; font-weight: 900; ._result { justify-self: center; align-self: end; font-size: 1.5rem; } .score { justify-self: center; align-self: start; text-transform: uppercase; color: var(--secondary); } } .time { height: 100%; padding: 15px 0; font-size: 1rem; font-weight: 900; text-align: center; align-content: end; } } .schedule-event + .schedule-event { margin-top: 10px; }}@media(min-width:577px){#main.roster,#main.staff{margin-left:auto;margin-right:auto}}@media(min-width:769px){body{grid-template-rows:153px 50px 1fr 50px;.header { grid-template-columns: 170px 1fr; img { height: 140px; } h1 { font-size: 50px; } }}#main.schedule{.season-summary { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; height: 44px; .overall, .pct, .conf, .confpct, .streak, .home, .away, .neutral { border-left: 1px solid var(--secondary); } } .schedule-event { grid-template-rows: initial; grid-template-columns: 80px 225px 190px 130px 120px; height: 88px; &.W, &.L { grid-template-rows: initial; } .date-box { grid-template-columns: initial; grid-template-rows: 0.75fr 1fr; border-radius: 5px 0 0 5px; height: 100%; .month { justify-self: center; align-self: end; padding: 0; } .day { justify-self: center; align-self: start; padding: 0; font-size: 2rem; } } .teams { padding-left: 15px; align-self: center; } .location { font-size: 1.5rem; } .result { ._result { font-size: 2rem; } } .time { align-content: center; font-size: 1.5rem; width: 100%; justify-self: center; align-self: center; } }}}@media(min-width:900px){#main.home{margin-left:auto;margin-right:auto;max-width:900px;text-align:justify;h1 { margin-top: 10px; }}#main.schedule{.content { margin: 0 auto; .schedule-event { grid-template-columns: 90px 275px 210px 180px 120px; } }}}@media(min-width:1200px){#main.roster,#main.staff{max-width:1200px}#main.schedule{.content { .schedule-event { grid-template-columns: 150px 275px 210px 400px 150px; } }}}