@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');

body {
  background-image: url("/academy/images/bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  color: white;
  font-family: "Merriweather", sans-serif;
}

.cinemirror-body {
  color: rgb(17, 17, 17);
  background-image: none;
  background-size: contain;
  background-position: top;
}



.large-body {
  justify-self: normal;
  align-items: center;
  color: #000;
}

.hr-linear-gradient {
  height: 0.5rem;
  width: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(92, 90, 90, 0.4) 25%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0.4) 75%,
    rgba(255, 255, 255, 0) 100%
  );
}

.regular-font {
  font-family: "Merriweather", sans-serif;
}

/* login form */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: black;
}

.login-form select {
  padding: 1rem;
}

.login-form input {
  padding: 1rem;
}

.login-form button {
  padding: 1rem;
  background-color: #110d0c;
  color: white;
  font-weight: bold;
  border-radius: 0.5rem;
}

.attachment__caption {
  display: none !important;
}

.approve-buttons {
  margin-top: 3rem;
}

.approve-buttons a {
  padding: 1rem;
  color: white;
  font-weight: bold;
}

.approve-buttons a:first-child {
  background-color: #d60404;
}

.approve-buttons a:last-child {
  background-color: #44403C;
  color: white;
}

ul {
  list-style: disc;
  padding-left: 1.25rem;
}

ol {
  list-style: decimal;
  padding-left: 1.25rem;
}

.note-editor,
.note-editor .note-editable,
.note-editor .note-toolbar {
    background: white !important;
}

h1,
h2,
h3,
h4 {
  font-family: 'Playfair Display', serif;
  color: #581C0C;
}

.font-hand {
  font-family: 'Kalam', cursive;
}

.note-paper {
  background: #ffffff;
  padding: 2rem 2.5rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  position: relative;
}

.washi-tape {
  position: absolute;
  width: 10rem;
  height: 2.5rem;
  background-color: rgba(254, 226, 226, 0.7);
  border-left: 1px dashed rgba(0, 0, 0, 0.1);
  border-right: 1px dashed rgba(0, 0, 0, 0.1);
  opacity: 0.8;
}

.polaroid {
  background: #fff;
  padding: 1rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border: 1px solid #F1F0E8;
  position: relative;
  margin-bottom: 3rem;
}

.polaroid-img-container {
  background-color: #E5E7EB;
  width: 100%;
  padding-top: 75%;
  /* 4:3 aspect ratio */
  position: relative;
}

.polaroid-img-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9CA3AF;
  text-align: center;
}

.polaroid-caption {
  font-family: 'Kalam', cursive;
  font-size: 1.5rem;
  text-align: center;
  margin-top: 1rem;
  color: #57534E;
}

.form-checkbox {
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid #A8A29E;
  border-radius: 0.25rem;
  display: inline-block;
  position: relative;
  vertical-align: -3px;
  margin-right: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.form-checkbox:checked {
  background-color: #DC2626;
  border-color: #DC2626;
}

.form-checkbox:checked::after {
  font-size: 1rem;
  font-weight: bold;
  color: white;
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.form-radio {
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid #A8A29E;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  vertical-align: -3px;
  margin-right: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.form-radio:checked {
  border-color: #DC2626;
}

.form-radio:checked::after {
  content: '';
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background-color: #DC2626;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.form-textarea,
.form-input {
  width: 100%;
  font-family: 'Kalam', cursive;
  font-size: 1.25rem;
  padding: 0.75rem 1rem;
  border: 2px dashed #D6D3D1;
  border-radius: 0.375rem;
  background-color: #FAF9F6;
  transition: border-color 0.2s, box-shadow 0.2s;
  line-height: 1.5;
}

.form-textarea:focus,
.form-input:focus {
  outline: none;
  border-style: solid;
  border-color: #F87171;
  box-shadow: 0 0 0 3px #FEE2E2;
  background-color: #fff;
}

.filmstrip-divider {
  height: 3.5rem;
  width: 100%;
  background-color: #292524;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 1rem;
  padding-right: 1rem;
  overflow: hidden;
  margin: 3rem 0;
}

.filmstrip-sprocket {
  width: 1rem;
  height: 1rem;
  background-color: #FEFDF8;
  border-radius: 0.125rem;
}

#editor-container {
  --bn-colors-editor-text: #333;
  --bn-colors-editor-background: #f9f9f9;
  min-height: 400px;
  border: 1px solid #ddd;
}

.movie-list {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.approve-buttons {
  margin-top: 3rem;
}

.approve-buttons a {
  padding: 1rem;
  color: white;
  font-weight: bold;
}

.approve-buttons a:first-child {
  background-color: #d60404;
}

.approve-buttons a:last-child {
  background-color: #44403C;
  color: white;
}

/* login form */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.login-form input {
  padding: 1rem;
}

.login-form button {
  padding: 1rem;
  background-color: #110d0c;
  color: white;
  font-weight: bold;
  border-radius: 0.5rem;
}