:root {
  --achtergrond: #405443;
  --laag1: #6e7e71;
  --laag2: #829e87;
  --laag3: #b3cbb8;
  --silhouette: #f0f5f1;
  --tekst-goud: #ffdf99;
  --sterren-klein: #d6b160;
  --sterren-groot: #ebd573;
  --rood: #8f4f4f;
  --transparent: rgba(0, 0, 0, 0);
  --transparentBlack: rgba(0, 0, 0, 0.5);
  --sterren-klein-rgb: rgb(214, 177, 96);
  --sterren-groot-rgb: rgb(235, 213, 115);
}

@font-face {
  font-family: amour;
  src: url("../font/Amour\ Stories.otf") format("opentype"),
    url("../font/Amour\ Stories.ttf") format("truetype");
}

@font-face {
  font-family: mathilde;
  src: url("../font/mathilde.otf") format("opentype");
}

body {
  font-family: 'amour';
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px;
  background-color: var(--achtergrond) !important;
  background: url('../images/stars2.png')center top no-repeat, url('../images/wijzenSter.png')right bottom no-repeat, url('../images/bolderkar.png')left bottom no-repeat, url('../images/background.png')center bottom no-repeat;
  background-size: cover, 20vh, 20vh, cover;
  color: var(--silhouette)
}

main {
  height: 100vh;
  width: 100vw;
}

/* Remove scrollbar for Chrome, Safari and Opera */
main::-webkit-scrollbar {
  display: none;
}

/* Remove scrollbar for IE, Firefox and Edge */
main {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.fontTitle {
  font-family: 'mathilde';
  font-size: xxx-large;
}

.card {
  margin-top: auto;
  margin-bottom: auto;
  width: 400px;
  background-color: var(--laag3);
}

.card-header h3 {
  font-family: 'mathilde';
  font-size: xxx-large;
  color: var(--achtergrond);
}

.card-footer div {
  color: var(--achtergrond);
}

input {
  background-color: var(--laag1) !important;
  color: var(--silhouette) !important;
}

input:focus {
  outline: 0 0 0 0 !important;
  box-shadow: 0 0 0 0 !important;
  border-color: var(--laag3) !important;
}

input[type=checkbox] {
  accent-color: var(--sterren-groot);
}

input[type=checkbox]:disabled {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--rood);
  background-color: var(--rood) !important;
  width: 13px;
  height: 13px;
  border-radius: 2px;
}

::placeholder {
  color: var(--laag3) !important;
  opacity: 1;
  /* Firefox */
}

::-ms-input-placeholder {
  /* Edge 12 -18 */
  color: var(--laag3) !important;
}

.list-group-item {
  background-color: var(--transparent);
}

.url {
  color: var(--tekst-goud) !important;
  padding-left: 5px;
}

.disabledItem {
  color: var(--rood);
  padding-left: 5px;
}

.navbar {
  background-color: var(--transparentBlack) !important;
}

.navbar-dark .navbar-nav .active>.nav-link,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .show>.nav-link {
  color: var(--sterren-groot);
}

#star1 {
  top: 8vh;
  left: 12vw;
  position: fixed;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  background: var(--sterren-groot-rgb);
}

#star1:hover,
#star2:hover,
#star3:hover,
#star4:hover,
#star5:hover,
#star6:hover,
#star7:hover,
#star8:hover,
#star9:hover,
#star10:hover {
  background: var(--sterren-groot);
  box-shadow: 0px 0px 6px 6px rgba(235, 213, 115, 0.4);
  cursor: none;
}

#star2 {
  top: 22vh;
  left: 49vw;
  position: fixed;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  background: var(--sterren-groot-rgb);
}

#star3 {
  top: 22vh;
  left: 22vw;
  position: fixed;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  background: var(--sterren-groot-rgb);
}

#star4 {
  top: 38vh;
  left: 81vw;
  position: fixed;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  background: var(--sterren-groot-rgb);
}

#star5 {
  top: 50vh;
  left: 64vw;
  position: fixed;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  background: var(--sterren-groot-rgb);
}

#star6 {
  top: 13vh;
  left: 76vw;
  position: fixed;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  background: var(--sterren-groot-rgb);
}

#star7 {
  top: 18vh;
  left: 92vw;
  position: fixed;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  background: var(--sterren-groot-rgb);
}

#star8 {
  top: 50vh;
  left: 30vw;
  position: fixed;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  background: var(--sterren-groot-rgb);
}

#star9 {
  top: 40vh;
  left: 3vw;
  position: fixed;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  background: var(--sterren-groot-rgb);
}

#star10 {
  top: 54vh;
  left: 70vw;
  position: fixed;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  background: var(--sterren-groot-rgb);
}