@font-face {
  font-family: "Gotham Medium";
  font-display: swap;
  src: url(Gotham_Medium.otf) format("opentype");
}

/* @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); */


/* Variables */

:root {
    --header-bg: #e2ffc0;
    --header-bg-50: #e2ffc080;
    --nav-bg: #c1eaa4;
	  --nav-accent:rgb(250, 255, 180);
	  --nav-hover: #ffe070;
    --header-text: black;
    --black-transparent: rgba(0,0,0,0.3);
    --accent-bg: #e2f4ae;
    --light-bg: #f0f3e0;
    --accent-text: #00843D;
    --accent-text-hover: #33b274;
	  --accent-gradient: linear-gradient(to left, var(--nav-bg), var(--accent-bg));
  }


/* Bootstrap overrides */

.badge {
	font-size: 100%;
	border-radius: 0;
}

.badge-primary {
	background-color: var(--accent-text);
	position: relative;
	padding-right: 30px;
  white-space: wrap;
	clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 100%, 0 100%);
}

.bg-primary, .btn-primary {
	background-color: var(--accent-text) !important;
  border: none !important;
  color: white;
}

.bg-light {
	background-color: var(--light-bg) ! important;
}

.large {
  font-size: 14pt;
}


/* Main */

  body {
    font-family: Montserrat, sans-serif;
	line-height: 1.6em;
  }

  body a {
    color: var(--accent-text);
  }

  body a:hover, body a:active {
    color: var(--accent-text-hover);
  }

  h1, h2, h3, h4 {
    font-family: "Gotham Medium", "Public Sans", sans-serif;
    font-weight: normal;
	  margin-top: 1.2em;
  }

  #main-nav {
    padding: 0;
    background: var(--accent-gradient);
    min-height: 10vh;
    box-sizing: border-box;
	font-size: 11pt;
  }

  #main-nav .nav-accent {
	position: absolute;
	width: 10vh;
	height: 100%;
	right: 0;
	top: 0;
    background-color: var(--header-bg);
	overflow: visible;
	z-index: -1;
	clip-path: polygon(80% 100%, 100% 100%, 100% 0%, 0 0%);
  }

  @media screen and (max-width: 993px) {
	#main-nav .nav-accent {
		display: none;
	}
  }

  #main-nav .container {
	margin-top: 0;
  }

  @media only screen and (max-width: 580px) {
	#main-nav .container {
		margin-left: 0.4rem;
		margin-right: 0.4rem;
	}
  }

  #main-nav .nav-item {
    position: relative;
  }

  #main-nav .nav-item:hover {
    background: var(--accent-bg);
  }
  
  #main-nav .nav-item:hover .nav-link {
	color: var(--header-text);
  }

  .has-dropdown:after {
	content: "▾";
  }

  #main-nav .nav-dropdown {
    position: absolute;
    top: 100%;
    background: var(--accent-bg);
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    min-width: 200px;
  }

  @media screen and (max-width: 993px) {
	#main-nav .nav-dropdown {
		position: relative;
		display: block;
		width: 100%;
		text-align: right;
	}
  }

  #main-nav .nav-dropdown a:hover {
	background-color: var(--nav-hover);
  }

  #main-nav .nav-dropdown a {
    display: block;
    color: var(--header-text);
    padding: 0.4rem;
  }

  #main-nav .nav-item:hover .nav-dropdown {
    display: block;
  }

  .main {
	min-height: 50vh;
    margin: 0 auto;
  }

  .main a {
	border-bottom: 1px dashed;
  }

  .main-column {
    padding-top: 2rem;
    padding-bottom: 3rem;
  }

  .main-header {
    font-weight: 700;
    color: var(--accent-text);
    margin-bottom: 1rem;
  }

  .link-group {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  .footer {
	background: var(--accent-gradient);
  }