*{margin:0;padding:0;box-sizing:border-box}body{font-family:"Titan One","Segoe UI",sans-serif;background:url(./bg-tile.gif) repeat center}a{text-decoration:none}.main{max-width:1080px;min-width:350px;margin:1rem auto}.header{margin-bottom:2rem;padding:1rem}.header .title,.header a{color:#191919;text-align:center}.header h4,.header h5{font-family:"Segoe UI","Arial",sans-serif;text-align:center;font-weight:400}nav{display:flex;width:100%;height:2.5rem;margin-bottom:3rem;justify-content:space-around;align-items:center;background-color:#191919}nav a{display:block;color:#f5f5f5;font-size:1.1rem;transition:font-size 200ms linear}nav a:hover{font-size:1.2rem}.grid{display:grid;width:inherit;grid-template-columns:repeat(3, 1fr);gap:1rem;align-items:center;justify-items:center;padding:1.5rem 2rem;background-color:#ccc}.grid .card{display:block;position:relative;width:300px;overflow:hidden}.grid .card:hover::after{content:attr(data-title);position:absolute;background-color:#191919;color:#f5f5f5;padding:5px;border-radius:4px;top:0;left:0;font-family:"Segoe UI","Arial",sans-serif;font-weight:500;font-style:italic;white-space:nowrap;z-index:1}.grid .card *{display:block;width:inherit}.grid .card .card-img{transition:transform 150ms linear}.grid .card .card-img:hover{transform:scale(1.2)}.grid .card .card-title{position:relative;padding:.5rem;height:4.5rem;font-size:1rem;text-align:center;letter-spacing:.1rem;color:#191919;background-color:#929292}.grid .card .card-title em{font-family:"Segoe UI","Arial",sans-serif}.categories{width:100%;display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.categories .category-wrapper{position:relative;padding:.2rem;width:150px;height:30px;text-align:center;background-color:#929292;overflow:hidden}input[type=radio]{display:block;position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;opacity:0}input[type=radio]:checked+div{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ccc}input[type=radio]:checked+div .tag{position:absolute;top:70%;left:50%;transform:translateX(-50%);width:80%;height:5px;border-radius:10px}input[type=radio]:checked+div .tag.n{background-color:#14c2c8}input[type=radio]:checked+div .tag.j{background-color:#aad742}input[type=radio]:checked+div .tag.i{background-color:#f1b604}input[type=radio]:checked+div .tag.a{background-color:#f48925}input[type=radio]:checked+div .tag.g{background-color:#eb5252}.newbie::before{content:"Newbie";color:#14c2c8;text-shadow:1px 1px 1px #191919}.junior::before{content:"Junior";color:#aad742;text-shadow:1px 1px 1px #191919}.intermediate::before{content:"Intermediate";color:#f1b604;text-shadow:1px 1px 1px #191919}.advanced::before{content:"Advanced";color:#f48925;text-shadow:1px 1px 1px #191919}.guru::before{content:"Guru";color:#eb5252;text-shadow:1px 1px 1px #191919}footer{position:relative;margin-top:1rem;text-align:center;text-transform:uppercase;cursor:pointer;background:linear-gradient(110deg, #191919 45%, gold 50%, #191919 55%);background-size:200% 150%;background-position:-200%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);transition:all 2.1s ease}footer:hover{transform:scale(1.1);background-position:0% 0}@media(max-width: 900px){.grid{grid-template-columns:repeat(2, 1fr)}}@media(max-width: 600px){.grid{grid-template-columns:1fr}.categories .category-wrapper{display:inline-block;width:-moz-fit-content;width:fit-content;padding:0 .2rem;font-size:.8rem}.categories .category-wrapper:first-child{padding-left:0}.categories .category-wrapper:last-child{padding-right:0}input[type=radio]{padding:.2rem}input[type=radio]:checked+div{position:static;padding:.2rem .3rem}}