:root {
  --yellowLab: #f7b617;
  --yellowLab-hover: #e6a100;
  --grayLab: rgb(43, 43, 43);
}

* {
  font-family: 'Nunito', sans-serif;
}


/* SPLASH */
#splash {
  background: linear-gradient(to bottom right, #ffd11b, #ff8400);
}


/* SPLASH ANIMATION */
.dot {
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  float: left;
  margin: 0 5px;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-animation: fx 1000ms ease infinite 0ms;
  animation: fx 1000ms ease infinite 0ms;
}

.dot:nth-child(2) {
  -webkit-animation: fx 1000ms ease infinite 300ms;
          animation: fx 1000ms ease infinite 300ms;
}

.dot:nth-child(3) {
  -webkit-animation: fx 1000ms ease infinite 600ms;
  animation: fx 1000ms ease infinite 600ms;
}

@-webkit-keyframes fx {
  50% {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  }

  100% {
  opacity: 0;
  }
}

@keyframes fx {
  50% {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  }

  100% {
  opacity: 0;
  }
}

/* LOGIN */
#welcome-image {
  min-height: 30vh;
  background-image: url('../assets/images/welcome-img.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#login-content {
  min-height: 70vh;
}

#login-help {
  color: #e6003d;
}

/* REGISTER */
#reg-header {
  background-image: url('../assets/images/bottom-img.svg');
  background-size: cover;
  background-position: center bottom;
  height: 30vh;
}

footer {
  background-color: var(--grayLab);
  color: #fff;
  margin-top: auto;
  min-height: 5vh;
}

footer a {
  color: var(--yellowLab);
}

footer a:hover {
  color: var(--yellowLab);
}

/* HOME */
.mt-custom {
  margin-top: 56px;
}

.user-box {
  overflow: hidden;
  word-wrap: break-word;
}

.new-post {
  border: 1px solid var(--grayLab);
  overflow: hidden;
}

.bottom-img {
  background-image: url('../assets/images/bottom-img-2.svg');
  background-size: contain;
  background-position: center top;
  background-repeat: repeat-y;
}

.carousel-container {
  background-color: var(--grayLab);
  margin-top: 56px;
}

iframe {
  width: 100%;
}

/* PROFILE */
#cover-photo {
  margin-top: 56px;
  height: 30vh;
  background-image: url('../assets/images/cover-photo.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#write-posts {
  resize: none;
}

.close {
  color: #fff;
}

.close:hover {
  color: #fff;
}

.jumbo-style {
  background-color: rgba(0, 0, 0, 0.03);
  border: 1.5px solid var(--yellowLab);
}

.jumbo-first {
  background-color: rgba(0, 128, 64, 0.514);
  border: 2px solid rgba(0, 0, 0, 0.125);
  color: #fff;
}

/* Helpers */

.bg-yellowLab {
  background-color: var(--yellowLab);
}

.bg-grayLab {
  background-color: var(--grayLab);
}

.gray-grad {
  background: linear-gradient(to bottom, #fff, #f3f3f3);
}

.max400 {
  max-width: 400px;
}

.min100vh {
  min-height: 100vh;
}

.link-yellowLab {
  color: var(--yellowLab-hover);
}

.link-yellowLab:hover {
  color: var(--grayLab);
}

.btn-yellowLab {
  background-color: var(--yellowLab);
  color: #fff;;
}

.btn-yellowLab:hover {
  background-color: var(--yellowLab-hover);
  color: var(--grayLab);
}

.btn-grayLab {
  background-color: var(--grayLab);
  color: #fff;
}

.btn-whiteLab {
  background-color: #fff;
  color: var(--grayLab);
  border: 1px solid var(--yellowLab);
}

.btn-whiteLab:hover {
  background-color: #f2f2f2;
}

.white-text {
  color: #fff;
}

.icon-btn {
  width: 36px;
}

.rounded-corners {
  border-radius: 25px;
}

.rounded-corners-top {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.rounded-img {
  background-color: #e1e1e1;
  border: 3px solid #fff;
  border-radius: 100%;
}

/* Overwrite styles */
.navbar {
  box-shadow: 0px 1px 6px 0.5px rgba(95, 95, 95, 0.5);
}

.navbar-brand {
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  left: 50%;
}

.btn {
  transition: .2s;
  border: none;
}

.gray-icon {
  color: #afafaf;
}

.dark-gray-icon {
  color: var(--grayLab);
  background-color: #fff;
  border-radius: 10px;
}

.carousel-inner {
  height: 400px;
}

.carousel-caption {
  top: 15px;
  bottom: auto;
}

/* Modal */
.custom {
  border: 1.5px solid var(--grayLab);
  border-radius: 5px;
  color: var(--yellowLab);
  font-weight: bold;
  padding: 1%;
}

/* Media */
@media(min-width: 768px) {
  #welcome-image, #login-content {
    height: 100vh;
  }

  /* .moment-custom {
    font-size: 0.8em;
    margin-left: 65%;
  } */
}