@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap";*{margin:0;padding:0;box-sizing:border-box}@keyframes pulse{0%{transform:scale(1);color:transparent}10%{transform:scale(3);color:#b22222}to{transform:scale(3);color:transparent}}body{font-family:Roboto,sans-serif;background-color:#111;color:#ddd;letter-spacing:4px}body .loader{display:grid;place-items:center;height:100vh}body .loader .loading{font-size:6.25rem;animation:pulse 1s linear infinite}body .wrapper{display:flex;flex-direction:column;align-items:center;height:100vh}body .wrapper .heading{text-transform:uppercase;font-size:1rem;font-weight:700;margin:.25rem 0;border-radius:.5rem;color:#b22222;text-shadow:1px 0 0 #fff,-1px 0 0 #fff,0 1px 0 #fff,0 -1px 0 #fff}body .wrapper ul{background-color:#000}body .wrapper ul li{list-style-type:none;font-size:1.25rem;font-weight:700;width:22rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid firebrick}body .wrapper ul li:hover:before,body .wrapper ul li:hover:after{content:"🔥"}body .wrapper ul li:hover{background-color:#b22222;transition:background-color 1s}body .wrapper ul li:hover .robohash:first-child{transform:scaleX(1)}body .wrapper ul li:hover .robohash:last-child{transform:scaleX(-1)}body .wrapper .robohash{width:3rem;height:3rem;cursor:progress}body .wrapper .robohash:first-child,body .wrapper .robohash:first-child:first-child:hover{transform:scaleX(-1)}body .wrapper .robohash:last-child{transform:scaleX(1)}body .wrapper .robohash:last-child:last-child:hover{transform:scaleX(1)}body .wrapper .robohash:hover~.robohash{transform:rotate(30deg)}body .wrapper .btn{display:flex;align-items:center;justify-content:center;padding:1rem 0;margin:2rem auto .25rem;width:22rem;background-color:#b22222;color:#ddd;text-transform:uppercase;letter-spacing:2px;font-size:1.25rem;font-weight:bolder;border:none;border-radius:.5rem;cursor:pointer;transition:background-color .3s}body .wrapper .btn:hover{background-color:#ddd;color:#b22222}body .wrapper label{text-transform:uppercase;margin-top:.25rem;padding:.5rem 0 .5rem 2rem;font-weight:700;width:22rem;display:flex;align-items:center;border:1px solid firebrick;cursor:pointer}body .wrapper label:hover{background-color:#b22222;transition:background-color .3s}body .wrapper label input{width:1.5rem;height:1.5rem;margin-right:1rem;cursor:pointer;background-color:transparent}body .wrapper label input[type=checkbox]{appearance:none;border:.5rem solid firebrick;border-radius:50%}body .wrapper label input[type=checkbox]:checked{background-color:#ddd;border:.5rem solid #080}body .wrapper label input[type=checkbox]:not(:checked):hover{background-color:inherit;border:.25rem solid #ddd}body .wrapper label input[type=checkbox] .label-select-all{border:none}body .wrapper label input[type=checkbox] .label-select-all .select-all{width:2rem;height:1rem}body .wrapper .add-student-form{margin-top:.5rem}body .wrapper .add-student-form input{width:17.75rem;padding:1rem;font-size:1rem;border:none;outline:none;border-radius:.5rem 0 0 .5rem}body .wrapper .add-student-form button{padding:1rem;font-size:1rem;font-weight:700;background-color:#b22222;color:#ddd;border:none;border-left:1px solid firebrick;border-radius:0 .5rem .5rem 0;cursor:pointer;transition:background-color .3s}body .wrapper .add-student-form button:hover{background-color:#fff;color:#b22222;border-left:1px solid firebrick}body .wrapper .add-student-form button:active{color:#ddd;background-color:#111;box-shadow:inset 0 0 1rem .25rem #b22222}