@import "../css/colors.css";
@import "../css/typography.css";
@import "../css/responsive.css";
@import "../node_modules/bootstrap/dist/css/bootstrap-grid.css";
@import "../node_modules/bootstrap/dist/css/bootstrap-utilities.css";

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
}

body, .dark-theme-bg {
    background-color: var(--main-bg-dark) !important;
    color: var(--white-60);
}

footer {
    background-color: var(--footer-dark);
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid var(--white-20);
    padding: 0;
}

img {
    width: 100%;
}

.fa-bars {
    font-size: 1.5rem;
}

.light-border-1 {
    border: 1px solid var(--white-20);
}

.dark-border-1 {
    border: 1px solid var(--secondary-bg-dark);
}

.border-radius-6 {
    border-radius: 6px;
}

/* Project blocks */

.projects-section a, .projects-section div {
    display: block;
    max-width: 500px;
    transition-duration: .4s;
}

.projects-section a:hover {
    transform: scale(calc(1.06));
    transition-duration: .4s;
}

.project-block {
    min-height: 650px;
    max-height: 690px;
    overflow: hidden;
    border-radius: 10px;
}

.project-bg {
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}

.dds-rework {
    background-color: #f5b93c;
    background-image: url(../images/dds-rework/dds-swatches.png);
}

.term-life-quoter {
    background-image: url(../images/term-life-quoter/term-life-quoter-bg.png);
}

.pm-design {
    background-image: url(../images/policy-management/policy-management-redesign-bg.jpg);
}

.ss-redesign {
    background-image: url(../images/simple-site/simple-site-redesign-bg.png);
}



/* Buttons */



.btn {
  background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
  border-radius: 50px;
  border-style: none;
  box-sizing: border-box;
  color: var(--white-90);
  cursor: pointer;
  flex-shrink: 0;
  font-family: var(--sofia-sans);
  font-size: 1rem;
  font-weight: 500;
  height: 4rem;
  padding: 0 1.6rem;
  text-align: center;
  text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
  transition: all .5s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.btn:hover {
  box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
  transition-duration: .1s;
}

.btn-secondary {
    background: linear-gradient(var(--main-bg-dark), var(--main-bg-dark)) padding-box,
                linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%) border-box;
    border-radius: 50em;
    border: 2px solid transparent;
    transition-duration: .3s;
}

.btn-tertiary {
    background: var(--main-bg-dark);
    padding: 0;
}

.btn.btn-secondary:hover {
    background: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%) padding-box,
                linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%) border-box;
    box-shadow: none; 
    transition-duration: .3s;
}

.btn.btn-tertiary:hover {
    text-decoration: underline;
    box-shadow: none;
}

.pill {
    padding: 2px 12px;
    border-radius: 50px;
    font-weight: 700;
}

.pill-dark {
    color: var(--text-dark);
    border: 2px solid var(--text-dark);
}

.pill-light {
    color: var(--white-80);
    border: 1px solid var(--white-80);
}