@import "~normalize.css";
@import "src/assets/variables";

html {
  //so that reactjs scrollIntoView can be smooth
  scroll-behavior: smooth;
  font-size: 100%;
  font-family: $sans-serif-font;
  color: $primary-color;
  background: $tertiary-background-color;
}

.text-danger {
  color: $danger-color;
}

.text-success {
  color: $success-color;
}

.mobile {
  display: block;
}

.main {
  display: none;
}

label {
  display: inline-block;
  padding: .2rem;

  .required {
    padding-left: .1rem;
    color: $danger-color;
  }
}
@media (min-width: $medium-size) {

  .container {
    //padding-right: 1rem;
    //padding-left: 1rem;
    //margin-right: auto;
    //margin-left: auto;
    //width: 45rem;
  }
  .main--content {
    min-height: 60vh;

    .div__align--center {
      height: 50vh;
    }
  }
}

@media (min-width: $large-size) {
  .mobile {
    display: none;
  }
  .main {
    display: block;
  }
  .container {
    padding-right: 1rem;
    padding-left: 1rem;
    margin-right: auto;
    margin-left: auto;
    width: 54rem;
  }
}

@media (min-width: $extra-large-size) {
  .container {
    width: 70rem;
  }
}

.main--content {
  min-height: 60vh;

  .div__align--center {
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

}

[data-title] {
  position: relative;
}

[data-title]:hover:after {
  opacity: 1;
  transition: all 0.1s ease 0.5s;
  visibility: visible;
}

[data-title]:after {
  content: attr(data-title);
  background: $secondary-background-color;
  color: $primary-color;
  font-size: .8rem;
  font-weight: 300;
  position: absolute;
  padding: 1px 5px 2px 5px;
  bottom: -1.6rem;
  left: 30%;
  white-space: nowrap;
  box-shadow: 0 .25rem 1rem 0 rgba(0, 0, 0, 0.2);
  opacity: 0;
  z-index: 50;
  visibility: hidden;
}