/* @import "https://www.nerdfonts.com/assets/css/webfont.css"; */
@import url("rosepine-theme.css");


@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo/Archivo-VariableFont_wdth,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
}


@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo/Archivo-Italic-VariableFont_wdth,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
}


:root {
  --mc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --mc-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --mc-offset-shadow: 0 0 #0000;
}

.mc-shadow {
  box-shadow: var(--mc-offset-shadow), var(--mc-shadow-sm);
}

.mc-shadow:hover {
  box-shadow: var(--mc-offset-shadow), var(--mc-shadow-lg);
}


body {
  margin: 0;
  padding: 0;
  background-color: hsl(var(--mc-base));
  color: hsl(var(--mc-text));
  font-family: "Archivo";
}


.mc-card {
  background-color: hsl(var(--mc-surface));
  /* border: transparent 1px solid; */
  background:
  radial-gradient(circle at 50% 800%, hsl(var(--mc-surface) / .09), hsl(var(--mc-surface))) padding-box,
  linear-gradient(hsl(var(--mc-highlight-med)), hsl(var(--mc--highlight-low))) border-box;
}

.mc-glass {
  position: relative;
  background: hsl(var(--mc-base) / .5);
  backdrop-filter: blur(.9px);
  border: 3px solid transparent;
}


.mc-glass::before {
  border-radius: inherit;
  content: '';
  position: absolute;
  inset: 0;
  border: inherit;
  background:
  linear-gradient(hsl(var(--mc-highlight-med)), hsl(var(--mc--highlight-low))) border-box;
  z-index: -1;
  mask: linear-gradient(hsl(0 0 0)) border-box,
  linear-gradient(hsl(0 0 0)) padding-box;
  mask-composite: subtract;
}


a {
  color: hsl(var(--mc-iris));
}

/*COMPONENTS SECTION*/


.mc-page {
  position: relative;
  margin-top: 20vh;
  animation:  float-up .9s ease-in-out  forwards;
  width: 100vw;
  min-height: 100vh;
}

.mc-bg-base { background-color: hsl(var(--mc-base));}
.mc-bg-surface {background-color: hsl(var(--mc-surface));}
.mc-bg-overlay {background-color: hsl(var(--mc-overlay));}
.mc-bg-rose {background-color: hsl(var(--mc-rose));}
.mc-bg-subtle {background-color: hsl(var(--mc-subtle));}
.mc-bg-pine {background-color: hsl(var(--mc-pine));}
.mc-bg-foam {background-color: hsl(var(--mc-foam));}
.mc-bg-hll {background-color: hsl(var(--mc--highlight-low));}

.mc-rcorners {border-radius: 10px;}


/* TODO: may remove */
button {
  border: none;
  padding: .2rem .8rem;
  border: none;
  outline: none;
  font-size: 1rem;
  border-radius: 5px;
  cursor: pointer;
}
button.mc-lgt {
  color: hsl(var(--mc-base));
}
button.mc-drk {
  background-color: var(--base-dark);
  border: .01rem solid white;
  color: var(--snow);
}



/*GENERAL SECTION */

.mc-flex {display: flex;}
.mc-flex.mc-column {flex-flow: column;}
.mc-flex.mc-row {flex-flow: row;}
.mc-wrap {flex-wrap: wrap;}
.mc-nowrap {flex-wrap: nowrap;}
.mc-acenter {align-items: center;}
.mc-jcenter {justify-content: center;}
.mc-jspace-between {justify-content: space-between;}
.mc-jspace-around {justify-content: space-around;}

.mc-display-none { display: none;}

/*BORDERS */

.mc-borderr { border-right: 1px solid var(--snow);}


/*GAP */
.mc-gap03rem { gap: .3rem;}
.mc-gap05rem { gap: .5rem;}
.mc-gap1rem  { gap: 1rem; }
.mc-gap2rem  { gap: 2rem; }


/* CURSOR */
.mc-pointer {cursor: pointer;}


.mc-trans05 {opacity: .5;}


.mc-blur10 {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}



.mc-border1px {border: 1px;}


/*POSITIONS*/

.mc-absolute {position: absolute;}
.mc-relative {position: relative;}
.mc-fixed {position: fixed;}
.mc-sticky {position: sticky;}

.mc-top  { top: 0;}
.mc-bottom  { bottom: 0;}

.mc-left { left: 0;}
.mc-left3rem { left: 3rem;}
.mc-left05rem { left: .5rem;}
.mc-left90vw {left :90vw;}
.mc-left-90vw {left: -90vw;}
.mc-left-100vw {left: -100vw;}

.mc-left40p {left: 40%;}
.mc-left50p {left: 50%;}
.mc-left60p {left: 60%;}

.mc-right { right: 0;}
.mc-right05rem { right: 05rem;}


.mc-transition-all {transition: all ease-in-out .350s;}

/*END POSITIONS*/

/*MEASUREMENTS*/

.mc-w1rem {width: 1rem;}
.mc-w2rem {width: 2rem;}

.mc-w15p { width: 15%;}
.mc-w25p { width: 25%;}
.mc-w30p { width: 30%;}
.mc-w35p { width: 35%;}
.mc-w40p { width: 45%;}
.mc-w45p { width: 45%;}
.mc-w50p { width: 50%;}
.mc-w75p { width: 75%;}
.mc-w80p {width: 80%;}
.mc-w100p {  width: 100%;}

.mc-w20p {width: 20%;}
.mc-minw20p {min-width: 20%;}
.mc-w40p {width: 40%;}
.mc-w60p {width: 60%;}
.mc-maxw20p {max-width: 20%;}
.mc-maxw50p {max-width: 50%;}
.mc-maxw40p {max-width: 40%;}

.mc-w10v { width: 10vw;}
.mc-w20v { width: 20vw;}
.mc-w50v { width: 50vw;}
.mc-w30v { width: 30vw;}
.mc-w40v { width: 40vw;}
.mc-w50v { width: 50vw;}
.mc-w80v {width: 80vw;}
.mc-w90v {width: 90vw;}
.mc-w100v {  width: 100vw;}
.mc-winherit {  width: inherit;}




/*HEIGTH*/
.mc-h50p { height: 50%;}

.mc-h60p { height: 60%;}
.mc-h70p { height: 70%;}
.mc-h75p { height: 75%;}
.mc-h80p { height: 80%;}
.mc-h90p { height: 90%;}
.mc-h100p { height: 100%;}


.mc-h40v { height: 40dvh;}
.mc-h50v { height: 50dvh;}
.mc-h80v {height: 80dvh;}
.mc-h90v {height: 90dvh;}
.mc-h95v {height: 95dvh;}
.mc-h99v {height: 99dvh;}
.mc-h100v { height: 100dvh;}


.mc-no-padmar {
  padding: 0;
  margin: 0;
}

.mc-overflowh {overflow: hidden;}

/*PADDING*/
.mc-pad0 {padding: 0;}
.mc-padt0 {padding-top: 0;}
.mc-padl0 {padding-left: 0;}
.mc-padl05rem {padding-left: .5rem;}
.mc-padr0 {padding-right: 0;}
.mc-pad05em { padding: .5em;}

.mc-pad02rem { padding: .2rem;}
.mc-pad05rem { padding: .5rem;}
.mc-pad1rem {padding: 1rem;}
.mc-pad2rem {padding: 2rem;}
.mc-pad3rem {padding: 3rem;}
.mc-pad4rem {padding: 4rem;}
.mc-pad5rem {padding: 5rem;}


.mc-padt02rem {padding-top: .2rem;}
.mc-padt05rem {padding-top: .5rem;}
.mc-padt1rem {padding-top: 1rem;}
.mc-padt2rem {padding-top: 2rem;}
.mc-padt3rem {padding-top: 3rem;}
.mc-padt4rem {padding-top: 4rem;}
.mc-padt5rem {padding-top: 5rem;}
.mc-padt10rem {padding-top: 10rem;}


.mc-padl1rem {padding-left: 1rem;}
.mc-padl2rem {padding-left: 2rem;}
.mc-padl3rem {padding-left: 3rem;}
.mc-padl4rem {padding-left: 4rem;}
.mc-padl5rem {padding-left: 5rem;}
.mc-padl10rem {padding-left: 10rem;}

.mc-padr05rem {padding-right: .5rem;}
.mc-padr1rem {padding-right: 1rem;}


.mc-padb0 {padding-bottom: 0;}
.mc-padb05rem {padding-bottom: .5rem;}
.mc-padb1rem {padding-bottom: 1rem;}
.mc-padb2rem {padding-bottom: 2rem;}
.mc-padb3rem {padding-bottom: 3rem;}
.mc-padb4rem {padding-bottom: 4rem;}
.mc-padb5rem {padding-bottom: 5rem;}

 /*MARGIN*/
.mc-mar0 {margin: 0;}
.mc-mar02em { margin: .2em;}
.mc-mar05em { margin: .5em;}

.mc-martauto {margin-top: auto;}
.mc-martop1rem {margin-top: 1rem;}
.mc-martop1\.5rem {margin-top: 1.5rem;}
.mc-martop2rem {margin-top: 2rem;}
.mc-martop2\.5rem {margin-top: 2.5rem;}


.mc-marlauto {margin-left: auto;}

.mc-marauto {
  margin-right: auto;
  margin-left: auto;
}




/*TEXT*/
.mc-txt-uppercase {text-transform: uppercase;}
.mc-txt-center {text-align: center;}
.mc-txt-left {text-align: left;}
.mc-txt-vertical {
  writing-mode: vertical-lr;
  text-orientation: sideways;
  transform: rotate(180deg);
}
.mc-txt-center {text-align: center;}



/*ALIGNMENT*/

/* FONTS */
.mc-fs15px { font-size: 15px;}
.mc-fs25px {font-size: 25px;}
.mc-fs35px {font-size: 35px;}
.mc-fs40px {font-size: 40px;}
.mc-fs45px {font-size: 45px;}
.mc-fs55px {font-size: 55px;}
.mc-fs65px {font-size: 65px;}
.mc-fs75px {font-size: 75px;}


/*FONTS*/
.mc-fs03em { font-size: .3em;}
.mc-fs06em { font-size: .6em;}
.mc-fs1em { font-size: 1em;}
.mc-fs2em { font-size: 2em;}
.mc-fs3em { font-size: 3em;}

.mc-fs05rem{ font-size: .5rem}
.mc-fs1rem{ font-size: 1rem}
.mc-fs1\.2rem{ font-size: 1.2rem}
.mc-fs1\.3rem{ font-size: 1.3rem}
.mc-fs1\.5rem{ font-size: 1.5rem}
.mc-fs2rem{ font-size: 2rem}
.mc-fs2\.5rem{ font-size: 2.5rem}
.mc-fs3rem{ font-size: 3rem}
.mc-fs4rem{ font-size: 4rem}
.mc-fs5rem{ font-size: 5rem}

.mc-fs3em { font-size: .3em;}
.mc-fs4em { font-size: .4em;}
.mc-fs2em { font-size: .2em;}
.mc-fs8em { font-size: .8em;}
.mc-fs5em { font-size: .5em;}
.mc-fs6em { font-size: .6em;}

.mc-fs\.25em { font-size: .25em; }
.mc-fs1em { font-size: 1em;}
.mc-fs1\.25em { font-size: 1.25em;}

.mc-fs1\.25rem { font-size: 1.25rem;}


.mc-fwlgt { font-weight: lighter; }

.mc-fwbold {font-weight: bold;}

/* --FONTS END */


@keyframes float-up {
  0% {
    margin-top: 20vh;
  }
  25% {
    margin-top: 0vh;
  }
  50% {
    margin-top: 5vh;
  }
  100% {
    margin-top: 0vh;
  }
}



/*TABLETS AND MONITORS*/
@media screen and (min-width: 700px) {

/* TODO: need to refactor this par */
.desk-w50-p {
  width: 50%;
}
.desk-w45-p {
  width: 45%;
}
.desk-w75-p {
  width: 75%;
}
.desk-w100-p {
  width: 100%;
}
.desk-w100-v {
  width: 100vw;
}
.desk-w90-v {
  width: 90vw;
}

.mob-flex-dir-cr {
  flex-direction: column;
  flex-flow: initial;
}

  .form {
    box-shadow: 0 0 .1rem rgba(0,0,0,.3);
    width: 40vw;
    border-radius: 5px;
  }

}




@media screen and (min-width: 768px) {


  .md\:mc-fs05rem{ font-size: .5rem}
  .md\:mc-fs1rem{ font-size: 1rem}
  .md\:mc-fs1\.5rem{ font-size: 1.5rem}
  .md\:mc-fs2rem{ font-size: 2rem}
  .md\:mc-fs2\.5rem{ font-size: 2.5rem}
  .md\:mc-fs3rem{ font-size: 3rem}
  .md\:mc-fs4rem{ font-size: 4rem}
  .md\:mc-fs5rem{ font-size: 5rem}
  .md\:mc-fs6rem{ font-size: 6rem}
  .md\:mc-fs7rem{ font-size: 7rem}


 
  .md\:mc-left {left: 0};
  .md\:mc-left30p {left: 30%;}
  .md\:mc-left40p {left: 40%;}
  .md\:mc-left-90vw {left: -90vw;}


  .md\:mc-h50p { height: 50%;}
  .md\:mc-h60p { height: 60%;}
  .md\:mc-h70p { height: 70%;}
  .md\:mc-h75p { height: 75%;}
  .md\:mc-h80p { height: 80%;}
  .md\:mc-h90p { height: 90%;}
  .md\:mc-h100p { height: 100%;}



  .md\:mc-w10p { width: 10%;}
  .md\:mc-w15p { width: 15%;}
  .md\:mc-w18p { width: 18%;}
  .md\:mc-w19p { width: 19%;}
  .md\:mc-w20p { width: 20%;}
  .md\:mc-w40p { width: 40%;}
  .md\:mc-w50p { width: 50%;}
  .md\:mc-w60p { width: 60%;}
  .md\:mc-w70p { width: 70%;}
  .md\:mc-w80p { width: 80%;}

  .md\:mc-w10v { width: 10vw;}
  .md\:mc-w15v { width: 15vw;}
  .md\:mc-w20v { width: 20vw;}
  .md\:mc-w30v { width: 30vw;}
  .md\:mc-w50v { width: 50vw;}
  .md\:mc-w70v { width: 70vw;}
  .md\:mc-w100v { width: 100vw;}

  .md\:mc-nowrap { flex-wrap: nowrap;}


  .md\:mc-display {display: initial;}
  .md\:mc-display-none {display: none;}

  .md\:mc-pad02rem { padding: .2rem;}
  .md\:mc-pad1rem {padding: 1rem;}
  .md\:mc-pad2rem {padding: 2rem;}
  .md\:mc-pad3rem {padding: 3rem;}


  .md\:mc-padt0 {padding-top: 0;}
  .md\:mc-padt02rem {padding-top: .2rem;}
  .md\:mc-padt05rem {padding-top: .5rem;}
  .md\:mc-padt1rem {padding-top: 1rem;}
  .md\:mc-padt2rem {padding-top: 2rem;}
  .md\:mc-padt3rem {padding-top: 3rem;}
  .md\:mc-padt4rem {padding-top: 4rem;}
  .md\:mc-padt5rem {padding-top: 5rem;}
  .md\:mc-padt10rem {padding-top: 10rem;}



  .md\:mc-padl1rem {padding-left: 1rem;}
  .md\:mc-padl2rem {padding-left: 2rem;}
  .md\:mc-padl3rem {padding-left: 3rem;}
  .md\:mc-padl4rem {padding-left: 4rem;}
  .md\:mc-padl5rem {padding-left: 5rem;}
  .md\:mc-padl10rem {padding-left: 10rem;}


  .md\:mc-padb1rem {padding-left: 1rem;}
  .md\:mc-padb2rem {padding-left: 2rem;}
  .md\:mc-padb3rem {padding-left: 3rem;}
  .md\:mc-padb4rem {padding-left: 4rem;}
  .md\:mc-padb5rem {padding-left: 5rem;}
  .md\:mc-padb10rem {padding-left: 10rem;}



  .md\:mc-txt-vertical {
    color: hsl(var(--white));
    writing-mode: vertical-lr;
    text-orientation: sideways;
    transform: rotate(180deg);
  }

}