@import "base.css";
@import "main.css";
@import "props.css";

html, body {
  background: var(--bg-color);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
}

p, li, td {
  color: var(--font-color);
}

/* ---------------------------
    Headings
------------------------------ */

.site-title {
  margin: 0
}

.page-title,
.section-title {
  position: relative;
  font-size: clamp(5rem, 6vw + 4rem, 14rem);
  font-weight: 700;
  z-index: 10;
}

.page-title {
  font-size: clamp(5rem, 6vw + 4rem, 14rem);
  margin: 0 auto 1rem -1rem;
}

.section-title {
  left: 0;
  top: 0;
  margin: 0 0 0 -1rem;
}

.list-title {
  margin-bottom: 0;
  padding-bottom: 0;
  line-height: 1.1;
}

.list-title:first-of-type {
  margin-top: 0;
}

/* ---------------------------
    Links
------------------------------ */

.container a {
  font-size: inherit;
  color: var(--primary-color);
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

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

/* ---------------------------
   Lists
------------------------------ */

ul.list {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}

ul.list li {
  line-height: 2;
  font-size: var(--font-sm);
}

ul.list li::before {
  content: "•";
  width: 20px;
  height: 20px;
  font-size: 4rem;
  line-height: 0.7;
  color: var(--primary-color);
  display: inline-block;
  position: relative;
  top: 8px;
}

.list.list-indent {
  padding-left: var(--padding-lg);
  text-indent: -(var(--margin-lg));
}

.list.list-indent li::before {
  left: var(--margin-lg);
}

.list-inline {
  display: flex;
  gap: var(--gap-md);
  align-items: center;
}

/* ---------------------------
    Buttons
------------------------------ */

.button.button-view {
  display: inline-block;
  background: var(--primary-color);
  border-radius: var(--radius-pill);
  color: var(--lt-color);
  font-size: 2rem;
  font-family: var(--heading-font);
  padding: var(--padding-md) var(--padding-xxl);
  text-decoration: none;
  box-shadow: 6px 6px 0 var(--secondary-color);
}

.button.button-view:hover {
  color: var(--lt-color);
  background: var(--secondary-color);
  box-shadow: 6px 6px 0 var(--primary-color);
}

.button.button-sm {
  padding: 6px;
  border: 1px solid var(--primary-color);
  border-radius: 3px;
  font-size: 1rem;
  display: inline-block;
  transition: all 0.3s ease-in-out;
}

.button.button-sm:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

/* ---------------------------
    Colors
------------------------------ */

.color-lt {
  color: var(--lt-color);
}

.color-md {
  color: var(--md-color);
}

.color-dk {
  color: var(--dk-color);
}

/* ---------------------------
    Gradients
------------------------------ */

.gradient {
  background: var(--gradient-6);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-dk {
  background: var(--gradient-5);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-md {
  background: var(--gradient-7);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-border {
  border: 5px solid;
  border-image: linear-gradient(45deg, var(--accent-color) 0%, var(--primary-color) 100%);
}

/* ---------------------------
    Backgrounds
------------------------------ */

.bg-gradient {
  background: linear-gradient(180deg, var(--font-color), var(--secondary-color));
  background-size: 400% 400%
}

.bg-dark {
  background: var(--font-color);
}

.bg-med {
  background: var(--md-color);
}

.bg-med-trans {
  background: var(--md-color-trans);
}

.bg-lt-gradient {
  background: var(--gradient-1);
}

.bg-dk-gradient {
  background: var(--gradient-5);
}

/* ---------------------------
   Scrollbars
------------------------------ */

::-webkit-scrollbar,
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  width: 7px;
  background: var(--lt-color);
}

::-webkit-scrollbar-thumb {
  width: 7px;
  background: var(--secondary-color);
}

::-webkit-scrollbar-button {
  display: none !important;
}