#notesContainer {
  margin: 5vh auto;
}

.note {
  height: 10vh;
  width: 90vw;
  border-radius: 2vh;
  border: 0.4vh solid #ccc;
  padding: 2vh;
  margin: 2vh auto;
  background-color: #fff;
  position: relative;
  overflow: hidden;
}

.dark .note {
  background-color: var(--priD);
  color: #fff;
}

#notepad {
  width: 80vw;
  height: 50vh;
  border: 0.4vh solid #ccc;
  border-radius: 3vh;
  padding: 2vh;
  margin: 0px 10vw;
  font-size: 3vh;
  background-color: #fff;
  outline: none;
  overflow: scroll;
}

#notepad ul {
  margin-left: 5vh;
}

.dark #notepad {
  background-color: var(--priD);
  color: #fff;
}

.stylers {
  width: 80vw;
  margin: 6vh 6vw 6vh 14vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3vh;
}

.stylers button {
  height: 8vh;
  width: 8vh;
  font-weight: 600;
  font-size: 1.8vh;
  background-color: #4A93FF;
  color: #fff;
  border: none;
  border-radius: 1vh;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

.dark .stylers button {
  box-shadow: 0 10px 15px rgba(360, 360, 360, 0.2);
}

#EdH1 {
  font-weight: 1000;
  font-size: 4vh
}

#EdH2 {
  font-weight: 800;
  font-size: 3vh
}

#EdBold {
  font-weight: 700;
  font-size: 2.6vh
}

.dark .st {
  color: #CCCCCC;
}

.delete-button,
.edit-button {
  height: 5vh;
  width: 8.8vh;
  position: absolute;
  right: 3.3vh;
  top: 10px;
  background-color: red;
  color: white;
  border: none;
  border-radius: 1vh;
}

.edit-button {
  position: absolute;
  right: 10vh;
  top: 10px;
  background-color: blue;
}

.commanders {
  display: grid;
  grid-template-columns: 40vw 40vw;
  margin: 4vh 5vw 4vh 5vw;
  width: 90vw;
  gap: 4vw;
  height: 6vh;
  text-align: center;
  font-weight: 600;
}

.commanders>* {
  padding-top: 2vh;
  height: 6vh;
  border-radius: 2vh;
  background: deepskyblue;
  box-shadow: 3vw 4vw 5vw rgba(0, 0, 0, 0.2);
}

.dark .commanders>* {
  box-shadow: 3vw 5vw 7vw rgba(360, 360, 360, 0.2);
}

#clearButton {
  background: #AAAAAA;
}