*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}body{display:flex;flex-direction:column;min-height:100vh}h1{font-family:Montserrat,sans-serif;font-size:2.5rem;font-weight:700;padding-bottom:1rem}h1.live{color:rgb(var(--main-color))}h2{font-family:Montserrat,sans-serif;font-size:1.75rem;font-weight:700;padding-bottom:1rem}h3{font-size:1.5rem;padding-bottom:.5rem}.header{background:rgb(var(--background-color));color:rgb(var(--text-color));padding:1rem;display:flex;justify-content:space-between;align-items:center}.logo{height:2rem}.search-box{display:none;padding:.5rem;border-radius:.25rem;border:none}.main{display:flex;flex:1;position:relative}.sidebar{background:rgb(var(--alternate-background-color));color:rgb(var(--text-color));width:15rem;padding:1rem;position:relative;display:none}.sidebar ul{list-style:none}.sidebar li{padding:.5rem 0}.content{background:rgb(var(--alternate-background-color));color:rgb(var(--text-color));flex:1;overflow-y:scroll;padding:1rem 1rem 7rem}.bottom-nav{background:rgb(var(--background-color));color:rgb(var(--text-color));color:#fff;display:flex;height:5rem;justify-content:space-around;padding:1rem;position:fixed;bottom:0;width:100%;z-index:100}.bottom-nav a,.bottom-nav button{background:rgb(var(--background-color));border:none;border-radius:.25rem;color:rgb(var(--text-color));cursor:pointer;font-size:1rem;font-weight:700;padding:.5rem 1.5rem;text-decoration:none;text-transform:capitalize}#live{color:rgb(var(--main-color));font-size:1.5rem}.drawer{background:rgb(var(--background-color));position:fixed;border-radius:1rem 1rem 0 0;bottom:5rem;color:rgb(var(--text-color));display:block;left:0;margin:0 1rem;padding:1rem;right:0;text-align:center;transform:translateY(100%);transition:transform .3s;z-index:10}.drawer.active{transform:translateY(0)}.close{position:absolute;top:1rem;right:1rem}.leagueContainer{align-content:center;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.leagueContainer>a{background:rgb(var(--text-color));border-radius:.5rem;color:rgb(var(--background-color));display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:.75rem;gap:.5rem;height:6rem;padding:.5rem;text-align:center;text-decoration:none;width:6rem}.leagueContainer>a>img{height:3rem}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(var(--background-color));justify-content:center;align-items:center;z-index:200}.modal-content{color:rgb(var(--text-color));padding:2rem;border-radius:.5rem;width:80%;max-width:31rem}.scores{display:flex;flex-wrap:wrap;justify-content:center;padding:0 0 1.5rem}.leagues{display:flex;flex-wrap:wrap;vertical-align:middle}.leagueSelector{align-items:center;background-color:rgba(var(--text-color),.5);border-radius:.5rem;color:rgb(var(--background-color));cursor:pointer;display:flex;margin:0 1rem 1rem 0;padding:.25rem 1rem;font-weight:700}.leagueSelector.active{background-color:rgb(var(--text-color))}.leagueSelector>img{height:1.5rem;padding:0 .5rem 0 0}.match{background-color:rgb(var(--alternate-background-color));border-radius:.5rem;display:grid;grid-template-areas:"homeScore logos awayScore" "homeTeam logos awayTeam" "time time time";padding:.5rem 1.5rem;position:relative}.match:before{border-radius:.5rem;content:"";inset:.4375rem 1.4375rem;position:absolute}.match.live:before{background-color:rgba(var(--main-color),.5)}.match.today:before{background-color:rgba(var(--secondary-color),.5)}.match.scheduled:before,.match.ended:before{background-color:rgba(var(--text-color),.5)}.matchTime{align-items:center;border-radius:0 0 .5rem .5rem;display:flex;grid-area:time;justify-content:center;justify-items:center;padding:.25rem;text-align:center;z-index:1}.match.live>.matchTime{background-color:rgb(var(--main-color))}.match.today>.matchTime{background-color:rgb(var(--secondary-color))}.match.scheduled>.matchTime{background-color:rgb(var(--alternate-background-color))}.match.ended>.matchTime{background-color:rgb(var(--text-color));color:rgb(var(--background-color))}.matchScore{background-color:rgb(var(--background-color));font-size:2rem;padding:.25rem .5rem;width:8rem;z-index:1}.match.today>.matchScore,.match.scheduled>.matchScore{font-size:1rem;height:4.25rem;overflow:hidden;padding:.75rem .5rem;text-overflow:ellipsis}.matchLogos{background-color:rgb(var(--background-color));height:4.25rem;position:relative;width:6rem}.matchLogoContainer{overflow:hidden;padding:1rem 0;position:absolute;width:4rem;top:-.875rem}.matchLogoContainer.away{left:3.25rem}.matchLogoContainer.home{right:3.25rem}.matchLogoContainer.away{transform:rotate(-15deg)}.matchLogo.away{transform:rotate(15deg) translate(-2rem)}.matchLogoContainer.home{transform:rotate(-15deg)}.matchLogo.home{transform:rotate(15deg) translate(2rem)}.matchLogo>img{height:4rem;object-fit:contain}.matchTeam{background-color:rgb(var(--background-color));font-size:.75rem;overflow:hidden;padding:.25rem .5rem;text-overflow:ellipsis;white-space:nowrap;width:8rem;z-index:1}.matchScore.away{border-radius:0 .5rem 0 0;grid-area:awayScore}.matchTeam.away{grid-area:awayTeam}.matchScore.home{border-radius:.5rem 0 0;grid-area:homeScore;text-align:right}.matchTeam.home{grid-area:homeTeam;text-align:right}.matchLogos{grid-area:logos}.matchLeague{align-items:center;background-color:rgb(var(--text-color));border-radius:0 .5rem .5rem 0;display:none;grid-area:league;justify-content:center;justify-items:center;width:4rem;z-index:1}.matchLeague>img{width:3rem}.textContainer{display:flex;flex-direction:column;justify-content:center;align-items:center}@media(min-width:575px){.match{grid-template-areas:"time homeScore logos awayScore league" "time homeTeam logos awayTeam league";padding:.5rem 1.5rem}.match.today>.matchScore,.match.scheduled>.matchScore{font-size:1.25rem}.matchTime{border-radius:.5rem 0 0 .5rem;width:4rem}.matchScore,.matchTeam{width:9rem}.matchScore.away,.matchScore.home{border-radius:0}.matchLeague{display:flex}}@media(min-width:768px){.drawer{display:none}.sidebar,.search-box{display:block}.scores{justify-content:flex-start}.bottom-nav{display:none}}:root{--main-color: 81, 175, 72;--main-color-light: 161, 204, 64;--secondary-color: 84, 133, 197;--secondary-color-light: 131, 213, 246;--background-color: 30, 30, 30;--alternate-background-color: 18, 18, 18;--text-color: 224, 224, 224;--light-text-color: 255, 255, 255;--accent-color: 255, 127, 0;--border-radius-s: .25em;--border-radius-m: .5em;--border-radius-l: .75em;--border-thickness-s: .0625em;--border-thickness-m: .125em;--border-thickness-l: .1875em;--margin-s: .125em;--margin-m: .25em;--margin-l: .5em;--margin-xl: 1em;--padding-s: .125em;--padding-m: .25em;--padding-l: .5em;--padding-xl: 1em;--padding-sm: var(--padding-s) var(--padding-m);--padding-ml: var(--padding-m) var(--padding-l);--padding-lxl: var(--padding-l) var(--padding-xl);--height-factor: .85em;--width-factor: .85em}