html, body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  
  background-color: #ffd1fc;
  font-family: "DM Mono", monospace;
  text-align: center;
  color: #0d1e4e;
  font-size: 20px;
}

body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: linear-gradient(to bottom, #ffd1fc, #fad0c6);
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

a:active, a:hover, a:visited {
  color: inherit;
}


.hidden {
  opacity: 0;
}


.main {
  width: 600px;
  margin: 0 auto;
}

.header {
  height: 216px;
}

.logo-etc {
  position: absolute;
  width: 600px;
}

.logo {
  width: auto;
  height: 50px;
  margin-top: 60px;
  margin-bottom: 12px;
  text-align: center;
}

.wordmark {
  font-weight: 500;
  line-height: 30px;
  font-size: 20px;
  color: #0d1e4e;
}

.soft {
  color: #986584;
}

.loading {
  text-align: left;
  margin-top: 80px;
  font-size: 24px;
  font-weight: 100;
  font-style: italic;
  opacity: 0.5;
}

.tagline {
  font-weight: 100;
  font-style: italic;
  margin-top: 27px;
  line-height: 30px;
}

.public-page-branding {
  position: absolute;
  top: 30px;
  right: 30px;
  cursor: pointer;
  display: inline-block;
}

.public-page-branding .logo {
  margin-top: 0;
}

.public-page-branding .wordmark {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.public-page-branding:hover .wordmark {
  opacity: 1;
}

.public-page-header {
  font-weight: 100;
  text-align: right;
  margin-top: 80px;
  margin-bottom: 81px;
  font-size: 36px;
  line-height: 50px;
}

.public-page-memories {
  font-style: italic;
}

.public-page-from {
  color: #cb99c1;
}

.public-page-name {
  color: #0d1e4e;
}

.public-page-branding {
  float: left;
}

.onememory {
  font-weight: 400;
  font-style: normal;
}

.hr {
  width: 100%;
  height: 1px;
  margin-top: 15px;
  margin-bottom: 15px;
  background-color: #e4b6df;
}

a {
  text-decoration: none;
}

.sign-out, .sign-in {
  position: absolute;
  top: 30px;
  display: inline-block;
  font-style: italic;
  font-size: 16px;
  color: #986584 !important;
  opacity: 0.7;
  cursor: pointer;
  z-index: 1000;
}

.sign-out:hover, .sign-in:hover {
  opacity: 1;
}

.sign-out {
  left: 30px;
}

.sign-in {
  right: 30px;
}

.entry {
  text-align: left;
  margin-top: 45px;
  margin-bottom: 300px;
}

.public-page .entry {
  margin-bottom: 80px;
}

.entries {
  margin-bottom: 250px;
}


.register {
  text-align: center;
  margin-top: 45px;
  margin-bottom: 300px;
}

.entry-date {
  font-weight: 100;
  text-transform: uppercase;
  font-size: 16px;
  line-height: 21px;
}

.entry-field-container {
  position: relative;
  display: inline-block;
}

.entry-field, .entry-text {
  width: 100%;
  font-family: "DM Mono", monospace;
  font-size: 20px;
  box-sizing: border-box;
  font-weight: 100;
  line-height: 30px;
  /*border-radius: 20px;*/
  caret-color: transparent;
  background-color: transparent;
  border: none;
  resize: none;
  padding: 0;
  margin: 0;
  color: #0d1e4e;
}

.register label {
  width: 30%;
  text-align: right;
  display: inline-block;
  padding-right: 2%;
  font-style: italic;
  font-weight: 100;
}

.register-heading {
  text-align: center;
  font-weight: 500;
  margin-bottom: 30px;
  font-style: italic;
}

.register-field {
  margin-bottom: 10px;
  text-align: left;
}

button {
  font-family: "DM Mono", monospace;
  font-size: 20px;
  color: #0d1e4e;
}

input {
  font-family: "DM Mono", monospace;
  font-size: 20px;
  box-sizing: border-box;
  font-weight: 100;
  line-height: 30px;
  background-color: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 20px;
  height: 40px;
  padding: 5px 20px;
  color: #0d1e4e;
}

input:focus {
  background-color: rgba(255, 255, 255, 0.4);
}

.register input {
  width: 35%;
}

.register input[type=email] {
  width: 50%;
}

.register-message {
  font-weight: 300;
  font-style: italic;
  margin-top: 30px;
  text-transform: lowercase;
}

.register-hint {
  font-style: italic;
  margin-bottom: 30px;
  line-height: 29px;
}

.or-sign-in {
  font-weight: 100;
  display: block;
  font-size: 18px;
}

.entry-text {
  white-space: pre-wrap;
}


.entry-field::placeholder {
  color: #986584;
  font-style: italic;
  opacity: 0.5;
}


.entry-field::selection, input::selection {
  background-color: #ffc7bc;
}

.entry-field:focus, input:focus {
  outline: none;
  box-shadow: none; 
}

.entry-field:focus::placeholder {
  color: transparent;
}

.public-toggle {
  float: right;
  font-size: 16px;
  font-style: italic;
  display: inline-block;
  position: relative;
  bottom: 4px;
}

.public-toggle-label {
  display: inline-block;
  position: relative;
  bottom: 7px;
  margin-right: 7px;
}

.entry-save {
  position: relative;
  bottom: 10px;
  z-index: 100;
  float: right;
}


.entry-edit {
  float: right;
  opacity: 0.7;
  margin-top: 20px;
}

.entry-edit:hover {
  opacity: 1;
}

.button {
  display: inline-block;
  padding: 5px 20px;
  border-radius: 15px;
  line-height: 20px;
  border: 1px solid white;
  font-style: italic;
  font-weight: 100;
  background-color: rgba(255, 244, 224, 0.2);
}

.lesser-button {
  font-style: italic;
  font-weight: 100;
  display: inline-block;
  font-size: 16px;
  line-height: 40px;
  opacity: 0.8;
  color: #986584;
}


.entry-cancel {
  float: left;
  position: relative;
  bottom: 10px;
  z-index: 100;
}

.register-button {
  line-height: 30px;
  border-radius: 20px;
  font-weight: 500;
  margin-top: 30px;
}

.lesser-button:hover {
  cursor: pointer;
  color: #0d1e4e;
}

.button:hover {
  cursor: pointer;
  background-color: rgba(255, 244, 224, 0.6);
}


.public-settings {
  text-align: left;
  padding-top: 30px;
  line-height: 35px;
  position: absolute;
  width: 600px;
}

.public-settings-section {
  margin-bottom: 30px;
}

.public-settings-label {
  font-style: italic;
  color: #986584;
  white-space: nowrap;
  font-weight: 100;
}

.public-settings-url {
}


.public-settings input {
  border-radius: 10px;
  padding: 3px;
  margin: 0;
  background-color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
}

.public-settings input:focus {
  background-color: rgba(255, 255, 255, 0.6);
}

.waiting {
  opacity: 0.5 !important;
}

.username-taken, .userinfo-saved {
  display: inline-block;
  font-style: italic;
  font-weight: 100;
  opacity: 0.8;
  margin-left: 15px;
}

.public-settings .button {
  margin-left: 15px;
}

input::placeholder {
  color: #b481a0;
  font-style: italic;
  font-weight: 100;
  opacity: 0.6;
}

.not-found {
  margin-top: 100px;
  font-style: italic;
  opacity: 0.7;
  font-weight: 100;
}


.small-icon {
  width: 24px; 
  height: 24px; 
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  position: relative;
  top: 4px;
  opacity: 0.3;
  cursor: pointer;
}

.small-icon:hover {
  opacity: 1;
}

.open-tab {
  background-image: url('/style/icon-open-tab.svg');
}

.clipboard {
  background-image: url('/style/icon-clipboard.svg');
}

.fade-enter-active {
  transition: opacity 0.5s ease; /* Adjust duration as needed */
}
.fade-enter-from, .fade-leave-to {
  /* Starting and ending opacity for fade */
  opacity: 0;
}
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fadeinonly-enter-active {
  transition: opacity 0.5s ease; /* Adjust duration as needed */
}
.fadeinonly-enter-from, .fade-leave-to {
  /* Starting and ending opacity for fade */
  opacity: 0;
}
.fadeinonly-leave-active {
  transition: none;
}

.delayedfade-enter-active {
  transition: opacity 0.5s ease; /* Adjust duration as needed */
  transition-delay: 0.6s;
}
.delayedfade-enter-from, .delayedfade-leave-to {
  /* Starting and ending opacity for fade */
  opacity: 0;
}
.delayedfade-leave-active {
  transition: opacity 0.5s ease;
}

@keyframes blink {
  /* Keep fully visible until just before halfway */
  0%, 40% {
    opacity: 1;
  }
  /* Quick fade out around the midpoint */
  50%, 90% {
    opacity: 0;
  }
  /* Stay hidden until the end of the cycle */
  100% {
    opacity: 1;
  }
}

@media only screen and (max-width: 600px) {


  body {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  }

  .main {
    width: 100%;
    padding: 4%;
    box-sizing: border-box;
  }

  .public-settings-label {
    font-size: 18px;
    position: relative;
    bottom: 5px;
  }

  .public-page-branding .wordmark {
    display: none;
  }

  .logo-etc, .public-settings {
    width: 96%;
  }

  .entry-field {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 15px;
  }


  .register label {
    display: block;
    width: 80%;
    margin: 0 auto;
    text-align: left;
  }

  .register input {
    margin-left: 10%;
    width: 60%;
    background-color: rgba(255, 255, 255, 0.3);
    margin-top: 7px;
    margin-bottom: 10px;
  }

  .register input:focus {
    background-color: rgba(255, 255, 255, 0.6);
  }

  .register input[type=email] {
    width: 80%;
  }

  .sign-out, .sign-in {
    top: 4vw;
  }

  .sign-out {
    left: 4vw;
  }

  .sign-in {
    right: 4vw;
  }

  .public-page-branding {
    top: 4vw;
    left: 2vw;
    right: unset;
  }
}

@media only screen and (min-width: 601px) {
  body {
    background-size: cover;
  }

  .entry-field::placeholder {
    transition: opacity 0.5s ease;
  }


  .entry-field.noplaceholder::placeholder {
    opacity: 0;
  }
}