* {
  margin: 0;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
    'Lucida Sans', Arial, sans-serif;
  font-size: 14px;
  cursor: default;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
  padding: 0;
}

canvas {
  width: 100%;
  height: 99%;
}

/* SIDE NAVBAR */
#sidenav {
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  background-color: #252527;
  overflow-x: hidden;
  padding-top: 30px;
  transition: 0.4s;
}

#sidenav h1 {
  padding: 10px 4px;
  margin-top: 20px;
  font-size: 30px;
  font-variant-caps: small-caps;
  background-color: #514c55;
  color: #bdbbc3;
  width: 250px;
}

#sidenav h2 {
  padding: 10px 4px;
  margin: 10px 0px;
  font-size: 20px;
  background-color: #514c55;
  color: #bdbbc3;
  width: 250px;
}

#sidenav h3 {
  padding: 2px;
  font-size: 20px;
  color: #bdbbc3;
  display: block;
  transition: 0.3s;
  cursor: default;
  background-color: #353238;
  width: 250px;
}

#sidenav a:hover {
  color: #a4a3a8;
}

#sidenav a {
  text-decoration: none;
  color: #6a696e;
  transition: 0.5s;
}

#closeNav {
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 36px;
  margin-left: 50px;
  color: #ffffff7c;
  transition: 0.5s;
}

#closeNav:hover {
  color: #ffffffd8;
  cursor: pointer;
}

#openNav {
  position: fixed;
  top: 10px;
  left: 10px;
  font-size: 50px;
  color: #ffffff7c;
  transition: 0.5s;
}

#openNav:hover {
  color: #ffffffd8;
  cursor: pointer;
}

.button-submit {
  width: 240px;
  padding: 10px;
  background-color: #4c4a4d;
  border: none;
  font-weight: bold;
  border-radius: 10px;
  color: #c5bfd3;
  margin-left: 5px;
  transition: 0.5s;
}

.button-submit:hover {
  background-color: #5d5562;
  color: #dedbe6;
  cursor: pointer;
}

.button-submit:active {
  background-color: #6d4a81;
}

h3 .material-icons {
  font-size: 22px;
  float: right;
  padding-right: 11px;
}

label {
  font-weight: bold;
  padding-left: 10px;
  transition: 0.3s;
  font-size: 14px;
}

label:hover {
  color: #dedbe6;
}

.block {
  padding: 5px;
  display: block;
  color: #a5a2ad;
  width: 200px;
}

#container {
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

table {
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

.top-score .material-icons {
  font-size: 20px;
}

.top-score {
  font-size: 20px;
}

.top-score-label {
  padding-left: 0;
}

#name-input::placeholder {
  color: #7b7680;
}

#name-input {
  color: #c5bfd3;
  width: 240px;
  margin-left: 5px;
  cursor: text;
}

#name-input:focus {
  border-color: #be8dda;
}

form h1 {
  background-color: transparent;
  margin: 0;
  margin-top: 10px;
}

[type='radio']:checked + span:after,
[type='radio'].with-gap:checked + span:after {
  background-color: #be8dda;
}

[type='radio']:checked + span:after,
[type='radio'].with-gap:checked + span:before,
[type='radio'].with-gap:checked + span:after {
  border: #be8dda;
}

[type='radio']:not(:checked) + span,
[type='radio']:checked + span {
  padding-left: 25px;
  font-size: 13px;
}

/********* MESSAGE SCROLLBAR *********/
::-webkit-scrollbar {
  width: 10px;
  height: fit-content;
}

::-webkit-scrollbar-track {
  background: none;
}

::-webkit-scrollbar-thumb {
  height: 15px;
  background-color: #4c4a4d;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #403f41;
}

/* MODAL */
.modal {
  position: fixed;
  top: 20%;
  left: 0;
  /* width:100%; */
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 25px;
}

section.modal-main {
  padding: 2%;
}

.modal-main {
  position: absolute;
  margin-top: 30px;
  width: 90%;
  height: auto;
  top: 50%;
  right: -40%;
  transform: translate(-50%, -50%);
}

.display-block {
  display: block;
}

.display-none {
  display: none;
}

h3#top-players {
  background-color: inherit;
  color: white;
}

th {
  font-size: 20px;
}

.btn {
  background-color: #36205d42;
}
.btn:hover {
  background-color: #c8bee0;
}

.btn:after {
  background-color: #c8bee0;
}