/* The Simple Design System is made with ❤️ by Glenn Sorrentino - https://glennsorrentino.com */
/* Please consider contributing! */

/* Add your custom styles in this file... */

@keyframes gradient {
  0% {
    -webkit-filter: hue-rotate(0);
    -moz-filter: hue-rotate(0);
    -ms-filter: hue-rotate(0);
    filter: hue-rotate(0);
  }
  50% {
    -webkit-filter: hue-rotate(360deg);
    -moz-filter: hue-rotate(360deg);
    -ms-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
  }
  100% {
    -webkit-filter: hue-rotate(0);
    -moz-filter: hue-rotate(0);
    -ms-filter: hue-rotate(0);
    filter: hue-rotate(0);
  }
}

@font-face {
  font-family: "Brand";
  src: url("fonts/sans/LexendDeca-Regular.woff2") format("woff2"),
       url("fonts/sans/LexendDeca-Regular.woff") format("woff");
}

@media (prefers-color-scheme: light) {

	:focus {
  	text-decoration: underline;
  	outline: solid rgb(100,33,166);
	}

	.btn:focus {
	  text-decoration: underline;
	  outline: solid rgb(100,33,166);
	}

	::selection {
		background: rgb(100,33,166);
	}

	#pricing {
		background-color: inherit;
	}

  header.island {
    border: var(--border-dark);
    box-shadow: var(--shadow-lm-tight);
  }

	.intro h2, .highlight, .brandMark {
	    background: rgb(100,33,166);
	    background: -moz-linear-gradient(135deg, rgba(100,33,166,1) 0%, rgba(86,65,193,1) 50%, rgba(74,95,217,1) 100%);
	    background: -webkit-linear-gradient(135deg, rgba(100,33,166,1) 0%, rgba(86,65,193,1) 50%, rgba(74,95,217,1) 100%);
	    background: linear-gradient(135deg, rgba(100,33,166,1) 0%, rgba(86,65,193,1) 50%, rgba(74,95,217,1) 100%);
	    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6421a6",endColorstr="#4a5fd9",GradientType=1);
	}

	.card .description {
		border: 3px solid rgb(100,33,166);
		box-shadow: 6px 6px 0 rgba(100,33,166,.25);
	}

  #partners {
    background-color: var(--color-light-translucent);
  }

	#users .avatar {
		box-shadow: 3px 3px 0 rgba(100,33,166,.25);
	}

	.banner {
		background: rgb(100,33,166);
	}

	.primaryBtn {
		background: rgb(100,33,166);
    color: white !important;
	}

	nav ul li a:not(.btn):hover {
	  box-shadow: inset 0 -3px rgb(100,33,166) !important;
	}

	.btn, .badge {
		border: 2px solid rgb(100,33,166);
		color: rgb(100,33,166);
	}

	.badge {
		background-color: var(--color-light);
	}

	#services {
    background-size: 1rem 1rem;
    background-image:
    linear-gradient(to right, rgba(100,33,166,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(100,33,166,0.08) 1px, transparent 1px);
  }

    .icon.design {
    background-image: url('../images/icons/lm-design.png');
  }

  .icon.research {
    background-image: url('../images/icons/lm-research.png');
  }

  .icon.eng {
    background-image: url('../images/icons/lm-eng.png');
  }

  .icon.video {
    background-image: url('../images/icons/lm-video.png');
  }

  .icon.security {
    background-image: url('../images/icons/lm-sec.png');
  }

  .icon.writing {
    background-image: url('../images/icons/lm-writing.png');
  }

  .icon.project {
    background-image: url('../images/icons/lm-project.png');
  }

  .icon.time {
    background-image: url('../images/icons/lm-time.png');
  }

  .icon.retainer {
    background-image: url('../images/icons/lm-retainer.png');
  }

  .icon.crit {
    background-image: url('../images/icons/lm-crit.png');
  }

  .icon.donor {
    background-image: url('../images/icons/lm-donor.png');
  }

  .icon.mail {
    background-image: url('../images/icons/lm-mail.png');
  }

  .icon.tor {
    background-image: url('../images/icons/lm-tor.png');
  }

  .icon.contrib {
    background-image: url('../images/icons/lm-contrib.png');
  }

  .icon.safe {
    background-image: url('../images/icons/lm-safe.png');
  }

  .icon.access {
    background-image: url('../images/icons/lm-access.png');
  }

  .icon.edu {
    background-image: url('../images/icons/lm-edu.png');
  }

  #users, .userSection {
  	background-image: radial-gradient(rgb(100,33,166) 0%, transparent 7%);
	  background-position: 0;
 	  background-size: 20px 20px;
	}
}

@media (prefers-color-scheme: dark) {

	:focus {
  	text-decoration: underline;
  	outline: solid rgb(178,144,210);
	}

	.btn:focus {
	  text-decoration: underline;
	  outline: solid rgb(178,144,210);
	}

	::selection {
		background: rgb(178,144,210);
	}

  #getInvolved {
    background-color: var(--color-dark);
  }

	#pricing {
		background-color: inherit;
	}

	#users, .userSection {
  	background-image: radial-gradient(rgb(178,144,210) 0%, transparent 7%);
 	  background-color: #333;
	  background-position: 0;
    background-size: 20px 20px;
	}

  header.island {
    border: var(--border-light);
    box-shadow: var(--shadow-dm);
  }

	#users .avatar {
		box-shadow: 3px 3px 0 rgba(178,144,210,.25);
	}
	
	.intro h2, .highlight, .brandMark {
	    background: rgb(178,144,210);
	    background: -moz-linear-gradient(135deg, rgba(178,144,210,1) 0%, rgba(170,160,224,1) 50%, rgba(164,175,236,1) 100%);
	    background: -webkit-linear-gradient(135deg, rgba(178,144,210,1) 0%, rgba(170,160,224,1) 50%, rgba(164,175,236,1) 100%);
	    background: linear-gradient(135deg, rgba(178,144,210,1) 0%, rgba(170,160,224,1) 50%, rgba(164,175,236,1) 100%);
	    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6421a6",endColorstr="#4a5fd9",GradientType=1);
	}

	.banner {
		background: rgb(178,144,210)
	}

 	.primaryBtn {
		background: rgb(178,144,210);
	}

	nav ul li a:not(.btn):hover {
	  box-shadow: inset 0 -3px rgb(178,144,210) !important;
	}

	.btn:not(.primaryBtn) {
		color: rgb(178,144,210);
	}

	.btn {
		border: 2px solid rgb(178,144,210);
	}

	.card .description {
		border: 3px solid rgb(178,144,210);
		box-shadow: 6px 6px 0 rgba(178,144,210,.25);
	}

	#services {
    background-size: 1rem 1rem;
    background-image:
    linear-gradient(to right, rgba(178,144,210,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(178,144,210,0.08) 1px, transparent 1px);
  }

   .icon.design {
      background-image: url('../images/icons/dm-design.png');
    }

   .icon.access {
      background-image: url('../images/icons/dm-access.png');
    }

    .icon.research {
      background-image: url('../images/icons/dm-research.png');
    }

    .icon.eng {
      background-image: url('../images/icons/dm-eng.png');
    }

    .icon.video {
      background-image: url('../images/icons/dm-video.png');
    }

    .icon.security {
      background-image: url('../images/icons/dm-sec.png');
    }

    .icon.writing {
      background-image: url('../images/icons/dm-writing.png');
    }

    .icon.safe {
      background-image: url('../images/icons/dm-safe.png');
    }

    .icon.edu {
      background-image: url('../images/icons/dm-edu.png');
    }

    .icon.project {
      background-image: url('../images/icons/dm-project.png');
    }

    .icon.time {
      background-image: url('../images/icons/dm-time.png');
    }

    .icon.retainer {
      background-image: url('../images/icons/dm-retainer.png');
    }

    .icon.crit {
      background-image: url('../images/icons/dm-crit.png');
    }

    .icon.donor {
      background-image: url('../images/icons/dm-donor.png');
    }

    .icon.mail {
      background-image: url('../images/icons/dm-mail.png');
    }

    .icon.tor {
      background-image: url('../images/icons/dm-tor.png');
    }

    .icon.contrib {
      background-image: url('../images/icons/dm-contrib.png');
    }
}

html {
	scroll-padding-top: var(--spacing-xxlarge);
}

.logo h1 {
	letter-spacing: var(--kern-wide);
}

tr th:first-of-type {
  text-align: center;
}

.brandMark {
	font-family: 'Brand';
	font-size: calc(var(--font-size-logo) * 1.25);
	position: relative;
	margin: 0 var(--spacing-xsmall);
	-webkit-background-clip: text;
  	text-fill-color: transparent;
  	-webkit-text-fill-color: transparent;
	animation: gradient 30s infinite;
	top: -2px
}

header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  flex: 0 1 auto;
  z-index: 9;
  backdrop-filter: blur(var(--spacing-base));
  -webkit-backdrop-filter: blur(var(--spacing-base));
}

header .wrapper {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

header .logo {
  display: flex;
  align-items: center;
  height: var(--size-logo);
  padding: calc(var(--spacing-medium) * 1.125) 0;
  line-height: var(--line-height-base);
  display: flex;
  width: fit-content;
  position: relative;
  top: -1px;
}

header.island {
  width: fit-content;
  margin: var(--spacing-base) auto 0 auto;
  border-radius: var(--radius-softer);
}

header.island .logo {
	top: 0 !important;
  align-self: center;
  padding: 0;
  margin: 0 var(--spacing-medium) 0 0;
  scale: .85;
}

header.island .wrapper {
  padding: 0 var(--spacing-small);
}

header.island nav ul li a.wrapper {
  padding: 0 calc(var(--spacing-base) * .75);
}

header.island .btnLrg {
  padding: calc(var(--spacing-base) * .625) calc(var(--spacing-base) * .75) !important;
  font-size: calc(var(--font-size-smaller) * .9);
}

nav .btn {
  margin: var(--spacing-small) 0 var(--spacing-small) var(--spacing-xsmall) !important;
}

nav a {
  font-size: .825rem;
}

header h1 {
  padding: 0;
  margin: 0;
}



.intro h2 {
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gradient 30s infinite;
  line-height: var(--line-height-heading);
  width: 50%;
}

.highlight {
	animation: gradient 60s infinite;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Sans';
	letter-spacing: var(--kern-wide);
}

h3, h4, h5, h6 {
	letter-spacing: var(--kern-open);
	font-family: 'Sans Bold';

}

.articleBody h2 {
	line-height: var(--line-height-tight) !important;
}

  #users .description {
  	align-items: center;
  }

	#users h4 {
		width: 100%;
		text-align: center;
	}

@media only screen and (max-width: 1280px) {
  .intro h2 {
    width: 60%;
  }
}

@media only screen and (max-width: 1024px) {
	.intro h2 {
    width: 66%;
	}
}

@media only screen and (max-width: 1000px) {
  @media (prefers-color-scheme: light) {
    header nav ul {
      box-shadow: var(--shadow-lm);
      background-color: var(--color-light);
      border: var(--border-dark);
    }

    header nav ul li a:hover {
      box-shadow: inset 3px 0 var(--color-dark);
    }

    header nav ul li a:not(.btn):hover {
      box-shadow: inset 3px 0 rgb(100,33,166) !important;
    }
  }

  @media (prefers-color-scheme: dark) {
    header nav ul {
      box-shadow: var(--shadow-dm);
      background-color: var(--color-shade-dm);
      border: var(--border-light);
    }

    header nav ul li a:hover {
      box-shadow: inset 3px 0 var(--color-light);
    }

    header nav ul li a:not(.btn):hover {
      box-shadow: inset 3px 0 rgb(178,144,210) !important;
    }
  }

  header nav ul {
    display: none;
  }

  header nav .btn {
    margin: var(--spacing-small) 0 !important;
  }

  .mobileNav {
    display: flex;
    align-self: center;
    margin-right: var(--spacing-small);
  }

  header nav ul {
    flex-direction: column;
    position: absolute;
    top: 72px;
    width: max-content;
    z-index: 1;
    padding: var(--spacing-small) 0;
    align-items: flex-start;
    border-radius: var(--radius-soft);
  }

  header nav ul li a.wrapper {
    display: flex;
    width: 100%;
  }

  nav .btn:last-of-type {
    margin-right: 0;
  }

  nav ul .btn {
    margin-right: var(--spacing-base) !important;
    margin-left: var(--spacing-base) !important;
  }

  header nav ul li a {
    padding-top: var(--spacing-base) !important;
    padding-bottom: var(--spacing-base) !important;
    padding-left: var(--spacing-medium) !important;
    padding-right: var(--spacing-medium) !important;
  }

  header nav .btn {
    margin: var(--spacing-base) var(--spacing-medium);
    display: inline-flex !important;
  }

  header nav ul li a.wrapper {
    display: flex;
  }

  header nav .badge {
    margin-right: 0;
    margin-left: var(--spacing-medium);
  }
}

@media only screen and (max-width: 900px) {
  header h1 {
    font-size: calc(var(--font-size-logo) * .9) !important;
  }

  .intro h2 {
    width: 80%;
  }

}

@media only screen and (max-width: 768px) {
	.intro h2 {
	}
}

@media only screen and (max-width: 640px) {
  .intro h2 {
    width: 100%;
  }
}

@media only screen and (max-width: 480px) {
  .intro h2 {
    width: 100%;
  }
}