/*
	CSS for my course pages once I switched to bootstrap.
	14 December 2021
*/

body {
	padding-top: 4.5rem;
}

h2 {
  scroll-margin-top: 4.5rem;
}

ul ul {
    padding-bottom: .5rem;
}

/*
a {
}

a:visited {
}
*/

a:hover {
    /*background-color: #eee;*/
    color: #dd4400; /* dark orange */
    text-decoration: none;
    cursor: pointer;
}

.code {
	font-family: monospace;
    color: #666;
}

div.code {
	white-space: pre;
	line-height: 1.2rem;
	margin: 0.5rem 0;
	padding: 0.5rem 0 0.3rem 1.0rem;
	font-size: 100%;
	overflow: auto;
    color: white;
    background-color: #444;
}

div.code code {
    color: yellow;
}

span.code {
	margin: 1rem 0;
}

div.shaded {
    background-color: #eee;
}

.assignment {
	color: #1E8449;
    /* font-weight: bold; */
}

.lab {
	color: #D35400;
    /* font-weight: bold; */
}

.red {
	color: red;
}

.deleted {
    text-decoration: line-through;
}

main h1 {
	background: lightgray;
	font-size: 160%;
	text-transform: uppercase;
}

main h2 {
	font-size: 130%;
	text-transform: uppercase;
}

main h3 {
	font-size: 120%;
}

.day {
    margin-top: 2px;
}

.day h1 {
    padding-left: 0.5em;
	background: lightgray;
	font-size: 100%;
	text-transform: uppercase;
}

li {
    margin-bottom: 6px;
}

.sub {
  font-size: 65%;
  vertical-align: sub;
}

.sup {
  font-size: 65%;
  vertical-align: super;
}


img {
  display: block;
  width: 80%;
  margin: 0 auto;
}

img.small {
  width: 40%;
}

img.vsmall {
  width: 25%;
}

img.vvsmall {
  width: 15%;
}

div.images {
  width: 80%;
  margin: 0 auto;
}

div.images img {
  display: inline;
}

@media screen and (max-width: 768px) {
    .day {
        width: 100%;
    }

	.narrow {
		max-width: 90%;
		margin-left: auto;
		margin-right: auto;
	}

  	.medium {
		max-width: 90%;
		margin-left: auto;
		margin-right: auto;
	}

  	.wide {
		max-width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
}

@media screen and (min-width: 769px) {
    .day {
        width: 92%;
    }

	.narrow {
		max-width: 30%;
		margin-left: auto;
		margin-right: auto;
	}

  	.medium {
		max-width: 50%;
		margin-left: auto;
		margin-right: auto;
	}

  	.wide {
		max-width: 75%;
		margin-left: auto;
		margin-right: auto;
	}
}