@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body {
  min-height: 100vh;
}

#content {
  flex: 1 calc(100vh - 110px);
  display: flex;
  justify-content: space-around;
  justify-content: center;
  /* position: relative; */
  /* background-color: rgb(111, 119, 131); */
  /* background-color: lightslategray; */
}
 
/* left section is empty */
.empty-section {
  display: flexbox;
  position: relative;
  width: 20vw;
}

.centered-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 60vw; 
}

.right-section {
  display: flex;
  flex-direction: column;
  align-items: left;
  width: 20vw;
  white-space: nowrap;
  position: sticky;
  top: 5px;
}

/* puts the two columns next to each other unless the screen size is too narrow*/
@media (max-width: 980px) {
  #content {
    flex-direction: column;
  }
  .empty-section {
    display: none;
  }
  .centered-section {
    width: 100vw;
  }
  .about {
    width: 80vw;
  }
  .right-section {
    margin: auto;
  }
} 



footer {
  min-height: 50px;
}

.navbar-nav {
  margin-left: 3vw;
  margin-right: 3vw; 
}

main {
  display: flex;
  flex-direction: column;
}

.recentImg {
  border-radius: 1.3rem;
}

#selectedImage {
  border-radius: .8rem;
}



/* DarkMode */

.checkmark {
  display: none;
}

.active .checkmark {
  display: inline;
}

.invert {
  filter: invert(1);
}

.icon-opacity {
  opacity: 0.5;
}




/* NAME FIELD */

.custom-shadow {
  box-shadow: 0.05rem 0.1rem .5rem rgba(0, 0, 0, 0.155);
}

#name-field {
  border: unset;
  background: unset;
  border-bottom: 2px solid #434a523d;
  background: #fff;
  border-radius: 8px;
  width: 100%;

  padding: 16px;
  margin-top: 20px;
}

#name-label {
  all: unset;
  display: block;
  position: absolute;
  padding: 0 5px;
  width: 7.75em;
  color: #5f6368;
  background: #fff;
  transition: all 150ms ease;
  transform: translate(18px, -41px);

  font-family: "Open Sans", Arial, sans-serif;
  user-select: none;
}

/* outlones text field when focused */
#name-field:focus {
  outline: none;
  padding: 15px;
  border: 2px solid #1a73e8;
}
/* moves label when the placeholder is not shown (the user has typed something) or when the field is focused */
#name-field:not(:placeholder-shown) + #name-label, #name-field:focus + #name-label {
  transform: translate(8px, -68px);
  font-size: 13px !important;
  width: 7.75em;
}
/* colors the label */
/* this doesn't have the placeholder-shown so the text turns back to black even if the user has typed in the box */
#name-field:focus + #name-label {
  color: #1a73e8; 
}




/* LOGIN ERRORS */

input.error {
/* #name-field.error { */
  background: rgba(#ee0404, 0.96);
  border-bottom: 2px solid #ee040450;
} 
input.error + label {
/* #name-field.error + label { */
  background: rgba(#ee0404, 0.96);
  color: #ee0404 !important;
  font-family: "Open Sans", Arial, sans-serif;
}
/* input:focus.error { */
#name-field:focus.error {
  outline: none;
  padding: 15px;
  border: 2px solid #ee0404;
}

.no-copy {
  user-select: none;
}

/* .shake{
  animation: shake 0.2s ease-in-out 0s 2 !important;
} */
#missing-name.show.shake, #missing-img.show.shake {
  animation: shake 0.2s ease-in-out 0s 2 !important;
}

#missing-name, #missing-img {
  align-items: left;
  text-align: left;
  font-size: 14px;
  color: #ee0404;
  max-height: 0;
  opacity: 0;
  padding: 0;
  transition: 150ms;
}

#missing-name.show, #missing-img.show {
  margin-left: .5rem;
  max-height: 32px;
  opacity: 100%;
  padding: 8px 0 0 0;
  transition: 150ms;
}


/* #missing-name.shake {
  animation: shake 0.2s ease-in-out 0s 2 !important;
} */

@keyframes shake {
  0% { margin-left: 0.5rem; }
  25% { margin-left: 1rem; }
  75% { margin-left: 0rem; }
  100% { margin-left: .5rem; }
}