@font-face {
  font-family: Fauna;
  src: url("../../assets/fonts/Fauna.ttf");
}
@font-face {
  font-family: Equinox;
  src: url("../../assets/fonts/Equinox.otf");
}
/* End Fonts CSS */

body {
  min-height: 100vh;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: white;
  height: 100vh;
  background-color: #111219;
}

li {
  display: inline;
  width: 225px;
}

a {
  color: white;
  text-decoration: none !important;
}
a:hover {
  color: white;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Equinox;
}

button {
  background: transparent;
  color: white;
  outline: none;
}

.legend {
  color: #898989;
  font-weight: bolder;
}

.current {
  background: rgb(146, 254, 157);
  background: -moz-linear-gradient(
    50deg,
    rgba(146, 254, 157, 1) 0%,
    rgba(0, 201, 255, 1) 100%
  );
  background: -webkit-linear-gradient(
    50deg,
    rgba(146, 254, 157, 1) 0%,
    rgba(0, 201, 255, 1) 100%
  );
  background: linear-gradient(
    50deg,
    rgba(146, 254, 157, 1) 0%,
    rgba(0, 201, 255, 1) 100%
  );
  box-shadow: 0px 0px 50px -5px rgba(0, 201, 255, 0.3);
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}

.send {
  background: rgb(146, 254, 157);
  background: -moz-linear-gradient(
    50deg,
    rgba(146, 254, 157, 1) 0%,
    rgba(0, 201, 255, 1) 100%
  );
  background: -webkit-linear-gradient(
    50deg,
    rgba(146, 254, 157, 1) 0%,
    rgba(0, 201, 255, 1) 100%
  );
  background: linear-gradient(
    50deg,
    rgba(146, 254, 157, 1) 0%,
    rgba(0, 201, 255, 1) 100%
  );
  box-shadow: 0px 0px 50px -5px rgba(0, 201, 255, 0.3);
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;

  width: max-content;
  height: min-content;
}

.currentText {
  color: black;
}
.currentText:hover {
  color: black;
}

.nav-button {
  color: #898989;
}

.nav-button:hover {
  color: white;
}

.dashboard-card {
  background: rgb(0, 0, 0);
  background: -moz-linear-gradient(
    315deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgb(0, 0, 0) 30%
  );
  background: -webkit-linear-gradient(
    315deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgb(0, 0, 0) 30%
  );
  background: linear-gradient(
    315deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 1) 30%
  );
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
  min-height: 350px;
  overflow-y: scroll;
}


.dashboard-card-reversed {
  background: rgb(0, 0, 0);
  background: -moz-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 1) 30%
  );
  background: -webkit-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 1) 30%
  );
  background: linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 1) 30%
  );
}

.dashboard-card-mail {
  background: rgb(0, 0, 0);
  background: -moz-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 1) 30%
  );
  background: -webkit-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 1) 30%
  );
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 1) 40%
  );
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
  min-height: 350px;
}

.user-box input {
  width: 100%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  padding: 8px 0;
  font-size: 12px;
  color: #fff;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}

.user-box label {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

.user-box input:focus ~ label,
.user-box input:valid ~ label {
  top: -20px;
  left: 0;
  color: #be5631;
  font-size: 12px;
}

#message {
  width: 100%;
  height: 100%;
  resize: none;
  border: none;
  background-color: transparent;
  border: 1px solid #fff;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}