:root {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: calc(1vw + 0.6em);

  --background: hsla(225, 1%, 99%, 1);
  --primary-color: hsla(226, 63%, 52%, 1);
  --primary-color-variant1: hsla(226, 63%, 76%, 1);
  --primary-color-variant2: hsla(226, 63%, 90%, 1);
  --primary-color-variant3: hsla(226, 59%, 26%, 1);
  --white:  #FFFFFF;
  --black: #000000;
  --typography-active: hsla(226, 60%, 6%, 0.87);
  --typography-inactive: hsla(226, 60%, 6%, 0.6);
  --typography-disabled: hsla(226, 60%, 6%, 0.38);
  --greyscale1: hsla(0, 0%, 93%, 1);
  --greyscale2: hsla(0, 0%, 96%, 1);
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: var(--background);
  margin: 0;
}

.bold-txt {
  font-weight: 700;
}

.bolder-txt {
  font-weight: 800;
}

.small-txt {
  font-size: 14px
}

.whiteBG {
  background-color: var(--white);
}

.whiteBG .main-card__header {
    color: var(--primary-color)
}

.blueBG .main-card__header {
    color: var(--white)
}

.blueBG {
  background-color: hsla(226, 63%, 52%, 1);;
}

.container {
  width: 85vw;
  margin: 0 auto;
}

header > img {
  width: 80px;
}



/* ============== MAIN SECTION STYLING ============== */

main {
  margin-block-start: 2em;
}

.hero-txt {
  text-align: center;
  margin: 0 auto;
}


.hero-txt > .big {
  color: var(--primary-color);
  font-size: 1.8rem;
}

.hero-txt > .small {
  display: block;
  margin-block-start: 8px;
  color: var(--typography-active);
  font-weight: 500;
  font-size: 1.2rem;
}




.cards-container {
  position: relative;
  max-width: 500px;
  margin: 0 auto;
  margin-block-start: 56px;
}


/* ============== MAIN CARD STYLING ============ */


.main-card {
  box-shadow: 7px 7px 41px 0px rgba(10,9,33,0.1);
  -webkit-box-shadow: 7px 7px 41px 0px rgba(10,9,33,0.1);
  -moz-box-shadow: 7px 7px 41px 0px rgba(10,9,33,0.1);

  margin: 0 auto;
  padding: 24px;
  border-radius: 8px;
  width: 100%;
}


.main-card__header {
  text-align: center;
  font-size: 0.8rem;
}

@media (min-width: 30em) {
  .main-card__header {
    font-size: 0.8rem;
  }
}

.main-card__inner {
  margin-block-start: 40px;
}

.main-card__inner > label {
  font-size: 1rem;
  font-weight: 700;
}

@media (min-width: 30em) {
  .main-card__inner > label {
    font-size: 18px;
  }
}

.main-card__inner > #phone {
  display: block;
  width: 100%;
  margin-block-start: 8px;
  border: none;
  font-size: 20px;
  background-color: var(--greyscale1);
  padding: 12px;
  border-radius: 8px;
  color: var(--typography-disabled);
  font-family: inherit;
  font-weight: 500;
}

.main-card__inner > #phone:focus {
  color: var(--primary-color);
  outline: 4px solid var(--primary-color-variant1);
}

@media (min-width: 30em) {
  .main-card__inner > #phone {
    padding: 16px;
  }
}

.input-description {
  margin-block-start: 10px;
  color: var(--typography-inactive);
}

.main-card__inner > button {
  width: 100%;
  margin-block-start: 24px;
  background-color: var(--primary-color);
  color: var(--white);
  border-radius: 8px;
  padding: 14px;
  border: none;
  transition: all .2s linear;
}

@media (min-width: 30em) {
  .main-card__inner > button {
    padding: 18px;
  }
}

.main-card__inner > button:hover {
  background-color: var(--primary-color-variant3);
  cursor: pointer;
}

.main-card__inner > button:active {
  background-color: var(--primary-color-variant3)
}



/* ============== RESULT CARD STYLING ============ */

#result-card {
  display: none;
}

.result-card {
  flex-direction: column;
  color: var(--white);
  text-align: center;
  position: absolute;
  top: 0px
}

#arrow-back {
  position: absolute;
  top: 7%;
  left: 7%;
  padding: 10px;
  cursor: pointer;
  background: none;
  border: none;
  color: white;
  font-size: 1.2rem;
}

#phone-no {
  font-size: 1.5rem;
  display: block;
  font-weight: 600;
}

.main-res {
  font-size: 0.9rem;
  display: block;
  margin-block-start: 0.8em;
}

#carrier-name {
  font-weight: 600;
}

.result__image {
  display: inline-block;
  text-align: center;
  padding: 24px;
  border-radius: 8px;
  width: fit-content;
  align-self: center;
  margin: 32px;
}

.result__image > img {
  width: 80px;
}


@media (max-width: 80em) {
  #bg-decor {
    display: none;
  }
}

#bg-decor {
  position: fixed;
  bottom: 32px;
  right: 32px;
}


/* ============ FOOTER STYLING =============== */

footer {
  display: flex;
  position: fixed;
  bottom: 0px;
  left: 50%;
  transform: translate(-50%, 0);
}

footer > p {
  font-size: 0.875em;
  color: var(--typography-inactive);
  align-self: center;
}


footer > img {
  width: 80px;
  margin-left: 8px;
}