@import "vendor/uikit.min.css";
@import "vendor/uikit-rtl.min.css";
@import "../../css/font.css";

@import "mobile.css";
@import "exam.css";
@import "formula.css";
@import "theme.css";
@import "animation.css";

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

.boxFormula.medium > div {
  font-size: 1rem !important;
}
.boxFormula.small > div {
  font-size: 0.85rem !important;
}
.boxFormula.smallest > div {
  font-size: 0.65rem !important;
}
.boxFormula.little > div {
  font-size: 0.6rem !important;
}

@media only screen and (min-width: 500px) {
  html {
    background-color: #f0f0f0;
  }
  p {
    font-size: 1rem !important;
  }
  p.summary {
    font-size: 1rem !important;
  }

  h1 {
    font-size: 2.25rem;
  }
  h2 {
    font-size: 2rem;
  }
  h3 {
    font-size: 1.75rem;
  }
  h4 {
    font-size: 1.5rem;
  }
  h5 {
    font-size: 1.25rem;
  }
  h6 {
    font-size: 1rem;
  }

  .hideDesktop {
    display: none;
  }
  .hideMobile {
    display: block;
  }
  .boxFormula.hideDesktop {
    display: none !important;
  }
  .boxFormula.hideMobile {
    display: table !important;
  }

  .flex > div {
    margin: 0 4px !important;
    font-size: var(--font-size-main);
  }
  .footerTab .uk-tab > li a {
    font-size: var(--font-size-main);
  }

  /* ///////// cover ///////// */

  #cover > .title > * {
    font-size: 5rem;
  }
  #cover > .title > *:last-child {
    font-size: 11rem;
    right: -82px;
  }
}
@media only screen and (max-width: 374px) {

  .boxFormula.medium > div {
    font-size: calc(var(--font-size-main) - 0.25rem) !important;
  }
  .boxFormula.small > div {
    font-size: calc(var(--font-size-main) - 0.4rem) !important;
  }
}
@media only screen and (min-width: 1024px) {

  .boxFormula.medium > div,
  .boxFormula.medium > .flex > div {
    font-size: calc(var(--font-size-main)) !important;
  }
  .boxFormula.small > div {
    font-size: calc(var(--font-size-main)) !important;
  }
}

body {
  animation: fadeIn-body 2s ease-in 0s 1 both;
}

@keyframes fadeIn-body {
  0% {
      opacity: 0;
  }

  100% {
      opacity: 1;
  }
}

.chemChange .motion {

}