/* Color Palette: https://colordrop.io/palette/36735 */

body {
  overflow-x: hidden;
  margin: 0;
  background-color: #1a1a1d;
  display: flex;
}

@font-face {
  font-family: LogoFont;
  src: url("fonts/scm.ttf") format("truetype");
}

@font-face {
  font-family: TextFont;
  src: url("fonts/melaround.regular.otf") format("opentype");
}
/* ------------------------- Navbar Styles ------------------------- */
.navbar {
  display: flex;
  margin-left: auto;
  margin-right: auto;

  background-color: #3c215e;
  width: 100vw;
  position: absolute;
}

.nav-item-container {
  margin: 0 auto;
  align-items: right;
  padding: 0px;
}

.nav-title {
  font-family: "LogoFont";
  color: #ffffff;
  font-size: 50px;
  align-items: right;
}

.nav-logo {
  width: 75px;
  height: auto;
  margin: 0 auto;
  margin-right: 20px;
  padding: 5px;
}

.login {
  font-size: 25px;
  margin: 0 auto;
  background-color: #8a5ca7;
  border-radius: 4px;
  text-align: center;
  padding: 2px;
  border: 0px;
  box-shadow: 0px 2px 1px #000000;
  margin-right: -3px;
}

.login-text {
  font-family: "TextFont";
  text-align: center;
  padding: 10px;
  color: #ffffff;
  font-size: 25px;
}

/* ------------------------- End Navbar Styles ------------------------- */

/* ------------------------- Accent Bar Styles ------------------------- */

.accent {
  position: absolute;
  background-color: #6f3d91;
  padding: 2px;
  margin-top: 105px;
  width: 100vw;
}

.accent2 {
  position: absolute;
  background-color: #a47fbf;
  padding: 2px;
  margin-top: 120px;
  width: 100vw;
}

/* ------------------------- End Accent Bar Styles ------------------------- */

/* The popup form - hidden by default */
.form-popup {
  display: flex;
  border: 5px solid #000000;
  margin: auto auto;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  font-family: "TextFont";
  max-width: 500px;
  padding: 10px;
  background-color: #e6d5f2;
}

/* Full-width input fields */
.form-container input[type="text"],
.form-container input[type="password"] {
  font-family: sans-serif;
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type="text"]:focus,
.form-container input[type="password"]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
  font-family: "TextFont";
  font-size: 20px;
  background-color: #8a5ca7;
  color: white;
  padding: 16px 20px;
  border: 5px double #000000;
  cursor: pointer;
  width: 100%;
  margin-bottom: 10px;
  opacity: 0.8;
  border-radius: 14px;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  font-family: "TextFont";
  background-color: #b78fd3;
}

/* Add some hover effects to buttons */
.form-container .btn:hover,
.open-button:hover {
  opacity: 1;
}