@font-face { font-family: M42; src: url(/fonts/m42.TTF); } *{ font-family: M42; font-size: 10px; } .container { margin: auto; width: 70%; } .head-board { display: flex; margin: auto; justify-content: space-between; width: 100%; border: 2px solid black; border-bottom-color: white; border-bottom-width: 1px; border-top-left-radius: 10px; border-top-right-radius: 10px; background-color: black; } .btn-cont { margin: auto; display: flex; justify-content: space-between; width: 100.3%; } .leaderboard { display: flex; margin: auto; align-items: center; flex-direction: column; width: 100%; height: 50vh; overflow-y: scroll; overflow-x:visible; border: 2px solid black; background-color: black; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; } .leaderboard::-webkit-scrollbar { width: 0 !important } article{ width: 99.9%; display: flex; justify-content: space-between; border-bottom: 1px solid rgb(255, 255, 255); } p{ padding: 5px; text-align: start; } .num{ font-size: larger; color: rgb(255, 255, 255); } .faction{ color:rgb(0, 255, 115); } .headquarters{ color:rgb(86, 187, 255); } .symbol{ color:red; text-decoration: underline; } .credits{ color: rgb(250, 204, 88); } .ships{ color: rgb(146, 146, 146); } button{ margin: auto; border: 3px none none 3px; transition: 0.3s; /* Add transition on hover */ padding: 15px; /* 15px padding */ text-decoration: none; /* Remove underline */ font-size: 11px; /* Increase font size */ color: white; /* White text color */ } button:hover{ transition: ease-in-out; color: black; transition-duration: 0.3s; background-color: white; } .btn-test{ background-color: black; color: rgb(250, 204, 88); width: 50%; border-left: none; border-bottom: none; border-radius: 0px 0px 0px 10px; } .btn-test2{ background-color: black; color: rgb(86, 187, 255); border-bottom: none; border-right: none; border-left: none; border-radius: 0px 0px 10px 0px; width: 50%; }