html {
  background-color: #6fa9e7;
  overflow: scroll;
  overflow-x: hidden;
}

strong {
  color: white;
}

::-webkit-scrollbar {
  width: 20px;
  border-radius: 25px;
}

::-webkit-scrollbar-track {
  background: #333333;
  border-radius: 0px;
}
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
  border-radius: 10px;
}

::selection {
  color: white;
  border-radius: 5px;
}

h1 {
  color: white;
  user-select: none;
}

h3 {
  color: white;
  user-select: none;
}

h5 {
  color: white;
  user-select: none;
}

h6 {
  color: #7cb0e7;
  background-color: #7cb0e7;
  width: fit-content;
  margin: 0 auto;
}

.input {
  background-color: #e6e6e6;
  border-radius: 5px;
}

.grid {
  display: grid;
  grid-template-columns: 500px 500px 500px 500px;
  grid-template-rows: auto;
  grid-template-areas:
    '0 0 0 0 0 0'
    '1 1 1 1 1 1'
    '2 2 2 2 2 2'
    '3 3 3 3 3 3'
    '4 4 4 4 4 4';
}

.listGrid {
  display: grid;
  grid-template-columns: 500px 500px 500px 500px;
  grid-template-rows: auto;
  grid-template-areas:
    '0 0 0'
    '1 1 1'
    '2 2 2'
    '3 3 3'
    '4 4 4';
}

.tb {
  font-size: 1.3vw;
  border-width: 0.5vh;
  border-radius: 1vh;
  height: 7vh;
  width: 7vw;
}

.upbutton {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: white;
  color: #333333;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
}

.tb:focus {
  outline: #ffffff !important;
  border: #ffffff !important;
  box-shadow: #ffffff !important;
}

*:active::after {
  outline: none !important;
}

@media only screen and (max-width: 600px) {
  html {
    background-color: #6fa9e7;
    overflow: scroll;
    overflow-x: hidden;
  }

  body {
    overflow-x: hidden;
  }

  strong {
    color: white;
  }

  ::-webkit-scrollbar {
    width: 20px;
    border-radius: 25px;
  }

  ::-webkit-scrollbar-track {
    background: none;
    border-radius: 0px;
  }
  ::-webkit-scrollbar-thumb {
    background: none;
    border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: none;
    border-radius: 10px;
  }

  ::selection {
    color: white;
    border-radius: 5px;
  }

  h1 {
    color: white;
    user-select: none;
  }

  h3 {
    color: white;
    user-select: none;
  }

  h5 {
    color: white;
    user-select: none;
    word-wrap: break-word;
    word-break: break-all;
    white-space: nowrap;
    text-align: left !important;
    padding-left: 1vw;
  }

  h6 {
    color: #7cb0e7;
    background-color: #7cb0e7;
    width: fit-content;
    margin: 0 auto;
  }

  .input {
    background-color: #e6e6e6;
    border-radius: 5px;
  }

  .tb {
    font-size: 6vw;
    border-width: 0.5vh;
    border-radius: 1vh;
    height: 10vh;
    width: 25vw;
    margin-top: 1vh;
    margin-right: 5vw;
  }

  .upbutton {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: white;
    color: #333333;
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
  }

  .tb:focus {
    outline: #ffffff !important;
    border: #ffffff !important;
    box-shadow: #ffffff !important;
  }

  *:active::after {
    outline: none !important;
  }
}