:root {
  --color-hazy-blue: rgb(31, 100, 143);
  --color-eye-red: rgb(252, 92, 101);
  --color-noon-yellow: rgb(254, 211, 48);
  --color-apple-green: rgb(38, 222, 129);
  --color-taxi-yellow: rgb(247, 183, 49);
  --color-leafy-green: rgb(32, 191, 107);
  --color-shade-green: rgb(0, 165, 104);
  --color-light-purple: rgb(165, 94, 234);
  --color-gloomy-purple: rgb(135, 62, 238);
  --color-silver-grey: rgb(165, 177, 194);
  --color-star-grey: rgb(209, 216, 224);
  --color-teal: rgb(43, 203, 186);
  --color-turquoise: rgb(15, 185, 177);
  --color-desire-red: rgb(235, 59, 90);
  --color-fusion-orange: rgb(253, 150, 68);
  --color-concentrated-orange: rgb(250, 130, 49);
  --color-matt-black: rgb(23, 23, 23);
  --color-off-white: rgb(245,245,245);
  --color-white: rgb(248, 251, 248);
  --color-dark-blue: rgb(75, 123, 236);
  --color-royal-blue: rgb(56, 103, 214);
  --color-night-blue: rgb(40, 44, 52);
  --text-color: var(--color-matt-black);
  --off-background: var(--color-off-white);
  --main-background: var(--color-white);
  --accent-color-triad: 135, 62, 238;
  --accent-color: rgba(var(--accent-color-triad), 1);
  --accent-color-2: var(--accent-color);
  --gradient-angle: 0deg;
  --link-color: var(--color-dark-blue);
  --scrollbar-color: var(--color-silver-grey);
  --loading-color: var(--color-silver-grey);
  --dropshadow-color: var(--color-star-grey);
  --color-primary: var(--accent-color);
  --color-danger: var(--color-eye-red);
  --color-warning: var(--color-taxi-yellow);
  --color-success: var(--color-apple-green);
  --carousel-dull-strength: 0.05;
  --defualt-size: 15px;
  --text-font-size: 1em;
  --huge-font-size: 3.5em;
  --h1-size: 2.8em;
  --h2-size: 2.2em;
  --h3-size: 1.8em;
  --h4-size: 1.3em;
  --h5-size: 1.1em;
  --h6-size: 1em;
  --title-size: var(--h3-size);
  --font-family: Urbanist;
  --font-normal-weight: 400;
  --font-lighter-weight: 200;
  --font-light-weight: 300;
  --font-bold-weight: 600;
  --font-bolder-weight: 700;
  --sidebar-open-width: 13rem;
  --sidebar-partial-width: 5.5rem;
  --loading-square-side: 3rem;
  --loading-thickness: 5px;
  --border-radius: 0.5rem;
  --small-border-radius: 3px;
  --border-thickness: 1px;
  --border-style: solid;
  --border-color: var(--color-silver-grey);
  --code-snippet-border-color: var(--color-night-blue);
  --transition-time: 0.2s;
  --animation-time: var(--transition-time);
  --main-top-bottom-padding: 2%;
  --main-left-right-padding: 4%;
  --default-top-bottom-margin: 1rem;
  --defualt-line-height: 1.5rem;
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: var(--font-family);
  font-size: var(--defualt-font-size);
  color: var(--text-color);
  scrollbar-width: thin;
  scrollbar-color: var(--sidebar-color) transparent;
}

i {
  fill: var(--text-color);
}

.pointer {
  cursor: pointer;
}

body {
  background: var(--main-background);
}

html {
  scroll-behavior: smooth;
}

.main {
  position: relative;
  -webkit-transition: padding-left 0.5s ease;
  transition: padding-left 0.5s ease;
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}

.container {
  position: relative;
  padding: var(--main-top-bottom-padding) var(--main-left-right-padding);
}

.complete-open {
  padding-left: var(--sidebar-open-width);
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

.partial-open {
  padding-left: var(--sidebar-partial-width);
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}

.loading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}

.loader {
  position: relative;
  width: var(--loading-square-side);
  height: var(--loading-square-side);
  border: var(--loading-thickness) var(--loading-color) solid;
  border-radius: 100%;
  -webkit-border-after: solid;
          border-block-end: solid;
  border-block-end-color: var(--accent-color);
  border-block-end-width: var(--loading-thickness);
  -webkit-animation: load 1s linear infinite;
          animation: load 1s linear infinite;
}

@-webkit-keyframes load {
  from {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  to {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

@keyframes load {
  from {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  to {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

.show-on-mobile {
  display: none;
}

@media only screen and (max-width: 650px) {
  .container {
    padding: 1rem 2rem;
  }
  .complete-open, .partial-open {
    padding-left: 0;
  }
  .show-on-mobile {
    display: initial;
  }
}

h1 {
  font-size: var(--h1-size);
}

h2 {
  font-size: var(--h2-size);
}

h3 {
  font-size: var(--h3-size);
}

h4 {
  font-size: var(--h4-size);
}

h5 {
  font-size: var(--h5-size);
}

h6 {
  font-size: var(--h6-size);
}

.title {
  font-size: var(--title-size);
}

.font-size-huge {
  font-size: var(--huge-font-size);
}

.font-weight-bold {
  font-weight: var(--font-bold-weight);
}

.font-weight-bolder {
  font-weight: var(--font-bolder-weight);
}

.font-weight-light {
  font-weight: var(--font-light-weight);
}

.font-weight-lighter {
  font-weight: var(--font-lighter-weight);
}

.font-weight-normal {
  font-weight: var(--font-normal-weight);
}

a {
  color: var(--link-color);
  text-decoration: none;
  -webkit-transition: var(--transition-time) all ease;
  transition: var(--transition-time) all ease;
  cursor: pointer;
}

a:hover {
  color: var(--accent-color);
}

.marquee {
  white-space: nowrap;
  overflow: hidden;
}

.marquee * {
  -webkit-animation: marquee 15s linear infinite;
          animation: marquee 15s linear infinite;
}

@-webkit-keyframes marquee {
  from {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(-160%);
            transform: translateX(-160%);
  }
}

@keyframes marquee {
  from {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(-160%);
            transform: translateX(-160%);
  }
}

.code {
  background: rgba(var(--accent-color-triad), 0.25);
  padding: 0.1rem 0.5rem;
  margin: 0 0.2rem;
  border-radius: var(--border-radius);
}

.quote {
  background: rgba(var(--accent-color-triad), 0.25);
  border-left: 5px solid var(--accent-color);
  padding: 1rem;
  margin: var(--default-top-bottom-margin) 0;
}

.quote a {
  text-decoration: underline;
  color: var(--text-color);
}

.quote a:hover {
  color: var(--accent-color);
}

p {
  position: relative;
  margin: var(--default-top-bottom-margin) 0;
  line-height: var(--defualt-line-height);
}

.accent-text {
  color: var(--accent-color);
}

.icon-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
      align-content: center;
}

.icon-text i {
  margin-right: 0.5rem;
}

.border {
  border: var(--border-thickness) var(--border-color) var(--border-style);
  border-radius: var(--border-radius);
}

.border-top {
  border-top: var(--border-thickness) var(--border-color) var(--border-style);
}

.border-bottom {
  border-bottom: var(--border-thickness) var(--border-color) var(--border-style);
}

.border-left {
  border-left: var(--border-thickness) var(--border-color) var(--border-style);
}

.border-right {
  border-right: var(--border-thickness) var(--border-color) var(--border-style);
}

.fixed {
  position: fixed;
  z-index: 1001;
}

.block {
  display: block;
  width: 100%;
}

*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: var(--off-background);
  /* or add it to the track */
}

/* Add a thumb */
*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-color);
}

.no-transition {
  -webkit-transition-duration: 0s !important;
          transition-duration: 0s !important;
}

.no-transition:hover, .no-transition:focus, .no-transition:active {
  -webkit-transition-duration: 0s !important;
          transition-duration: 0s !important;
}

.no-animation {
  -webkit-animation-iteration-count: 0 !important;
          animation-iteration-count: 0 !important;
  -webkit-animation-duration: 0s !important;
          animation-duration: 0s !important;
}

.no-animation:hover, .no-animation:focus, .no-animation:active {
  -webkit-animation-iteration-count: 0 !important;
          animation-iteration-count: 0 !important;
  -webkit-animation-duration: 0s !important;
          animation-duration: 0s !important;
}

.align-horizontal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.align-vertical {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.align-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.code-snippet-output {
  position: relative;
  width: 100%;
  border: 10px var(--code-snippet-border-color) solid;
}

code.iframe-code-snippet, code.simple-code-snippet {
  width: 100%;
  display: block;
  overflow: hidden;
  padding: var(--border-radius) 0 0 0;
  margin: 1rem 0;
  padding-top: 1rem;
  position: relative;
}

code.iframe-code-snippet::before, code.simple-code-snippet::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 1rem;
  width: 100%;
  background: var(--code-snippet-border-color);
  z-index: 1;
}

.simple-snippet {
  padding: 1rem;
}

.hljs {
  background-color: var(--off-background);
  color: var(--text-color);
  position: relative;
}

.hljs-tag {
  color: var(--color-royal-blue);
}

.hljs-name {
  font-weight: var(--font-normal-weight);
  color: var(--color-royal-blue) !important;
}

.hljs-attr {
  color: var(--color-desire-red) !important;
}

.hljs-string {
  color: var(--accent-color) !important;
}

.hljs-comment {
  color: var(--color-silver-grey);
}

.hljs-keyword {
  font-weight: var(--font-normal-weight);
  color: teal !important;
  font-style: oblique;
}

.hljs-number {
  color: var(--color-concentrated-orange);
}

.hljs-title {
  color: var(--color-royal-blue);
  font-weight: var(--font-normal-weight);
}

.hljs-params {
  color: var(--accent-color);
}

.hljs-variable {
  color: var(--color-desire-red);
}

.hljs-property {
  color: var(--color-shade-green);
}

.hljs-selector-tag {
  font-weight: var(--font-normal-weight);
  color: teal;
}

.hljs-attribute {
  color: var(--color-desire-red);
  font-weight: var(--font-normal-weight);
}

.hljs-built_in {
  color: var(--accent-colors);
}

.copyButton {
  position: absolute;
  top: 0;
  right: 0;
  height: 2rem;
}

.code-demo {
  margin-top: 4rem;
}

.code_snippet {
  position: relative;
  background-color: aqua;
}

.code_snippet pre {
  font-size: 0;
}

.code_snippet code {
  font-size: var(--defualt-size);
}

.codeCopyTextArea {
  display: none;
}

.top-right {
  position: absolute;
  top: 0;
  right: 0;
}

.margin-0, .m-0 {
  margin: 0rem;
}

.margin-left-0, .ml-0 {
  margin-left: 0rem;
}

.margin-top-0, .mt-0 {
  margin-top: 0rem;
}

.margin-right-0, .mr-0 {
  margin-right: 0rem;
}

.margin-bottom-0, .mb-0 {
  margin: 0rem;
}

.padding-0, .p-0 {
  padding: 0rem;
}

.padding-left-0, .pl-0 {
  padding-left: 0rem;
}

.padding-top-0, .pt-0 {
  padding-top: 0rem;
}

.padding-right-0, .pr-0 {
  padding-right: 0rem;
}

.padding-bottom-0, .pb-0 {
  padding: 0rem;
}

.margin-1, .m-1 {
  margin: 0.1rem;
}

.margin-left-1, .ml-1 {
  margin-left: 0.1rem;
}

.margin-top-1, .mt-1 {
  margin-top: 0.1rem;
}

.margin-right-1, .mr-1 {
  margin-right: 0.1rem;
}

.margin-bottom-1, .mb-1 {
  margin: 0.1rem;
}

.padding-1, .p-1 {
  padding: 0.1rem;
}

.padding-left-1, .pl-1 {
  padding-left: 0.1rem;
}

.padding-top-1, .pt-1 {
  padding-top: 0.1rem;
}

.padding-right-1, .pr-1 {
  padding-right: 0.1rem;
}

.padding-bottom-1, .pb-1 {
  padding: 0.1rem;
}

.margin-2, .m-2 {
  margin: 0.2rem;
}

.margin-left-2, .ml-2 {
  margin-left: 0.2rem;
}

.margin-top-2, .mt-2 {
  margin-top: 0.2rem;
}

.margin-right-2, .mr-2 {
  margin-right: 0.2rem;
}

.margin-bottom-2, .mb-2 {
  margin: 0.2rem;
}

.padding-2, .p-2 {
  padding: 0.2rem;
}

.padding-left-2, .pl-2 {
  padding-left: 0.2rem;
}

.padding-top-2, .pt-2 {
  padding-top: 0.2rem;
}

.padding-right-2, .pr-2 {
  padding-right: 0.2rem;
}

.padding-bottom-2, .pb-2 {
  padding: 0.2rem;
}

.margin-3, .m-3 {
  margin: 0.3rem;
}

.margin-left-3, .ml-3 {
  margin-left: 0.3rem;
}

.margin-top-3, .mt-3 {
  margin-top: 0.3rem;
}

.margin-right-3, .mr-3 {
  margin-right: 0.3rem;
}

.margin-bottom-3, .mb-3 {
  margin: 0.3rem;
}

.padding-3, .p-3 {
  padding: 0.3rem;
}

.padding-left-3, .pl-3 {
  padding-left: 0.3rem;
}

.padding-top-3, .pt-3 {
  padding-top: 0.3rem;
}

.padding-right-3, .pr-3 {
  padding-right: 0.3rem;
}

.padding-bottom-3, .pb-3 {
  padding: 0.3rem;
}

.margin-4, .m-4 {
  margin: 0.4rem;
}

.margin-left-4, .ml-4 {
  margin-left: 0.4rem;
}

.margin-top-4, .mt-4 {
  margin-top: 0.4rem;
}

.margin-right-4, .mr-4 {
  margin-right: 0.4rem;
}

.margin-bottom-4, .mb-4 {
  margin: 0.4rem;
}

.padding-4, .p-4 {
  padding: 0.4rem;
}

.padding-left-4, .pl-4 {
  padding-left: 0.4rem;
}

.padding-top-4, .pt-4 {
  padding-top: 0.4rem;
}

.padding-right-4, .pr-4 {
  padding-right: 0.4rem;
}

.padding-bottom-4, .pb-4 {
  padding: 0.4rem;
}

.margin-5, .m-5 {
  margin: 0.5rem;
}

.margin-left-5, .ml-5 {
  margin-left: 0.5rem;
}

.margin-top-5, .mt-5 {
  margin-top: 0.5rem;
}

.margin-right-5, .mr-5 {
  margin-right: 0.5rem;
}

.margin-bottom-5, .mb-5 {
  margin: 0.5rem;
}

.padding-5, .p-5 {
  padding: 0.5rem;
}

.padding-left-5, .pl-5 {
  padding-left: 0.5rem;
}

.padding-top-5, .pt-5 {
  padding-top: 0.5rem;
}

.padding-right-5, .pr-5 {
  padding-right: 0.5rem;
}

.padding-bottom-5, .pb-5 {
  padding: 0.5rem;
}

.margin-6, .m-6 {
  margin: 0.6rem;
}

.margin-left-6, .ml-6 {
  margin-left: 0.6rem;
}

.margin-top-6, .mt-6 {
  margin-top: 0.6rem;
}

.margin-right-6, .mr-6 {
  margin-right: 0.6rem;
}

.margin-bottom-6, .mb-6 {
  margin: 0.6rem;
}

.padding-6, .p-6 {
  padding: 0.6rem;
}

.padding-left-6, .pl-6 {
  padding-left: 0.6rem;
}

.padding-top-6, .pt-6 {
  padding-top: 0.6rem;
}

.padding-right-6, .pr-6 {
  padding-right: 0.6rem;
}

.padding-bottom-6, .pb-6 {
  padding: 0.6rem;
}

.margin-7, .m-7 {
  margin: 0.7rem;
}

.margin-left-7, .ml-7 {
  margin-left: 0.7rem;
}

.margin-top-7, .mt-7 {
  margin-top: 0.7rem;
}

.margin-right-7, .mr-7 {
  margin-right: 0.7rem;
}

.margin-bottom-7, .mb-7 {
  margin: 0.7rem;
}

.padding-7, .p-7 {
  padding: 0.7rem;
}

.padding-left-7, .pl-7 {
  padding-left: 0.7rem;
}

.padding-top-7, .pt-7 {
  padding-top: 0.7rem;
}

.padding-right-7, .pr-7 {
  padding-right: 0.7rem;
}

.padding-bottom-7, .pb-7 {
  padding: 0.7rem;
}

.margin-8, .m-8 {
  margin: 0.8rem;
}

.margin-left-8, .ml-8 {
  margin-left: 0.8rem;
}

.margin-top-8, .mt-8 {
  margin-top: 0.8rem;
}

.margin-right-8, .mr-8 {
  margin-right: 0.8rem;
}

.margin-bottom-8, .mb-8 {
  margin: 0.8rem;
}

.padding-8, .p-8 {
  padding: 0.8rem;
}

.padding-left-8, .pl-8 {
  padding-left: 0.8rem;
}

.padding-top-8, .pt-8 {
  padding-top: 0.8rem;
}

.padding-right-8, .pr-8 {
  padding-right: 0.8rem;
}

.padding-bottom-8, .pb-8 {
  padding: 0.8rem;
}

.margin-9, .m-9 {
  margin: 0.9rem;
}

.margin-left-9, .ml-9 {
  margin-left: 0.9rem;
}

.margin-top-9, .mt-9 {
  margin-top: 0.9rem;
}

.margin-right-9, .mr-9 {
  margin-right: 0.9rem;
}

.margin-bottom-9, .mb-9 {
  margin: 0.9rem;
}

.padding-9, .p-9 {
  padding: 0.9rem;
}

.padding-left-9, .pl-9 {
  padding-left: 0.9rem;
}

.padding-top-9, .pt-9 {
  padding-top: 0.9rem;
}

.padding-right-9, .pr-9 {
  padding-right: 0.9rem;
}

.padding-bottom-9, .pb-9 {
  padding: 0.9rem;
}

.margin-10, .m-10 {
  margin: 1rem;
}

.margin-left-10, .ml-10 {
  margin-left: 1rem;
}

.margin-top-10, .mt-10 {
  margin-top: 1rem;
}

.margin-right-10, .mr-10 {
  margin-right: 1rem;
}

.margin-bottom-10, .mb-10 {
  margin: 1rem;
}

.padding-10, .p-10 {
  padding: 1rem;
}

.padding-left-10, .pl-10 {
  padding-left: 1rem;
}

.padding-top-10, .pt-10 {
  padding-top: 1rem;
}

.padding-right-10, .pr-10 {
  padding-right: 1rem;
}

.padding-bottom-10, .pb-10 {
  padding: 1rem;
}

.margin-11, .m-11 {
  margin: 1.1rem;
}

.margin-left-11, .ml-11 {
  margin-left: 1.1rem;
}

.margin-top-11, .mt-11 {
  margin-top: 1.1rem;
}

.margin-right-11, .mr-11 {
  margin-right: 1.1rem;
}

.margin-bottom-11, .mb-11 {
  margin: 1.1rem;
}

.padding-11, .p-11 {
  padding: 1.1rem;
}

.padding-left-11, .pl-11 {
  padding-left: 1.1rem;
}

.padding-top-11, .pt-11 {
  padding-top: 1.1rem;
}

.padding-right-11, .pr-11 {
  padding-right: 1.1rem;
}

.padding-bottom-11, .pb-11 {
  padding: 1.1rem;
}

.margin-12, .m-12 {
  margin: 1.2rem;
}

.margin-left-12, .ml-12 {
  margin-left: 1.2rem;
}

.margin-top-12, .mt-12 {
  margin-top: 1.2rem;
}

.margin-right-12, .mr-12 {
  margin-right: 1.2rem;
}

.margin-bottom-12, .mb-12 {
  margin: 1.2rem;
}

.padding-12, .p-12 {
  padding: 1.2rem;
}

.padding-left-12, .pl-12 {
  padding-left: 1.2rem;
}

.padding-top-12, .pt-12 {
  padding-top: 1.2rem;
}

.padding-right-12, .pr-12 {
  padding-right: 1.2rem;
}

.padding-bottom-12, .pb-12 {
  padding: 1.2rem;
}

.margin-13, .m-13 {
  margin: 1.3rem;
}

.margin-left-13, .ml-13 {
  margin-left: 1.3rem;
}

.margin-top-13, .mt-13 {
  margin-top: 1.3rem;
}

.margin-right-13, .mr-13 {
  margin-right: 1.3rem;
}

.margin-bottom-13, .mb-13 {
  margin: 1.3rem;
}

.padding-13, .p-13 {
  padding: 1.3rem;
}

.padding-left-13, .pl-13 {
  padding-left: 1.3rem;
}

.padding-top-13, .pt-13 {
  padding-top: 1.3rem;
}

.padding-right-13, .pr-13 {
  padding-right: 1.3rem;
}

.padding-bottom-13, .pb-13 {
  padding: 1.3rem;
}

.margin-14, .m-14 {
  margin: 1.4rem;
}

.margin-left-14, .ml-14 {
  margin-left: 1.4rem;
}

.margin-top-14, .mt-14 {
  margin-top: 1.4rem;
}

.margin-right-14, .mr-14 {
  margin-right: 1.4rem;
}

.margin-bottom-14, .mb-14 {
  margin: 1.4rem;
}

.padding-14, .p-14 {
  padding: 1.4rem;
}

.padding-left-14, .pl-14 {
  padding-left: 1.4rem;
}

.padding-top-14, .pt-14 {
  padding-top: 1.4rem;
}

.padding-right-14, .pr-14 {
  padding-right: 1.4rem;
}

.padding-bottom-14, .pb-14 {
  padding: 1.4rem;
}

.margin-15, .m-15 {
  margin: 1.5rem;
}

.margin-left-15, .ml-15 {
  margin-left: 1.5rem;
}

.margin-top-15, .mt-15 {
  margin-top: 1.5rem;
}

.margin-right-15, .mr-15 {
  margin-right: 1.5rem;
}

.margin-bottom-15, .mb-15 {
  margin: 1.5rem;
}

.padding-15, .p-15 {
  padding: 1.5rem;
}

.padding-left-15, .pl-15 {
  padding-left: 1.5rem;
}

.padding-top-15, .pt-15 {
  padding-top: 1.5rem;
}

.padding-right-15, .pr-15 {
  padding-right: 1.5rem;
}

.padding-bottom-15, .pb-15 {
  padding: 1.5rem;
}

.margin-16, .m-16 {
  margin: 1.6rem;
}

.margin-left-16, .ml-16 {
  margin-left: 1.6rem;
}

.margin-top-16, .mt-16 {
  margin-top: 1.6rem;
}

.margin-right-16, .mr-16 {
  margin-right: 1.6rem;
}

.margin-bottom-16, .mb-16 {
  margin: 1.6rem;
}

.padding-16, .p-16 {
  padding: 1.6rem;
}

.padding-left-16, .pl-16 {
  padding-left: 1.6rem;
}

.padding-top-16, .pt-16 {
  padding-top: 1.6rem;
}

.padding-right-16, .pr-16 {
  padding-right: 1.6rem;
}

.padding-bottom-16, .pb-16 {
  padding: 1.6rem;
}

.margin-17, .m-17 {
  margin: 1.7rem;
}

.margin-left-17, .ml-17 {
  margin-left: 1.7rem;
}

.margin-top-17, .mt-17 {
  margin-top: 1.7rem;
}

.margin-right-17, .mr-17 {
  margin-right: 1.7rem;
}

.margin-bottom-17, .mb-17 {
  margin: 1.7rem;
}

.padding-17, .p-17 {
  padding: 1.7rem;
}

.padding-left-17, .pl-17 {
  padding-left: 1.7rem;
}

.padding-top-17, .pt-17 {
  padding-top: 1.7rem;
}

.padding-right-17, .pr-17 {
  padding-right: 1.7rem;
}

.padding-bottom-17, .pb-17 {
  padding: 1.7rem;
}

.margin-18, .m-18 {
  margin: 1.8rem;
}

.margin-left-18, .ml-18 {
  margin-left: 1.8rem;
}

.margin-top-18, .mt-18 {
  margin-top: 1.8rem;
}

.margin-right-18, .mr-18 {
  margin-right: 1.8rem;
}

.margin-bottom-18, .mb-18 {
  margin: 1.8rem;
}

.padding-18, .p-18 {
  padding: 1.8rem;
}

.padding-left-18, .pl-18 {
  padding-left: 1.8rem;
}

.padding-top-18, .pt-18 {
  padding-top: 1.8rem;
}

.padding-right-18, .pr-18 {
  padding-right: 1.8rem;
}

.padding-bottom-18, .pb-18 {
  padding: 1.8rem;
}

.margin-19, .m-19 {
  margin: 1.9rem;
}

.margin-left-19, .ml-19 {
  margin-left: 1.9rem;
}

.margin-top-19, .mt-19 {
  margin-top: 1.9rem;
}

.margin-right-19, .mr-19 {
  margin-right: 1.9rem;
}

.margin-bottom-19, .mb-19 {
  margin: 1.9rem;
}

.padding-19, .p-19 {
  padding: 1.9rem;
}

.padding-left-19, .pl-19 {
  padding-left: 1.9rem;
}

.padding-top-19, .pt-19 {
  padding-top: 1.9rem;
}

.padding-right-19, .pr-19 {
  padding-right: 1.9rem;
}

.padding-bottom-19, .pb-19 {
  padding: 1.9rem;
}

.margin-20, .m-20 {
  margin: 2rem;
}

.margin-left-20, .ml-20 {
  margin-left: 2rem;
}

.margin-top-20, .mt-20 {
  margin-top: 2rem;
}

.margin-right-20, .mr-20 {
  margin-right: 2rem;
}

.margin-bottom-20, .mb-20 {
  margin: 2rem;
}

.padding-20, .p-20 {
  padding: 2rem;
}

.padding-left-20, .pl-20 {
  padding-left: 2rem;
}

.padding-top-20, .pt-20 {
  padding-top: 2rem;
}

.padding-right-20, .pr-20 {
  padding-right: 2rem;
}

.padding-bottom-20, .pb-20 {
  padding: 2rem;
}

.margin-21, .m-21 {
  margin: 2.1rem;
}

.margin-left-21, .ml-21 {
  margin-left: 2.1rem;
}

.margin-top-21, .mt-21 {
  margin-top: 2.1rem;
}

.margin-right-21, .mr-21 {
  margin-right: 2.1rem;
}

.margin-bottom-21, .mb-21 {
  margin: 2.1rem;
}

.padding-21, .p-21 {
  padding: 2.1rem;
}

.padding-left-21, .pl-21 {
  padding-left: 2.1rem;
}

.padding-top-21, .pt-21 {
  padding-top: 2.1rem;
}

.padding-right-21, .pr-21 {
  padding-right: 2.1rem;
}

.padding-bottom-21, .pb-21 {
  padding: 2.1rem;
}

.margin-22, .m-22 {
  margin: 2.2rem;
}

.margin-left-22, .ml-22 {
  margin-left: 2.2rem;
}

.margin-top-22, .mt-22 {
  margin-top: 2.2rem;
}

.margin-right-22, .mr-22 {
  margin-right: 2.2rem;
}

.margin-bottom-22, .mb-22 {
  margin: 2.2rem;
}

.padding-22, .p-22 {
  padding: 2.2rem;
}

.padding-left-22, .pl-22 {
  padding-left: 2.2rem;
}

.padding-top-22, .pt-22 {
  padding-top: 2.2rem;
}

.padding-right-22, .pr-22 {
  padding-right: 2.2rem;
}

.padding-bottom-22, .pb-22 {
  padding: 2.2rem;
}

.margin-23, .m-23 {
  margin: 2.3rem;
}

.margin-left-23, .ml-23 {
  margin-left: 2.3rem;
}

.margin-top-23, .mt-23 {
  margin-top: 2.3rem;
}

.margin-right-23, .mr-23 {
  margin-right: 2.3rem;
}

.margin-bottom-23, .mb-23 {
  margin: 2.3rem;
}

.padding-23, .p-23 {
  padding: 2.3rem;
}

.padding-left-23, .pl-23 {
  padding-left: 2.3rem;
}

.padding-top-23, .pt-23 {
  padding-top: 2.3rem;
}

.padding-right-23, .pr-23 {
  padding-right: 2.3rem;
}

.padding-bottom-23, .pb-23 {
  padding: 2.3rem;
}

.margin-24, .m-24 {
  margin: 2.4rem;
}

.margin-left-24, .ml-24 {
  margin-left: 2.4rem;
}

.margin-top-24, .mt-24 {
  margin-top: 2.4rem;
}

.margin-right-24, .mr-24 {
  margin-right: 2.4rem;
}

.margin-bottom-24, .mb-24 {
  margin: 2.4rem;
}

.padding-24, .p-24 {
  padding: 2.4rem;
}

.padding-left-24, .pl-24 {
  padding-left: 2.4rem;
}

.padding-top-24, .pt-24 {
  padding-top: 2.4rem;
}

.padding-right-24, .pr-24 {
  padding-right: 2.4rem;
}

.padding-bottom-24, .pb-24 {
  padding: 2.4rem;
}

.margin-25, .m-25 {
  margin: 2.5rem;
}

.margin-left-25, .ml-25 {
  margin-left: 2.5rem;
}

.margin-top-25, .mt-25 {
  margin-top: 2.5rem;
}

.margin-right-25, .mr-25 {
  margin-right: 2.5rem;
}

.margin-bottom-25, .mb-25 {
  margin: 2.5rem;
}

.padding-25, .p-25 {
  padding: 2.5rem;
}

.padding-left-25, .pl-25 {
  padding-left: 2.5rem;
}

.padding-top-25, .pt-25 {
  padding-top: 2.5rem;
}

.padding-right-25, .pr-25 {
  padding-right: 2.5rem;
}

.padding-bottom-25, .pb-25 {
  padding: 2.5rem;
}

nav {
  height: auto;
  width: 100%;
  background: var(--off-background);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem 2rem;
}

.close-nav-links {
  display: none;
}

.nav-links {
  list-style-type: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: auto;
}

.nav-links li {
  margin: 0 1rem;
}

.nav-links a {
  text-decoration: none;
  color: var(--text-color);
}

.nav-links a:hover {
  color: var(--accent-color);
}

.nav-left-side {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.nav-left-side i {
  margin-right: 1rem;
  padding: 0.5rem 0.5rem 0.5rem 0;
}

@media only screen and (max-width: 650px) {
  .reverse-mobile-content {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
  .nav-left-side {
    width: 100%;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .nav-on-mobile {
    position: fixed;
    top: -100%;
    left: 0;
    background-color: var(--off-background);
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 100%;
    z-index: 100;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
    -webkit-transition: 0.6s all ease;
    transition: 0.6s all ease;
  }
  .nav-on-mobile li {
    margin: 1rem;
    font-size: 2rem;
    opacity: 0;
    position: relative;
    top: 20px;
    -webkit-transition: 0.6s all ease;
    transition: 0.6s all ease;
  }
  .nav-on-mobile li * {
    font-size: 2rem;
  }
  .nav-on-mobile .close-nav-links {
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    color: var(--accent-color);
    top: 0;
    right: 0;
    font-size: 3rem;
    margin: 1.5rem 2rem;
    cursor: pointer;
  }
  .nav-on-mobile-open {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  .nav-on-mobile-open li {
    opacity: 1;
    position: relative;
    top: 0px;
  }
}

.sidebar {
  background: var(--off-background);
  display: inline-block;
  position: fixed;
  width: var(--sidebar-open-width);
  height: 100%;
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  overflow: auto;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  z-index: 2;
}

.sidebar .sidebar-section {
  position: relative;
  margin: 2rem 0;
  padding: 0 2rem 2rem 2rem;
}

.sidebar .sidebar-element {
  margin: 1.2rem 0;
  width: 100%;
}

.sidebar .sidebar-element a, .sidebar .sidebar-element span {
  position: relative;
  width: 100%;
  text-decoration: none;
  color: var(--link-color);
  white-space: nowrap;
  -webkit-transition: 0.2s all ease;
  transition: 0.2s all ease;
}

.sidebar .sidebar-element a:hover, .sidebar .sidebar-element span:hover {
  color: var(--accent-color);
}

.sidebar .sidebar-element a {
  display: block;
  position: relative;
  width: 100%;
}

.sidebar .sidebar-element a:hover span {
  color: var(--accent-color);
}

.sidebar .sidebar-element span {
  position: relative;
  top: -0.12rem;
}

.sidebar .sidebar-element i {
  margin: 0 0.4rem 0 0.1rem;
  -webkit-transition: 0.2s all ease;
  transition: 0.2s all ease;
}

.sidebar .title {
  border-bottom: 1px solid var(--text-color);
  padding-bottom: 0.5rem;
  margin: 0 0 1rem;
  -webkit-transition: 0.2s all ease;
  transition: 0.2s all ease;
}

.sidebar-open {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}

.closesidebaronmobile {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100vw;
  background: var(--text-color);
  -webkit-animation: fadein var(--animation-time) ease forwards;
          animation: fadein var(--animation-time) ease forwards;
}

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.7;
  }
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.7;
  }
}

.sidebar-partial {
  overflow-x: hidden;
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
  -webkit-animation: reducewidth 0.2s ease-in 0.2s forwards;
          animation: reducewidth 0.2s ease-in 0.2s forwards;
}

.sidebar-partial .sidebar-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  background: var(--accent-color);
}

.sidebar-partial .sidebar-section .title {
  -webkit-animation: fadeoff 0.3s ease forwards;
          animation: fadeoff 0.3s ease forwards;
}

.sidebar-partial .sidebar-section span {
  -webkit-animation: fadeoff 0.3s ease forwards;
          animation: fadeoff 0.3s ease forwards;
}

.sidebar-partial .sidebar-section i {
  padding: 0.5rem;
  position: relative;
  z-index: 2;
}

.sidebar-partial .sidebar-section i::before {
  position: relative;
  z-index: 1;
}

.sidebar-partial .sidebar-section i::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  z-index: 0;
  background: var(--accent-color);
  opacity: 0;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
}

.sidebar-partial .sidebar-section i:hover::after {
  opacity: 0.5;
}

@-webkit-keyframes fadeoff {
  0% {
    opacity: 1;
    display: inherit;
  }
  95% {
    opacity: 0;
    display: inherit;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

@keyframes fadeoff {
  0% {
    opacity: 1;
    display: inherit;
  }
  95% {
    opacity: 0;
    display: inherit;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

@-webkit-keyframes reducewidth {
  100% {
    width: var(--sidebar-partial-width);
  }
}

@keyframes reducewidth {
  100% {
    width: var(--sidebar-partial-width);
  }
}

@media only screen and (max-width: 650px) {
  .sidebar-partial {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

footer {
  position: relative;
  background: var(--off-background);
}

@media only screen and (max-width: 1024px) {
  .footer-info {
    padding-bottom: 2rem;
  }
}

@media only screen and (max-width: 650px) {
  .footer-info {
    padding-bottom: 2rem;
  }
  .center-mobile-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.row {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
}

.col-1 {
  width: calc(100%*1/12);
}

.col-2 {
  width: calc(100%*2/12);
}

.col-3 {
  width: calc(100%*3/12);
}

.col-4 {
  width: calc(100%*4/12);
}

.col-5 {
  width: calc(100%*5/12);
}

.col-6 {
  width: calc(100%*6/12);
}

.col-7 {
  width: calc(100%*7/12);
}

.col-8 {
  width: calc(100%*8/12);
}

.col-9 {
  width: calc(100%*9/12);
}

.col-10 {
  width: calc(100%*10/12);
}

.col-11 {
  width: calc(100%*11/12);
}

.col-12 {
  width: calc(100%*12/12);
}

.col-lg-1 {
  width: calc(100%*1/12);
}

.col-lg-2 {
  width: calc(100%*2/12);
}

.col-lg-3 {
  width: calc(100%*3/12);
}

.col-lg-4 {
  width: calc(100%*4/12);
}

.col-lg-5 {
  width: calc(100%*5/12);
}

.col-lg-6 {
  width: calc(100%*6/12);
}

.col-lg-7 {
  width: calc(100%*7/12);
}

.col-lg-8 {
  width: calc(100%*8/12);
}

.col-lg-9 {
  width: calc(100%*9/12);
}

.col-lg-10 {
  width: calc(100%*10/12);
}

.col-lg-11 {
  width: calc(100%*11/12);
}

.col-lg-12 {
  width: calc(100%*12/12);
}

@media only screen and (max-width: 1024px) {
  .col-md-1 {
    width: calc(100%*1/12);
  }
  .col-md-2 {
    width: calc(100%*2/12);
  }
  .col-md-3 {
    width: calc(100%*3/12);
  }
  .col-md-4 {
    width: calc(100%*4/12);
  }
  .col-md-5 {
    width: calc(100%*5/12);
  }
  .col-md-6 {
    width: calc(100%*6/12);
  }
  .col-md-7 {
    width: calc(100%*7/12);
  }
  .col-md-8 {
    width: calc(100%*8/12);
  }
  .col-md-9 {
    width: calc(100%*9/12);
  }
  .col-md-10 {
    width: calc(100%*10/12);
  }
  .col-md-11 {
    width: calc(100%*11/12);
  }
  .col-md-12 {
    width: calc(100%*12/12);
  }
}

@media only screen and (max-width: 650px) {
  .col-sm-1 {
    width: calc(100%*1/12);
  }
  .col-sm-2 {
    width: calc(100%*2/12);
  }
  .col-sm-3 {
    width: calc(100%*3/12);
  }
  .col-sm-4 {
    width: calc(100%*4/12);
  }
  .col-sm-5 {
    width: calc(100%*5/12);
  }
  .col-sm-6 {
    width: calc(100%*6/12);
  }
  .col-sm-7 {
    width: calc(100%*7/12);
  }
  .col-sm-8 {
    width: calc(100%*8/12);
  }
  .col-sm-9 {
    width: calc(100%*9/12);
  }
  .col-sm-10 {
    width: calc(100%*10/12);
  }
  .col-sm-11 {
    width: calc(100%*11/12);
  }
  .col-sm-12 {
    width: calc(100%*12/12);
  }
}

.card img {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.card .icon-text {
  margin-bottom: 0.5rem;
}

.dimentional-carousel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.5rem 0;
  position: relative;
}

.dimentional-carousel .controls {
  position: absolute;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.dimentional-carousel .controls i {
  position: relative;
  z-index: 3;
  font-size: 25px;
  padding: 1rem;
  background: var(--accent-color);
  border-radius: 100rem;
  color: var(--main-background);
  opacity: 0.8;
  -webkit-transition: var(--transition-time);
  transition: var(--transition-time);
  cursor: pointer;
}

.dimentional-carousel .controls i:hover {
  opacity: 1;
}

.dimentional-carousel .carousel-item {
  background: var(--main-background);
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-preferred-size: auto;
      flex-basis: auto;
  position: relative;
}

.dimentional-carousel .carousel-item .card {
  width: 300px;
}

.dimentional-carousel .carousel-item .box {
  width: 300px;
  height: 450px;
  background: #49bfee;
  border: 2px solid var(--text-color);
}

.btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.5rem 0.5rem;
  background-color: transparent;
  border: var(--border-thickness) var(--text-color) var(--border-style);
  cursor: pointer;
  border-radius: var(--small-border-radius);
  position: relative;
  font-size: var(--text-font-size);
}

.btn:active {
  -webkit-animation: clicked var(--animation-time) ease;
          animation: clicked var(--animation-time) ease;
}

.btn-md {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.8rem 1.2rem;
  background-color: transparent;
  border: var(--border-thickness) var(--text-color) var(--border-style);
  cursor: pointer;
  border-radius: var(--small-border-radius);
  position: relative;
  font-size: var(--h4-size);
}

.btn-md:active {
  -webkit-animation: clicked var(--animation-time) ease;
          animation: clicked var(--animation-time) ease;
}

.btn-lg {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1rem 2rem;
  background-color: transparent;
  border: var(--border-thickness) var(--text-color) var(--border-style);
  cursor: pointer;
  border-radius: var(--small-border-radius);
  position: relative;
  font-size: var(--h3-size);
}

.btn-lg:active {
  -webkit-animation: clicked var(--animation-time) ease;
          animation: clicked var(--animation-time) ease;
}

@-webkit-keyframes clicked {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  90% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes clicked {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  90% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

.solid-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--main-background);
  -webkit-transition: var(--transition-time);
  transition: var(--transition-time);
}

.solid-primary * {
  fill: var(--main-background);
  stroke: var(--main-background);
  color: var(--main-background);
}

.solid-primary:hover {
  -webkit-filter: brightness(1.15);
          filter: brightness(1.15);
}

.outlined-primary {
  border-color: var(--color-primary);
  color: var(--color-primary);
  fill: var(--color-primary);
  -webkit-transition: var(--transition-time);
  transition: var(--transition-time);
}

.outlined-primary:hover {
  background: var(--color-primary);
  color: var(--main-background);
}

.outlined-primary:hover * {
  color: var(--main-background);
  fill: var(--main-background);
}

.outlined-primary * {
  color: var(--color-primary);
  fill: var(--color-primary);
  stroke: var(--color-primary);
}

.glow-primary {
  border-color: transparent;
  color: var(--color-primary);
  fill: var(--color-primary);
  -webkit-transition: var(--transition-time);
  transition: var(--transition-time);
  position: relative;
}

.glow-primary * {
  color: var(--color-primary);
  fill: var(--color-primary);
  stroke: var(--color-primary);
}

.glow-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--color-primary);
  opacity: 0.17;
  border-radius: inherit;
  -webkit-transition: var(--transition-time);
  transition: var(--transition-time);
}

.glow-primary:hover::before {
  opacity: 0.3;
}

.solid-warning {
  background: var(--color-warning);
  border-color: var(--color-warning);
  color: var(--main-background);
  -webkit-transition: var(--transition-time);
  transition: var(--transition-time);
}

.solid-warning * {
  fill: var(--main-background);
  stroke: var(--main-background);
  color: var(--main-background);
}

.solid-warning:hover {
  -webkit-filter: brightness(1.15);
          filter: brightness(1.15);
}

.outlined-warning {
  border-color: var(--color-warning);
  color: var(--color-warning);
  fill: var(--color-warning);
  -webkit-transition: var(--transition-time);
  transition: var(--transition-time);
}

.outlined-warning:hover {
  background: var(--color-warning);
  color: var(--main-background);
}

.outlined-warning:hover * {
  color: var(--main-background);
  fill: var(--main-background);
}

.outlined-warning * {
  color: var(--color-warning);
  fill: var(--color-warning);
  stroke: var(--color-warning);
}

.glow-warning {
  border-color: transparent;
  color: var(--color-warning);
  fill: var(--color-warning);
  -webkit-transition: var(--transition-time);
  transition: var(--transition-time);
  position: relative;
}

.glow-warning * {
  color: var(--color-warning);
  fill: var(--color-warning);
  stroke: var(--color-warning);
}

.glow-warning::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--color-warning);
  opacity: 0.17;
  border-radius: inherit;
  -webkit-transition: var(--transition-time);
  transition: var(--transition-time);
}

.glow-warning:hover::before {
  opacity: 0.3;
}

.solid-danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--main-background);
  -webkit-transition: var(--transition-time);
  transition: var(--transition-time);
}

.solid-danger * {
  fill: var(--main-background);
  stroke: var(--main-background);
  color: var(--main-background);
}

.solid-danger:hover {
  -webkit-filter: brightness(1.15);
          filter: brightness(1.15);
}

.outlined-danger {
  border-color: var(--color-danger);
  color: var(--color-danger);
  fill: var(--color-danger);
  -webkit-transition: var(--transition-time);
  transition: var(--transition-time);
}

.outlined-danger:hover {
  background: var(--color-danger);
  color: var(--main-background);
}

.outlined-danger:hover * {
  color: var(--main-background);
  fill: var(--main-background);
}

.outlined-danger * {
  color: var(--color-danger);
  fill: var(--color-danger);
  stroke: var(--color-danger);
}

.glow-danger {
  border-color: transparent;
  color: var(--color-danger);
  fill: var(--color-danger);
  -webkit-transition: var(--transition-time);
  transition: var(--transition-time);
  position: relative;
}

.glow-danger * {
  color: var(--color-danger);
  fill: var(--color-danger);
  stroke: var(--color-danger);
}

.glow-danger::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--color-danger);
  opacity: 0.17;
  border-radius: inherit;
  -webkit-transition: var(--transition-time);
  transition: var(--transition-time);
}

.glow-danger:hover::before {
  opacity: 0.3;
}

.solid-success {
  background: var(--color-success);
  border-color: var(--color-success);
  color: var(--main-background);
  -webkit-transition: var(--transition-time);
  transition: var(--transition-time);
}

.solid-success * {
  fill: var(--main-background);
  stroke: var(--main-background);
  color: var(--main-background);
}

.solid-success:hover {
  -webkit-filter: brightness(1.15);
          filter: brightness(1.15);
}

.outlined-success {
  border-color: var(--color-success);
  color: var(--color-success);
  fill: var(--color-success);
  -webkit-transition: var(--transition-time);
  transition: var(--transition-time);
}

.outlined-success:hover {
  background: var(--color-success);
  color: var(--main-background);
}

.outlined-success:hover * {
  color: var(--main-background);
  fill: var(--main-background);
}

.outlined-success * {
  color: var(--color-success);
  fill: var(--color-success);
  stroke: var(--color-success);
}

.glow-success {
  border-color: transparent;
  color: var(--color-success);
  fill: var(--color-success);
  -webkit-transition: var(--transition-time);
  transition: var(--transition-time);
  position: relative;
}

.glow-success * {
  color: var(--color-success);
  fill: var(--color-success);
  stroke: var(--color-success);
}

.glow-success::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--color-success);
  opacity: 0.17;
  border-radius: inherit;
  -webkit-transition: var(--transition-time);
  transition: var(--transition-time);
}

.glow-success:hover::before {
  opacity: 0.3;
}

.outline-btn-not-rounded {
  padding: 0.3rem 1.5rem;
  background: none;
  outline: none;
  border: 1px solid;
  border-radius: 2px;
  cursor: pointer;
  -webkit-transition: var(--transition-time) all;
  transition: var(--transition-time) all;
}

.outline-btn-not-rounded:hover {
  background: rgba(200, 200, 200, 0.2);
}

.btn-icon i {
  margin: 0 0.5rem 0 0;
}

.btn-round {
  cursor: pointer;
  border-radius: 10000rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.btn-icon-round {
  cursor: pointer;
  border-radius: 10000rem;
}

.dropdown {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.dropdown .dropdown-options {
  display: none;
  -webkit-transition: var(--transition-time) opacity ease;
  transition: var(--transition-time) opacity ease;
  position: absolute;
  top: 100%;
  z-index: 10;
  border-radius: var(--border-radius);
  padding: 1rem 0;
  background: var(--off-background);
  -webkit-box-shadow: 0 0 20px var(--dropshadow-color);
          box-shadow: 0 0 20px var(--dropshadow-color);
}

.dropdown .dropdown-options .dropdown-item {
  padding: 0.5rem 1rem;
  -webkit-transition: var(--transition-time) background ease;
  transition: var(--transition-time) background ease;
}

.dropdown .dropdown-options .dropdown-item:hover {
  background: rgba(var(--accent-color-triad), 0.3);
}

.dropdown .dropdown-left {
  left: 0;
}

.dropdown .dropdown-right {
  right: 0;
}

.dropdown .dropdown-show {
  display: inline-block;
  -webkit-animation: fade_dropdown var(--transition-time);
          animation: fade_dropdown var(--transition-time);
}

.closedropdown {
  position: absolute;
  top: 0;
  right: 0;
}

@-webkit-keyframes fade_dropdown {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade_dropdown {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fit-img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: inherit;
}
/*# sourceMappingURL=main.css.map */