/* https://coolors.co/dfd9e2-001514-c2d076-e952de-684a52 */
/* https://www.colors.tools/lighten-and-darken/ */

:root {
	--light: #F7F7F9;
	--dark: #2B2D42;
	--dark-highlight: #E86A92;
	--dark-hightlight-pct: #f6c2d3;
	--bright-highlight: #F7E733;
	--bright-highlight-pct: #fbf395;
	--mid-highlight: #41E2BA;
	--mid-highlight-pct: #99f0da;

	--link: var(--mid-highlight);
	--visited-link: var(--mid-highlight-pct);
        --serif-font: Palatino,Palatino Linotype,Palatino LT STD,Book Antiqua,Georgia,serif;
        --sans-font: Gill Sans,Gill Sans MT,Calibri,sans-serif;
}

body {
	max-width: 80%;
	margin: 0 auto;
	background: var(--main-bg-color);
	font-size: 1.5em;
        font-family: var(--serif-font);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--sans-font);
}

h1 {
	font-size: 3em;
}

h2 {
	font-size: 2em;
}

.main-navigation {
	h1, h2 {
		text-align: center;
		color: var(--dark-highlight);
	}
	h1 {
		margin-bottom: 0;
		padding-bottom: 0;
	}
	h2 {
		margin-top: 0;
		padding-top: 0;
	}

	padding-bottom: 30px;
	border-bottom: 1px solid var(--bright-highlight);
}

a:not([class]) {
  	text-decoration-skip-ink: auto;
	text-decoration: none;
	color: currentColor;
	background: var(--link);
	&:hover {
		background: var(--visited-link);
	}
	&:visited {
		background: var(--visited-link);
	}

}

.cw-page {
    display: grid;
    gap: 40px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
        "on-air better"
        "curious started";
}

.cw-page__on-air {
    grid-area: on-air;
}
.cw-page__better {
    grid-area: better;
}
.cw-page__curious {
    grid-area: curious;
}
.cw-page__started {
    grid-area: started;
}

.navigation {
  a {
    background: none;
    &:hover {
      background: none;
    }
    &:visited {
      background: none;
    }
  }
  border-bottom: 1px solid var(--bright-highlight);
  ul {
    display: flex;
    justify-content: space-evenly;
  }
  li {
    list-style-type: none;
    margin: 0.2em;
  }
}


/* Tables */
.cwts {
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid black;
  th, td {
    padding: 10px;
  }
}
.cwts__month {
  text-align: right;
}


/* a:not([class]) { */
/*   	text-decoration-skip-ink: auto; */
/* 	text-decoration: none; */
/* 	color: currentColor; */
/* 	background: var(--link); */
/* 	&:hover { */
/* 		background: var(--visited-link); */
/* 	} */
/* 	&:visited { */
/* 		background: var(--visited-link); */
/* 	} */

/* } */