:root {
    --base: #9F65FC;
    --baseDark: #3C2E75;
    --baseDarker: #2A245A;
    --baseDarkest: #18212D;
}

a {
    color: inherit;
    text-decoration: none;
}
a:hover {
    color: inherit;
}

body {
    margin: 0;
    padding: 0;
}

.text-base {
    color: #FF9900;
}
.text-baseDark {
    color: var(--baseDark)
}
.text-baseDarker {
    color: var(--baseDarker)
}
.text-baseDarkest {
    color: var(--baseDarkest)
}
.bg-base {
    background-color: var(--base)
}
.bg-baseDark {
    background-color: var(--baseDark)
}
.bg-baseDarker {
    background-color: var(--baseDarker)
}
.bg-baseDarkest {
    background-color: var(--baseDarkest)
}

.py-50 {
    padding-top: 50px;
    padding-bottom: 50px;
}

.py-100 {
    padding-top: 100px;
    padding-bottom: 100px;
}

.bg-light {
    background-color: #eee;
}

.w-40 {
    width: 45%;
}

.w-350 {
    width: 350px;
}
.max-w-350 {
    max-width: 350px;
}
.max-w-300 {
    max-width: 300px;
}

@media screen and (max-width:992px) {
    .w-lg-100 {
      width: 100% !important;
    }
  }
@media screen and (max-width:768px) {
    .w-md-100 {
      width: 100% !important;
    }
  }

.z-100 {
    z-index: 100;
}

.h-basic-section {
    min-height: 700px;
}

.h-screen {
    min-height: 100vh;
}
.h-screen-with-header {
    min-height: calc(100vh - 150px);
}