.update-password .password-rules, .login-contents .login-content form .password-rules, .login-contents .sign-up-content form .password-rules, .sign-up-contents .login-content form .password-rules, .sign-up-contents .sign-up-content form .password-rules {
  display: none;
  margin: 20px 0;
}
.update-password .password-rules li, .login-contents .login-content form .password-rules li, .login-contents .sign-up-content form .password-rules li, .sign-up-contents .login-content form .password-rules li, .sign-up-contents .sign-up-content form .password-rules li {
  color: #D96767;
}

*, a, *:after, *:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
}

.beginning-header {
  position: relative;
  width: 100%;
  height: 400px;
}
@media (min-width: 1000px) {
  .beginning-header {
    height: 600px;
  }
}
.beginning-header video {
  object-fit: cover;
  width: 100%;
  height: 100%;
  filter: brightness(50%);
}
.beginning-header .header-text {
  z-index: 5;
  position: absolute;
  top: 20px;
  color: #fff;
}
@media (min-width: 1000px) {
  .beginning-header .header-text {
    top: 100px;
    left: 50px;
  }
}
.beginning-header .header-text .logo {
  color: #fff;
  font-size: 20px;
}
.beginning-header .header-text .logo i {
  padding-right: 10px;
}
.beginning-header .header-text p, .beginning-header .header-text .annotation-detail .container a, .annotation-detail .container .beginning-header .header-text a, .beginning-header .header-text .privacy-policies a, .privacy-policies .beginning-header .header-text a {
  margin: 60px 0 0 0;
  line-height: 35px;
  font-family: "Dancing Script", cursive;
  font-size: 25px;
}
.beginning-header .header-text h1 {
  margin: -50px 0 30px 0;
}
.beginning-header .header-text .btn-primary {
  width: 150px;
  color: #fff;
  border: 2px solid #fff;
  background-color: transparent;
}
.beginning-header .header-text .btn-primary:hover {
  background-color: #fff;
  color: #000;
}
.beginning-header .svg {
  width: 100%;
  position: absolute;
  bottom: -10px;
  color: #fff;
}

main .cookies-alert {
  display: none;
  width: 95%;
  max-width: 500px;
  background-color: #fff;
  padding: 40px 20px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-radius: 10px;
  position: fixed;
  z-index: 11;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
main .cookies-alert p, main .cookies-alert .annotation-detail .container a, .annotation-detail .container main .cookies-alert a, main .cookies-alert .privacy-policies a, .privacy-policies main .cookies-alert a {
  font-size: 20px;
}
main .cookies-alert button {
  margin-right: 10px;
}
main .btn-theme {
  z-index: 10;
  cursor: pointer;
  background-color: #0077B6;
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
  font-size: 40px;
}
main .about-platform {
  max-width: 1050px;
  text-align: center;
  margin: 50px auto;
}
main .about-platform h2 {
  font-size: 30px;
}
main .about-platform h3 {
  font-size: 25px;
  margin: 40px 0 40px 0;
}
main .about-platform .computer-img {
  margin-top: 20px;
  width: 350px;
}
main .about-platform p, main .about-platform .annotation-detail .container a, .annotation-detail .container main .about-platform a, main .about-platform .privacy-policies a, .privacy-policies main .about-platform a {
  font-size: 20px;
}
main .platform-values {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
main .platform-values h2 {
  font-size: 30px;
  margin-bottom: 30px;
}
main .platform-values .cards .card {
  max-width: 350px;
  margin: 0 auto;
  height: 550px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  text-align: center;
  letter-spacing: 2px;
  word-spacing: 2px;
  border-radius: 9px;
}
main .platform-values .cards .card img {
  width: 150px;
  height: 150px;
  margin: 40px auto 40px auto;
  border-radius: 50%;
  box-shadow: 7px 7px 5px grey;
}
main .platform-values .cards .card h3 {
  margin-top: 20px;
  letter-spacing: 3px;
  font-family: "Coda Caption", sans-serif;
}
main .platform-values .cards .card h3 font {
  size: 23px;
  weight: bold;
}
main .platform-values .cards .card p, main .platform-values .cards .card .annotation-detail .container a, .annotation-detail .container main .platform-values .cards .card a, main .platform-values .cards .card .privacy-policies a, .privacy-policies main .platform-values .cards .card a {
  width: 90%;
  margin: 0 auto 0 auto;
  line-height: 30px;
  letter-spacing: 2px;
  word-spacing: 2px;
}
main .newsletter {
  width: 100%;
  background-color: #0077B6;
  text-align: center;
  margin: 70px 0 50px 0;
  padding: 50px 0;
  color: #fff;
}
main .newsletter h2 {
  margin-bottom: 30px;
  font-size: 30px;
}
main .newsletter form {
  width: 100%;
}
main .newsletter form input {
  padding: 10px;
  border-radius: 5px;
  border: none;
}
main .newsletter form input[type=submit] {
  background-color: rgba(175, 211, 222, 0.49);
  color: #fff;
}
main .newsletter form input[type=email] {
  width: 65%;
  max-width: 500px;
}
main .developer {
  max-width: 1050px;
  margin: 0 auto;
}
main .developer h2 {
  font-size: 30px;
}
main .developer .developer-img {
  position: relative;
  margin: 30px 0;
}
main .developer .developer-img img {
  width: 250px;
  border-radius: 50%;
  position: absolute;
}
main .developer .developer-img .blob {
  width: 270px;
  height: 270px;
  background-image: linear-gradient(45deg, #0077B6 0%, #0077B6 100%);
  animation: morpheus 10s linear infinite;
}
@keyframes morpheus {
  0% {
    border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
  }
  20% {
    border-radius: 60% 40% 40% 60%/60% 25% 75% 40%;
  }
  40% {
    border-radius: 70% 30% 65% 35%/80% 45% 55% 20%;
  }
  60% {
    border-radius: 30% 70% 70% 30%/20% 30% 70% 80%;
  }
  80% {
    border-radius: 40% 60% 40% 60%/70% 55% 45% 30%;
  }
  100% {
    border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
  }
}
main .developer p, main .developer .annotation-detail .container a, .annotation-detail .container main .developer a, main .developer .privacy-policies a, .privacy-policies main .developer a {
  font-size: 20px;
  text-align: center;
}

footer {
  margin: 50px 0 -30px 0;
  padding: 50px 0 0 0;
  background-color: #0077B6;
  color: #fff;
  text-align: center;
}
footer h2 {
  margin-bottom: 30px;
}
footer .contact {
  max-width: 1050px;
  margin: 0 auto;
}
footer .contact .icon {
  width: 70px;
  height: 70px;
  border: 1px solid grey;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
}
footer .contact .icon i {
  font-size: 40px;
}
footer .contact p span, footer .contact .annotation-detail .container a span, .annotation-detail .container footer .contact a span, footer .contact .privacy-policies a span, .privacy-policies footer .contact a span {
  font-weight: bold;
}
footer .contact-form {
  margin-top: 50px;
}
footer .contact-form .form-control {
  background-color: transparent;
  margin-bottom: 10px;
  border-width: 3px;
}
footer .contact-form h3 {
  margin-bottom: 50px;
}
footer .contact-form form {
  margin-top: 30px;
}
footer .contact-form form .form-control {
  color: #fff;
}
footer .contact-form form .form-control::placeholder {
  color: #fff;
}
footer hr {
  width: 90%;
  max-width: 700px;
  margin: 30px auto;
}
footer .copyright {
  padding: 30px 0;
  opacity: 0.5;
}

.privacy-policies {
  text-align: center;
  margin-top: 50px;
}
.privacy-policies p, .privacy-policies .annotation-detail .container a, .annotation-detail .container .privacy-policies a, .privacy-policies a {
  font-size: 20px;
  margin-top: 30px;
}
.login, .sign-up {
  width: 100%;
  height: 100vh;
  background: linear-gradient(-135deg, #c850c0, #4158d0);
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-contents, .sign-up-contents {
  text-align: center;
  display: flex;
  align-items: center;
  max-width: 1000px;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px 0;
}
@media (min-width: 1000px) {
  .login-contents, .sign-up-contents {
    padding: 100px 0;
  }
}
.login-contents img, .sign-up-contents img {
  width: 300px;
}
.login-contents h1, .sign-up-contents h1 {
  margin-bottom: 20px;
}
.login-contents .login-content, .login-contents .sign-up-content, .sign-up-contents .login-content, .sign-up-contents .sign-up-content {
  text-align: center;
}
.login-contents .login-content .login-social, .login-contents .sign-up-content .login-social, .sign-up-contents .login-content .login-social, .sign-up-contents .sign-up-content .login-social {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.login-contents .login-content .login-social #buttonDiv, .login-contents .sign-up-content .login-social #buttonDiv, .sign-up-contents .login-content .login-social #buttonDiv, .sign-up-contents .sign-up-content .login-social #buttonDiv {
  transform: scale(1.2);
  margin: 5px 20px 0 0;
}
.login-contents .login-content .login-social #buttonDiv:hover, .login-contents .sign-up-content .login-social #buttonDiv:hover, .sign-up-contents .login-content .login-social #buttonDiv:hover, .sign-up-contents .sign-up-content .login-social #buttonDiv:hover {
  transform: rotate(45deg) scale(1.2);
  transition: 0.8s;
}
.login-contents .login-content .login-social .facebook, .login-contents .sign-up-content .login-social .facebook, .sign-up-contents .login-content .login-social .facebook, .sign-up-contents .sign-up-content .login-social .facebook {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50%;
  display: flex !important;
  justify-content: center;
  align-items: center !important;
  font-size: 25px;
  background-color: #fff;
  color: #0077B6;
  border: 0.5px solid grey;
}
.login-contents .login-content .login-social .facebook:hover, .login-contents .sign-up-content .login-social .facebook:hover, .sign-up-contents .login-content .login-social .facebook:hover, .sign-up-contents .sign-up-content .login-social .facebook:hover {
  transform: rotate(30deg);
  transition: 0.8s;
}
.login-contents .login-content .login-social .google, .login-contents .sign-up-content .login-social .google, .sign-up-contents .login-content .login-social .google, .sign-up-contents .sign-up-content .login-social .google {
  margin-right: 20px;
}
.login-contents .login-content form .alert-danger, .login-contents .sign-up-content form .alert-danger, .sign-up-contents .login-content form .alert-danger, .sign-up-contents .sign-up-content form .alert-danger {
  display: none;
  padding: 5px;
}
.login-contents .login-content form .form-control, .login-contents .sign-up-content form .form-control, .sign-up-contents .login-content form .form-control, .sign-up-contents .sign-up-content form .form-control {
  padding: 10px;
  margin-bottom: 10px;
}
.login-contents .login-content form a, .login-contents .sign-up-content form a, .sign-up-contents .login-content form a, .sign-up-contents .sign-up-content form a {
  font-size: 17px;
  color: #212124;
}

.update-password {
  text-align: center;
}
.update-password .container .alert-danger {
  display: none;
  padding: 5px;
}
.update-password .container h1 {
  margin: 50px 0 30px 0;
}
.update-password .container form .form-control {
  width: 100%;
  max-width: 700px;
  padding: 10px;
  margin: 0 auto 10px auto;
}
.update-password .container a {
  font-size: 20px;
}
.annotations-header {
  height: 80px;
  width: 100%;
  background-color: #0077B6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 30px;
  padding: 0 15px;
}
.annotations-header h2 {
  line-height: 80px;
}
.annotations-header h2 a {
  color: #fff;
}
.annotations-header .btn-success {
  width: 100px;
  margin-left: 15px;
}
.annotations-header .bi-gear {
  cursor: pointer;
  color: #fff;
}

.annotations {
  margin: 50px auto 100px auto;
}
.annotations h1 {
  text-align: center;
  margin-bottom: 50px;
}
.annotations .annotation {
  width: 100%;
}
.annotations .annotation .annotation-header {
  padding: 0 10px;
  background-color: #0077B6;
  border-radius: 10px 10px 0 0;
  height: 80px;
  line-height: 80px;
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}
.annotations .annotation .annotation-header p, .annotations .annotation .annotation-header .annotation-detail .container a, .annotation-detail .container .annotations .annotation .annotation-header a, .annotations .annotation .annotation-header .privacy-policies a, .privacy-policies .annotations .annotation .annotation-header a {
  width: 90%;
  overflow: scroll;
}
.annotations .annotation .annotation-header ul {
  display: flex;
}
.annotations .annotation .annotation-header ul li {
  font-size: 25px;
  cursor: pointer;
}
.annotations .annotation .annotation-header ul .bi-trash {
  margin-right: 15px;
}
.annotations .annotation .annotation-main {
  height: 300px;
  padding: 20px;
  background-color: rgba(175, 211, 222, 0.49);
  border-radius: 0 0 10px 10px;
  font-size: 20px;
}
.annotations .annotation .annotation-main a {
  color: #0077B6;
}
.annotations .search-annotations form {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
}
.annotations .search-annotations form input {
  width: 90%;
  max-width: 450px;
  padding: 12px;
  border-radius: 5px 0 0 5px;
  border: 1px solid grey;
}
.annotations .search-annotations form .bi-search {
  height: 50px;
  padding: 10px;
  color: #fff;
  background-color: green;
  border: none;
  border-radius: 0 5px 5px 0;
}

#no-annotations, .annotation-detail .no-annotation {
  display: none;
  margin: 50px auto;
  text-align: center;
}
#no-annotations img, .annotation-detail .no-annotation img {
  width: 400px;
}
#no-annotations h3, .annotation-detail .no-annotation h3 {
  padding-bottom: 10px;
}
#no-annotations a, .annotation-detail .no-annotation a {
  font-size: 20px;
}

.annotation-detail {
  margin-top: 50px;
  text-align: center;
}
.annotation-detail .container {
  max-width: 800px;
}
.annotation-detail .container p, .annotation-detail .container a {
  font-size: 20px;
}
.menu {
  width: 100%;
  height: 100vh;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.menu h1 {
  margin-bottom: 20px;
}
.menu nav {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.menu nav a {
  width: 100%;
  max-width: 700px;
  margin-bottom: 20px;
  background-color: #0077B6;
  padding: 15px;
  border-radius: 10px;
  color: #fff;
  font-size: 20px;
}

.annotation-form {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  text-align: center;
}
.annotation-form h1 {
  margin-bottom: 30px;
}
.annotation-form form {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.annotation-form form input {
  margin-bottom: 10px;
  padding: 10px;
}
.annotation-form form textarea {
  margin-bottom: 10px;
}
.annotation-form a {
  font-size: 20px;
}

.delete, .logout {
  text-align: center;
  margin-top: 50px;
}
.delete h1, .logout h1 {
  margin-bottom: 30px;
}
.delete input, .logout input {
  background-color: red;
  color: #fff;
  padding: 10px 15px 10px 15px;
  border: none;
  border-radius: 5px;
  margin-right: 30px;
}
.delete input:hover, .logout input:hover {
  box-shadow: 0 0 5px #ff96ad, 0 0 25px #ff96ad, 0 0 50px #ff96ad, 0 0 200px #ff96ad;
}
.delete a, .logout a {
  font-size: 20px;
}

.success {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.success div {
  text-align: center;
  width: 95%;
  max-width: 400px;
  padding: 60px;
  border-radius: 4px;
  box-shadow: 0 2px 3px #C8D0D8;
  display: inline-block;
  margin: 50px auto;
}
.success div h1 {
  color: #88B04B;
  font-family: "Nunito Sans", "Helvetica Neue", sans-serif;
  font-weight: 900;
  font-size: 40px;
  margin: 15px 0 10px 0;
}
.success div i {
  color: #9ABC66;
  font-size: 100px;
  line-height: 100px;
  margin-left: -15px;
}
.success div a {
  font-size: 20px;
  color: #19a3f7;
}
.success div p, .success div .privacy-policies a, .privacy-policies .success div a, .success div .annotation-detail .container a, .annotation-detail .container .success div a {
  color: #404F5E;
  font-family: "Nunito Sans", "Helvetica Neue", sans-serif;
  font-size: 20px;
  margin: 0;
  padding-bottom: 20px;
}

.dark-mode {
  background-color: #212124;
  color: #fff;
}
.dark-mode svg {
  color: #212124;
}
.dark-mode .cards .card {
  background-color: #0077B6;
}
.dark-mode main .cookies-alert {
  background-color: #212124;
  box-shadow: #0077B6 0px 5px 15px;
}
.dark-mode main .btn-theme {
  color: #fff;
}
.dark-mode footer .form-control::placeholder {
  color: #fff;
}
.dark-mode footer input[type=submit] {
  color: #fff;
}
.dark-mode .login, .dark-mode .sign-up {
  background: linear-gradient(-135deg, #0077B6, #625F5F);
}
.dark-mode .login-contents, .dark-mode .sign-up-contents {
  background-color: #212124;
}
.dark-mode .login-contents form a, .dark-mode .sign-up-contents form a {
  color: #fff;
}
.dark-mode .annotations .annotation-main a {
  color: rgba(175, 211, 222, 0.49);
}
.dark-mode .success p, .dark-mode .success .privacy-policies a, .privacy-policies .dark-mode .success a, .dark-mode .success .annotation-detail .container a, .annotation-detail .container .dark-mode .success a {
  color: #fff;
}

/*# sourceMappingURL=style.css.map */