@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alumni+Sans+Pinstripe:ital@0;1&display=swap');

/*Base style*/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  font-size: 15px;
  background-color: var(--grey-200);
  font-family: system-ui, "Segoe UI", -apple-system, sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

/*Family*/
.ff-mont {
  font-style: normal;
  font-optical-sizing: auto;
  font-family: "Montserrat", system-ui, "Segoe UI", -apple-system, sans-serif;
}
.ff-alumni {
  font-weight: 400;
  font-family: "Alumni Sans Pinstripe", system-ui, "Segoe UI", -apple-system, sans-serif;
}

/*Size*/
.text-xs {
  font-size: 11px;
}
.text-s {
  font-size: 12px;
}
.text-m {
  font-size: 14px;
}
.text-l {
  font-size: 16px;
}
.text-x {
  font-size: 18px;
}
.text-xl {
  font-size: 20px;
}
.text-xx {
  font-size: 26px;
}
.text-u {
  font-size: 32px;
}

/*Letter spacing*/
.tr-wide {
  letter-spacing: 0.025em;
}
.tr-wider {
  letter-spacing: 0.05em;
}

/*Line height*/
.leading-4 {
  line-height: 1rem;
}
.leading-5 {
  line-height: 1.25rem;
}
.leading-6 {
  line-height: 1.5rem;
}
.leading-7 {
  line-height: 1.75rem;
}
.leading-8 {
  line-height: 2rem;
}

/*Weight*/
.text-light {
  font-weight: 200;
}
.text-regular {
  font-weight: 400;
}
.text-medium {
  font-weight: 600;
}

/*Text transform*/
.left-text {
  text-align: left;
}
.center-text {
  text-align: center;
}
.right-text {
  text-align: right;
}
.capitalize {
  text-transform: capitalize;
}
.upper {
  text-transform: uppercase;
}

/*Linear scale*/
.clamp-h1 {
  font-size: clamp(1.875rem, 1.8068rem + 0.3409vw, 2.625rem);
}
.clamp-h2 {
  font-size: clamp(1.375rem, 1.3068rem + 0.3409vw, 2.125rem);
}
.clamp-h3 {
  font-size: clamp(1.125rem, 1.0568rem + 0.3409vw, 1.875rem);
}
.clamp-txt {
  font-size: clamp(0.875rem, 0.8636rem + 0.0568vw, 1rem);
}


/*Color variables*/
.light-theme {
  --a20-g050:     hsla(210, 20%, 98%, .2);
  --black:        hsl(0, 0%, 0%);
  --blue-500:     hsl(217.20000000000005, 91.2%, 59.8%);
  --green-500:    hsl(173.39999999999998, 80.4%, 40%);
  --grey-050:     hsl(210, 20%, 98%);
  --grey-100:     hsl(220, 14.3%, 95.9%);
  --grey-200:     hsl(220, 13%, 91%);
  --grey-300:     hsl(216, 12.2%, 83.9%);
  --grey-400:     hsl(217.89999999999998, 10.6%, 64.9%);
  --grey-500:     hsl(220, 8.9%, 46.1%);
  --grey-600:     hsl(215, 13.8%, 34.1%);
  --grey-700:     hsl(216.89999999999998, 19.1%, 26.7%);
  --grey-800:     hsl(215, 27.9%, 16.9%);
  --grey-900:     hsl(220.89999999999998, 39.3%, 11%);
  --grey-950:     hsl(224, 71.4%, 4.1%);
  --none:         hsla(0, 0%, 0%, 0);
  --purple-500:   hsl(270.70000000000005, 91%, 65.1%);
  --yellow-500:   hsl(37.69999999999999, 92.1%, 50.2%);
  --white:        hsl(0, 0%, 100%);
  transition:     background 1s ease, color .5s ease, fill .5s ease, stroke .5s, border .5s ease;
}
.dark-theme {
  --a20-g050:     hsla(224, 71.4%, 4.1%, .2);
  --black:        hsl(0, 0%, 0%);
  --blue-500:     hsl(217.20000000000005, 91.2%, 59.8%);
  --green-500:    hsl(173.39999999999998, 80.4%, 40%);
  --grey-050:     hsl(224, 71.4%, 4.1%);
  --grey-100:     hsl(220.89999999999998, 39.3%, 11%);
  --grey-200:     hsl(215, 27.9%, 16.9%);
  --grey-300:     hsl(216.89999999999998, 19.1%, 26.7%);
  --grey-400:     hsl(215, 13.8%, 34.1%);
  --grey-500:     hsl(220, 8.9%, 46.1%);
  --grey-600:     hsl(217.89999999999998, 10.6%, 64.9%);
  --grey-700:     hsl(216, 12.2%, 83.9%);
  --grey-800:     hsl(220, 13%, 91%);
  --grey-900:     hsl(220, 14.3%, 95.9%);
  --grey-950:     hsl(210, 20%, 98%);
  --none:         hsla(0, 0%, 0%, 0);
  --purple-500:   hsl(270.70000000000005, 91%, 65.1%);
  --yellow-500:   hsl(37.69999999999999, 92.1%, 50.2%);
  --white:        hsl(0, 0%, 100%);
  transition:     background 1s ease, color .5s ease, fill .5s ease, stroke .5s, border .5s ease;
}

/*Background color*/
.bg-g050 {
  background-color: var(--grey-050);
}
.bg-g100 {
  background-color: var(--grey-100);
}
.bg-g200 {
  background-color: var(--grey-200);
}
.bg-g300 {
  background-color: var(--grey-300);
}
.bg-g400 {
  background-color: var(--grey-400);
}
.bg-g500 {
  background-color: var(--grey-500);
}
.bg-g900 {
  background-color: var(--grey-900);
}

/*TEXT*/
.clr-b500 {
  color: var(--blue-500);
}
.clr-ge500 {
  color: var(--green-500);
}
.clr-g900 {
  color: var(--grey-900);
}
.clr-g800 {
  color: var(--grey-800);
}
.clr-g700 {
  color: var(--grey-700);
}
.clr-g600 {
  color: var(--grey-600);
}
.clr-g500 {
  color: var(--grey-500);
}
.clr-g400 {
  color: var(--grey-400);
}
.clr-g200 {
  color: var(--grey-200);
}
.clr-y500 {
  color: var(--yellow-500);
}

/*Border color*/
.btp-g050 {
  border-top: 1px solid var(--grey-050);
}
.btp-g300 {
  border-top: 1px solid var(--grey-300);
}
.btp-g500 {
  border-top: 1px solid var(--grey-500);
}
.bbt-b500 {
  border-bottom: 2px solid var(--blue-500);
}
.bbt-ge500 {
  border-bottom: 2px solid var(--green-500);
}
.bbt-g300 {
  border-bottom: 1px solid var(--grey-300);
}
.bbt-g950 {
  border-bottom: 2px solid var(--grey-950);
}
.bbt-y500 {
  border-bottom: 2px solid var(--yellow-500);
}

/*Icon button*/
.ib-g01 {
  fill: var(--grey-500);
  background-color: var(--none);
  border: 1px solid var(--grey-300);
}
.ib-g01:hover {
  fill: var(--grey-100);
  background-color: var(--grey-800);
  border: 1px solid var(--grey-800);
}

/*Text button*/
/*Grey*/
.tb-g01 {
  color: var(--grey-800);
  background-color: var(--none);
  border: 1px solid var(--grey-050);
}
.tb-g01:hover {
  color: var(--grey-100);
  background-color: var(--grey-800);
  border: 1px solid var(--grey-800);
}
.tb-g02 {
  color: var(--grey-800);
  background-color: var(--none);
  border: 1px solid var(--none);
}
.tb-g02:hover {
  color: var(--grey-600);
  text-decoration: underline;
  background-color: var(--none);
  border: 1px solid var(--none);
  text-decoration-thickness: .5px;
}
/*Purple*/
.tb-p01 {
  color: var(--white);
  background-color: var(--purple-500);
  border: 1px solid var(--purple-500);
}
.tb-p01:hover {
  color: var(--grey-100);
  background-color: var(--grey-800);
  border: 1px solid var(--grey-800);
}


/*Height*/
.h-100 {
  height: 100%;
}
.h-space-50 {
  height: 50px;
}

/*Width*/
.w-100 {
  width: 100%;
}
.w-500max {
  max-width: 500px;
}
.w-1000max {
  max-width: 1000px;
}

/*Flex*/
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
  flex-direction: row;
}

/*Alignment*/
.align-start {
  align-items: flex-start;
}
.align-center {
  align-items: center;
}
.align-end {
  align-items: flex-end;
}
.align-between {
  align-content: space-between;
}
.justify-start {
  justify-content: flex-start;
}
.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: flex-end;
}
.justify-between {
  justify-content: space-between;
}

/*Border radius*/
.rounded-tp {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.rounded-full {
  border-radius: 50%;
}
.rounded-all {
  border-radius: 20px;
}
.rounded-bt {
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

/*Gap*/
.g-5 {
  gap: 5px;
}
.g-10 {
  gap: 10px;
}
.g-20 {
  gap: 20px;
}

/*Padding*/
.p-5 {
  padding: 5px;
}
.p-10 {
  padding: 10px;
}
.p-15 {
  padding: 15px;
}

/*Margin*/
.mt-1 {
  margin-top: 1px;
}
.mt-10 {
  margin-top: 10px;
}

/*Layer*/
.relative {
  position: relative;
}
.variable-height {
  min-height: 100%;
  height: auto !important;
}
.modal-user, .modal-spinner {
  z-index: 10;
}
.modal-user, .modal-spinner {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  overflow-x: hidden;
}

/*Miscellaneous*/
.bg-blur04 {
  backdrop-filter: blur(4px);
}
.bg-blur16 {
  backdrop-filter: blur(16px);
}
.bg-img {
  background-size: cover;
  background-repeat: no-repeat;
}
.img-c {
  background-position: center;
}


/*Icon button*/
.i-btn {
  width: 40px;
  height: 40px;
  display: flex;
  cursor: pointer;
  overflow: hidden;
  border-radius: 50%;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

/*Text button*/
.t-btn {
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 20px;
  text-decoration: none;
  letter-spacing: 0.03em;
  font-size: clamp(0.875rem, 0.8636rem + 0.0568vw, 1rem);
  font-family: system-ui, "Segoe UI", -apple-system, sans-serif;
}


/*Icon button*/
.ib-g01, .ib-p01 {
  transition: background-color .5s ease, border 1s ease, fill .5s ease;
}
/*Text button*/
.tb-g01, .tb-g02, .tb-p01, .tb-p02 {
  transition: background-color .5s ease, border 1s ease, color .5s ease;
}





/*INDEX*/
.index-box {
  width: 1200px;
}
.index-alpha {
  display: flex;
  flex-direction: row;
}
.index-svg {
  width: 25px;
}
.p-bt-one {
  padding: 10px 20px;
}
/*MEDIA QUERY - INDEX*/
@media only screen and (max-width: 1200px) {
  .index-box {
    width: 100%;
  }
}
@media only screen and (max-width: 550px) {
  .index-alpha {
    flex-direction: column;
  }
}


/*HEADER*/
.header-host {
  padding: 5px;
  margin: 5px 0 15px 0;
}
.header-alpha {
  padding: 20px;
}
.logo {
  height: 60px;
}
/*MEDIA QUERY - HEADER*/
@media only screen and (max-width: 1200px) {
  .header-host {
    margin: 0 0 15px 0;
  }
}
@media only screen and (max-width: 650px) {
  .header-alpha {
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
}


/*HERO*/
.hero-alpha {
  gap: 20px;
  display: grid;
  padding: 70px;
  grid-template-columns: repeat(3, 1fr);
  background-image: url("bento-bg.jpg");
}
.hero-box {
  padding: 5px;
  display: flex;
  flex-direction: column;
  background: hsla(240, 5.9%, 10%, .7);
}
.bento {
  width: 100%;
  aspect-ratio: 1/1;
}
.bento-one {
  height: 110px;
  padding: 0 5px;
}
.bento-two {
  color: hsl(0, 0%, 100%);
}
.bento-three {
  margin-top: 5px;
  color: hsl(240, 4.8%, 95.9%);
}
.hero-img-one {
  background-image: url("bento-one.png");
}
.hero-img-two {
  background-image: url("bento-two.png");
}
.hero-img-three {
  background-image: url("bento-three.png");
}
/*MEDIA QUERY - HERO*/
@media only screen and (max-width: 1000px) {
  .hero-alpha {
    padding: 50px;
  }
}
@media only screen and (max-width: 900px) {
  .hero-alpha {
    padding: 70px;
    display: flex;
    flex-direction: column;
  }
  .hero-box {
    gap: 30px;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (max-width: 750px) {
  .hero-alpha {
    padding: 40px;
  }
}
@media only screen and (max-width: 580px) {
  .hero-alpha {
    padding: 70px;
  }
  .hero-box {
    display: flex;
    flex-direction: column;
  }
}
@media only screen and (max-width: 450px) {
  .hero-alpha {
    padding: 50px;
  }
}
@media only screen and (max-width: 365px) {
  .hero-alpha {
    padding: 20px;
  }
}


/*ABOUT*/
.about-alpha {
  padding: 15px;
}
.about-beta {
  gap: 100px;
  padding: 15px;
  display: grid;
}
.about-one {
  grid-template-columns: 2fr 1fr;
}
.about-two {
  grid-template-columns: 1fr 2fr;
}
.about-gamma {
  gap: 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.about-img-one {
  width: 100%;
  aspect-ratio: 1/1;
  background-image: url("website.png");
}
.about-img-two {
  width: 100%;
  aspect-ratio: 1/1;
  background-image: url("aplicativo.png");
}
.svg-fill {
  fill: hsla(0, 0%, 100%, .2);
}
.svg-alpha-white {
  fill: hsla(0, 0%, 100%, .5);
  stroke: hsla(0, 0%, 100%, .5);
}
/*MEDIA QUERY - ABOUT*/
@media only screen and (max-width: 1100px) {
  .about-beta {
    gap: 40px;
  }
}
@media only screen and (max-width: 900px) {
  .about-one, .about-two {
    grid-template-columns: 1fr 1fr;
  }
  .about-gamma {
    gap: 10px;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
}
@media only screen and (max-width: 660px) {
  .about-beta {
    gap: 30px;
    padding: 50px;
  }
  .about-one, .about-two {
    display: flex;
  }
  .about-one {
    flex-direction: column;
  }
  .about-two {
    flex-direction: column-reverse;
  }
}
@media only screen and (max-width: 450px) {
  .about-beta {
    padding: 30px;
  }
}
@media only screen and (max-width: 365px) {
  .about-beta {
    padding: 10px;
  }
  .about-gamma {
    gap: 20px;
  }
}


/*TABLE*/
.width-table {
  width: 800px;
}
.table-host {
  gap: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
/*MEDIA QUERY*/
@media only screen and (max-width: 850px) {
  .width-table {
    width: 100%;
  }
}
@media only screen and (max-width: 400px) {
  .table-host {
    grid-template-columns: 1fr;
  }
}


/*FOOTER*/
.footer-host {
  margin: 20px 0 10px 0;
}
.footer-alpha, .footer-alpha-one {
  padding: 15px;
}
.footer-beta-two {
  border-left: 1px solid var(--grey-200)
}
/*MEDIA QUERY*/
@media only screen and (max-width: 1200px) {
  .footer-host {
    margin: 20px 5px 5px 5px;
  }
}
@media only screen and (max-width: 550px) {
  .footer-alpha, .footer-alpha-one {
    padding: 7px;
  }
  .footer-alpha-one {
    gap: 10px;
    flex-direction: column;
  }
  .footer-beta {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-beta-one, .footer-beta-two {
    display: none;
  }
}