@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
:root {
  --primary-dark: #280d2b;
  --primary-light: #fdeeff;
  --green: #59a4a6;
  --yellow: #f0b622;
  --red: #d93434;
  --dark: var(--primary-dark);
  --light: var(--primary-light);
  --grey-light: #cfcfcf;
  --answer-good: var(--green);
  --answer-good-light: #c5ffdb;
  --answer-wrong: var(--red);
  --answer-wrong-light: #ffd5eb;
  --padding-top: 50px;
  --sidebar-max-width: 230px;
  --sidebar-bg: var(--dark);
  --font-name: 4em;
  --font-title: 2em;
}

.v-100 {
  min-height: 100vh;
}

body {
  font-family: "Montserrat", sans-serif;
  background-color: var(--light);
}

a, a:hover, a:focus, a:active {
  text-decoration: none;
  color: inherit;
}

.answer {
  border-radius: 10px;
  border: 1px solid;
  padding: 10px;
  margin-bottom: 10px;
}
.answer--good {
  color: var(--answer-good);
  background-color: var(--answer-good-light);
}
.answer--wrong {
  color: var(--answer-wrong);
  background-color: var(--answer-wrong-light);
}

.btn__new {
  padding-top: 2px;
  width: 50px;
  height: 50px;
  background: var(--dark);
  color: var(--light);
  display: flex;
  justify-content: center;
  border-radius: 50%;
  line-height: 1.5em;
  font-size: 2em;
  text-align: center;
  text-decoration: none;
}
.btn__new:hover {
  text-decoration: none;
  color: var(--green);
}

.statement {
  background-color: var(--dark);
  color: var(--light);
}

.ql-container {
  font-size: 1em !important;
}

.quill-container {
  background: white;
}

.record--tutorial {
  color: var(--dark);
}
.record__question--ref {
  font-size: 0.8em;
  color: var(--dark);
}

#wrapper {
  display: grid;
  grid-template-columns: var(--sidebar-max-width) auto;
  min-height: 100vh;
}
#wrapper #menu-title {
  background: var(--yellow);
  color: var(--dark);
  text-align: center;
  font-size: 2em;
  margin: 20px 0;
}

#sidebar-wrapper {
  position: relative;
  padding-top: var(--padding-top);
  background: var(--sidebar-bg);
  color: var(--light);
}
#sidebar-wrapper #logout {
  position: absolute;
  bottom: 20px;
  left: 50px;
}
#sidebar-wrapper .link {
  display: block;
  border-radius: 20px;
  background: var(--green);
  color: var(--dark);
  margin: 10px;
  padding: 5px 20px;
}
#sidebar-wrapper .link:hover {
  background: var(--yellow);
}
#sidebar-wrapper #title {
  text-align: center;
  margin-bottom: 40px;
  color: var(--light);
}
#sidebar-wrapper #title #project {
  font-size: 0.8em;
  letter-spacing: 15px;
}
#sidebar-wrapper #title #marthe {
  font-size: 1.4em;
  font-weight: bold;
  margin-top: -5px;
}

#main-content {
  padding-top: var(--padding-top);
}

#login #right-log {
  background: var(--dark);
  color: var(--light);
}
#login #icon {
  width: 80%;
  max-width: 500px;
  margin: 0 auto;
}
#login #icon img {
  width: 100%;
}
#login form {
  width: 100%;
  max-width: 300px;
}
#login #title {
  text-align: center;
}
#login #title #project {
  font-size: 1.5em;
  letter-spacing: 30px;
}
#login #title #marthe {
  font-size: var(--font-name);
  color: var(--dark);
  font-weight: bold;
  margin-top: -25px;
}

.isChecked {
  color: var(--green);
}

.notChecked {
  color: var(--red);
}

.subject-choice {
  padding: 5px 10px;
  background-color: var(--dark);
  color: white;
  border-radius: 20px;
  margin: 5px;
}
.subject-choice.active {
  background-color: var(--yellow);
}

/*# sourceMappingURL=app.output.css.map */