style.css

body {
	margin: 0;
	padding: 0;
	background: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #787878;
}

h1,
h2,
h3 {
	margin: 0;
	padding: 0;
	font-weight: normal;
	color: #3E3530;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 2.8em;
}

h3 {
	font-size: 1.6em;
	text-decoration: underline;
}

section,
p,
ul,
ol {
	margin-top: 0;
	line-height: 180%;
}

a {
	text-decoration: none;
	color: #339CCB;
}

.site-container {
	display: grid;
	align-items: end;
	grid-template-rows: 1fr auto 1fr;
	grid-template-areas:
		"header"
		"main"
		"footer";
}

@media screen and (min-width: 900px) {
	.site-container {
		grid-template-columns: max(8%,4em) auto 8%;
		grid-template-rows: 70px auto 40px;
		grid-template-areas:
			"header header header"
			". main ."
			"footer footer footer";
	}
}


/* header */

.header {
	background: #1582AB;
	border-bottom: 10px solid #2AA1CC;
	color: #FFFFFF;
	align-items: end;
	grid-area: header;
	display: grid;
	justify-items: center;
	grid-template-areas:
		"logo logo"
		"home math"
		"teach notes"
		"acti link";
}


@media screen and (min-width: 320px) {
	.header {
		grid-area: header;
		justify-items: center;
		grid-template-areas:
			"logo logo logo"
			"home math teach"
			"notes acti link";
	}
}

@media screen and (min-width: 550px) {
	.header {
		height: max-content;
		grid-area: header;
		justify-items: center;
		grid-template-areas:
			"logo home math teach"
			"logo notes acti link";
	}
}

@media screen and (min-width: 930px) {
	.header {
		grid-area: header;
		grid-template-columns: minmax(0,4em) 300px repeat(6, 105px) auto;
		grid-template-areas:
			". logo home math teach notes acti link .";
	}
}

#logo {
	/*display: inline-block;*/
	height: min-content;
	border: none;
	background: none;
	text-decoration: none;
	text-align: center;
	font-size: 3.8em;
	color: #FFFFFF;
	grid-area: logo
}

#home {
	grid-area: home;
}

#math {
	grid-area: math;
}

#teach{
	grid-area: teach;
}

#notes{
	grid-area: notes;
}

#acti {
	grid-area: acti;
}

#link {
	grid-area: link
}

.header>a {
	display: inline-block;
	padding: 15px 15px 10px 15px;
	vertical-align: bottom;
	text-decoration: none;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: bold;
	color: #FFFFFF;
	border: none;
}

.header>a:hover,
a.current_page_item {
	background: #2AA1CC;
	text-decoration: none;
}

/* content */
.content {
	padding: 10px 10px 10px 10px;
	grid-area: main;
}

ul.works{
	/* list-style: none; */
	padding-top: .35em;
	padding-left: 1em;
}

ul.works li{
	list-style-type: none;
	position:relative;      /* positioning context for bullet */
}

ul.works li:before{
	content:"\2022";    /* escaped unicode character */
    font-size:1.2em;    /* the default unicode bullet size is very small */
    line-height:0;        /* kills huge line height on resized bullet */
    position:absolute;  /* position bullet relative to list item */
    top:.8em;           /* vertical align bullet position relative to list item */
    left:-.7em;            /* position the bullet L- R relative to list item */
}

ul.works ul{
	padding-left: 0.8em;
}
ul.works ul > li{
	list-style-type:none;
}
ul.works ul > li:before{
	content: "";
}

/* footer */

.footer {
	background: #1582AB;
	border-top: 8px solid #1ca6dd;
	font-family: Arial, Helvetica, sans-serif;
	line-height: normal;
	font-size: 10px;
	color: #FFFFFF;
	text-align: center;
	grid-area: footer;
}

.abt {
	border-spacing: 2ch;
}
.abt th{
	vertical-align: top;
}