{"version":3,"sources":["home.css","home.sass","_vars.sass"],"names":[],"mappings":"AAAA,gBAAgB;ACEhB;EACI,gBCgBS;EDfT,cAAA;EACA,eAAA;EACA,oBAAA;ADAJ;ACEI;EACI,iBAAA;ADAR;;ACEA;EACI,eAAA;EACA,kBAAA;EACA,aAAA;EACA,sBAAA;EACA,qBAAA;ADCJ;ACCI;EACI,YAAA;EACA,qCAAA;EACA,qDAAA;ADCR;ACCI;EACI,WAAA;EACA,YAAA;EACA,oBAAA;KAAA,iBAAA;ADCR;ACCI;EACI,sBAAA;EACA,kBAAA;EACA,iBAAA;EACA,iBAAA;ADCR;ACCQ;EACI,cC3BI;AF4BhB;;ACMI;EACI,eAAA;EACA,eAAA;EACA,kBAAA;EACA,6CCpCO;EDqCP,kDAAA;EACA,kBC/BD;EDgCC,kBAAA;EACA,qBAAA;EACA,gCAAA;EACA,iBAAA;ADHR;ACKQ;EACI,YAAA;EACA,qCAAA;EACA,qDAAA;ADHZ;ACKQ;EACI,4CAAA;EACA,YAAA;EACA,gBAAA;EACA,wCCrDG;EDsDH,kBAAA;EACA,aAAA;EACA,UAAA;EAGA,yBAAA;ADLZ;ACOQ;EACI,eAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,kDAAA;EACA,kBAAA;EACA,SAAA;EACA,WAAA;EACA,yBAAA;KAAA,sBAAA;ADLZ;ACOQ;EACI,eAAA;EACA,gBAAA;EACA,cC7EI;AFwEhB;ACOQ;EACI,eAAA;EACA,iBAAA;EACA,mBAAA;ADLZ;;ACOA;EACI;IACI,eAAA;EDJN;ECMM;IACI,iBAAA;EDJV;ECMM;IACI,eAAA;EDJV;AACF","file":"home.css","sourcesContent":["@charset \"UTF-8\";\nheader {\n  max-width: 800px;\n  margin: 0 auto;\n  font-size: 40px;\n  margin-bottom: 15rem;\n}\nheader h1 {\n  line-height: 4rem;\n}\n\ndiv.featured__facts {\n  padding: 1.5rem;\n  margin-block: 2rem;\n  display: flex;\n  vertical-align: middle;\n  transition: all 200ms;\n}\ndiv.featured__facts:hover {\n  scale: 1.025;\n  filter: brightness(1.1) saturate(1.1);\n  box-shadow: 0 0 30px rgba(104, 58, 150, 0.2196078431);\n}\ndiv.featured__facts img, div.featured__facts svg {\n  width: 50px;\n  height: 50px;\n  object-fit: cover;\n}\ndiv.featured__facts h2 {\n  vertical-align: middle;\n  margin-block: auto;\n  margin-left: 1rem;\n  font-size: 1.5rem;\n}\ndiv.featured__facts h2 span {\n  color: #b88df0;\n}\n\ndiv.user-quotes div.user-quote__field {\n  padding: 1.5rem;\n  cursor: pointer;\n  margin-block: 2rem;\n  background: rgba(204, 154, 247, 0.1411764706);\n  border: 2px solid rgba(104, 58, 150, 0.2196078431);\n  border-radius: 5px;\n  position: relative;\n  transition: all 200ms;\n  box-shadow: 0 0 30px transparent;\n  min-height: 200px;\n}\ndiv.user-quotes div.user-quote__field:hover {\n  scale: 1.025;\n  filter: brightness(1.1) saturate(1.1);\n  box-shadow: 0 0 30px rgba(104, 58, 150, 0.2196078431);\n}\ndiv.user-quotes div.user-quote__field::before {\n  font-family: \"Times New Roman\", Times, serif;\n  content: \"“\";\n  font-size: 150px;\n  color: rgba(204, 154, 247, 0.1411764706);\n  position: absolute;\n  bottom: -1rem;\n  left: 1rem;\n  transform: rotate(180deg);\n}\ndiv.user-quotes div.user-quote__field img {\n  cursor: pointer;\n  width: 100px;\n  height: 100px;\n  border-radius: 50%;\n  border: 3px solid rgba(104, 58, 150, 0.2196078431);\n  position: absolute;\n  top: 1rem;\n  right: 1rem;\n  object-fit: scale-down;\n}\ndiv.user-quotes div.user-quote__field span.user-quote__username {\n  font-size: 1rem;\n  font-weight: 600;\n  color: #b88df0;\n}\ndiv.user-quotes div.user-quote__field p {\n  margin-block: 0;\n  font-size: 1.5rem;\n  padding-right: 7rem;\n}\n\n@media (max-width: 800px) {\n  header {\n    font-size: 26px;\n  }\n  header h1 {\n    line-height: 3rem;\n  }\n  header h3 {\n    font-size: 28px;\n  }\n}","@import '_vars'\n\nheader\n    max-width: $main-width\n    margin: 0 auto\n    font-size: 40px\n    margin-bottom: 15rem\n\n    h1\n        line-height: 4rem\n\ndiv.featured__facts\n    padding: 1.5rem\n    margin-block: 2rem\n    display: flex\n    vertical-align: middle\n    transition: all 200ms\n\n    &:hover\n        scale: 1.025\n        filter: brightness(1.1) saturate(1.1)\n        box-shadow: 0 0 30px $primary-glow\n\n    img, svg\n        width: 50px\n        height: 50px\n        object-fit: cover\n\n    h2\n        vertical-align: middle\n        margin-block: auto\n        margin-left: 1rem\n        font-size: 1.5rem\n\n        span\n            color: $primary-light\n\ndiv.user-quotes\n    // display: grid\n    // grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))\n    // grid-gap: 2rem\n\n    div.user-quote__field\n        padding: 1.5rem\n        cursor: pointer\n        margin-block: 2rem\n        background: $primary-soft\n        border: 2px solid $primary-glow\n        border-radius: $edge\n        position: relative\n        transition: all 200ms\n        box-shadow: 0 0 30px transparent\n        min-height: 200px\n\n        &:hover\n            scale: 1.025\n            filter: brightness(1.1) saturate(1.1)\n            box-shadow: 0 0 30px $primary-glow\n\n        &::before\n            font-family: 'Times New Roman', Times, serif\n            content: '\\201c'\n            font-size: 150px\n            color: $primary-soft\n            position: absolute\n            bottom: -1rem\n            left: 1rem\n            \n            // show at the bottom left\n            transform: rotate(180deg)\n\n        img\n            cursor: pointer\n            width: 100px\n            height: 100px\n            border-radius: 50%\n            border: 3px solid $primary-glow\n            position: absolute\n            top: 1rem\n            right: 1rem\n            object-fit: scale-down\n\n        span.user-quote__username\n            font-size: 1rem\n            font-weight: 600\n            color: $primary-light\n\n        p\n            margin-block: 0\n            font-size: 1.5rem\n            padding-right: 7rem\n\n@media (max-width: 800px)\n    header\n        font-size: 26px\n        \n        h1\n            line-height: 3rem\n\n        h3\n            font-size: 28px\n","$text: #f3f3f3\n$background: #03060d\n$secondary: #252a38\n$secondary-dark: #0e0e0e\n$border: #161d2bb0\n$soft: #fcf7f824\n\n$primary: #5f44b9\n$primary-light: #b88df0\n$primary-glow: #683a9638\n$primary-soft: #cc9af724\n$accent: #28aaf0\n\n$error: #ef3628\n$warn: #f09928\n$success: #28ef6b\n\n$edge: 5px\n\n$main-width: 800px\n$more-width: 1000px\n"]}