html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 300;
  background-color: #d9966e;
  display: flex;
  flex-direction: column;
  
}

/* .roboto-<uniquifier > {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings: "wdth" 100;
} */

h1 {
  text-align: center;
}

.big {
  font-size: 2rem;
}

.bigger {
  font-size: 3rem;
}

.biggest {
  font-size: 4rem;
}

.wrapper {
  /* max-width: 1024px; */
  margin: 0 auto;
  /* font:
      1.2em 'Lato',
      arial,
      sans-serif; */
}

.wrapper > * {
  /* border: 2px solid #f08c00; */
  background-color: #d9966e;
  /* border-radius: 5px; */
  padding:5px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

main a {
  /* color: #7C8D7D;   */
  color: #f0efeb;
  /* color: #B294A0;  */
}

.main-head {
  grid-area: header;
}
.content {
  grid-area: content;
  width: auto;
  
}


.main-nav {
  grid-area: nav;
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.main-nav ul {
  display: none;
}

.main-nav ul.open {
  display: flex;
  flex-direction: column;
}




/* .classNav {
  grid-area: nav;
  display: flex;
  flex-direction: row;
  font-size: 0.8rem;
  list-style-type: none;
   list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
} */





/* .side {
    grid-area: sidebar;
  } */
/* .ad {
    grid-area: ad;
  } */

main h1,
h2 {
  text-align: center;
}

.main-footer {
  grid-area: footer;
  font-size: 0.8rem;
  /* margin:10px; */
  background-color: #b294a0;
  border: 1.5px solid #c2ccd6;
  border-radius: 10px;
  padding-left: 10px;
  flex-shrink: 0;
  margin-top: 10px;
}

.wrapper {
  display: grid;
  /* gap: 20px; */
  grid-template-areas:
    "header"
    "nav"
    "content"
    /* "sidebar"
      "ad" */
    "footer";
}

a {
  color: maroon;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}

/* header rules */

figure {
  /* float: center; */
  width: 35%;
  height:auto;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: 1.5px solid #c2ccd6;
  border-radius: 10px;
  margin: 0.5em;
  padding: 0.5em;
  float: right;
}

.myPicture img {
  width: 100%;
 /* max-height: 220px;  */
  height: max(220px, 100%);
}

figcaption {
  font-size: min(2vw, 100%);
  -float: center;
}

header h1,
header h2 {
  margin: 0;
  color: #f0efeb;
  font-weight: 300;
  font-weight: bold;
}

header h1 {
  padding: 0.5rem 0 0 0;
  font-size: 1.75rem;
  text-align: center;
}
header h2 {
  padding: 0.2rem 0 0 0;
  font-size: 1.5rem;
  text-align: center;
}

.whoamI {
  /* font-family:'Lato', Georgia, Times, serif; */
  border: 1.5px solid #c2ccd6;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: bold;
  line-height: 0.8rem;
  /* min-width: 100px;
  max-width: 250px; */
  /* min-width:225px; */
   max-width:220px;
  margin-left: 5px;
  padding: 25px 10px;
  background-color: #7c8d7d;
}

.whoamI p{
    padding:3px 0;
    margin:0;
}

.officeHours {
  border: 1.5px solid #c2ccd6;
  border-radius: 10px;
  /* padding-left: 10px;
  padding-bottom: 25px; */
  padding: 20px 10px;
  margin-left: 5px;
  /* margin-bottom:10px;  */
  /* width:25%; */
  /* height:auto; */
  /* min-width:225px; */
   max-width:220px;
  /* line-height: 1rem;*/
  font-size: 0.7rem;
  font-weight: bold;
 line-height: 0.8rem;
  background-color: #7c8d7d;
}

.officeHours p{
    padding:3px 0;
    margin:0;
}

.officeHours td {
  font-weight: 500;
}

.strong {
  font-weight: bold;
}

/* nav rules */

button#hamburgerBtn {
  background: none;
  border: none;
  color: #f0efeb;
  font-size: 2.4rem;
  cursor: pointer;
}

button#classBtn {
  background: none;
  border: none;
  color: #f0efeb;
  font-size: 2.4rem;
  cursor: pointer;
}

button#hamburgerBtn {
  display: flex;
}

button#classBtn {
  display: flex;
}

/* nav{
    background-color: #23cfa7;
  } */

/* nav ul{
    margin:0;
    padding:0;
  } */

nav li {
  list-style-type: none;
  width: 100%;
}

nav a {
  display: block;
  padding: 0.8rem 0;
  color: #f0efeb;
  text-align: center;
  text-decoration: none;
}

nav li.active {
  background-color: rgba(0, 0, 0, 0.5);
}

nav a:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

#classNav { 
  /* display: none; */
   list-style-type: none;
  /* list-style: none;*/
} 

.classNav ul.open {
  display: flex;
  flex-direction: column;
}

.classNav ul {
  display: none;
}


/* .classNav ul.open { 
  display: block;
} */

nav ul {
  display: none;
}

.classNav li {
  list-style-type: none;
  width: 100%;
}

.classNav {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.classNav a {
  display: block;
  padding: 0.8rem 0;
  color: #f0efeb;
  text-align: center;
  text-decoration: none;
}

.classNav li.active {
  background-color: rgba(0, 0, 0, 0.5);
}

.classNav a:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

.classNav ul.open {
  display: block;
}

.classNav ul {
  display: none;
}

/* content rules */

.content h1 {
  padding: 0.5rem 0 0 0;
  font-size: 2rem;
  text-align: center;
}

.content h2 {
  padding: 0.2rem 0 0 0;
  font-size: 1.5rem;
  text-align: center;
}

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

.lect-sched {
  /* height: 8em; */
  display: grid;
  place-items: left;
  font-size: 0.8rem;
  grid-template-columns: 1fr 1fr;
}

.lect-sched dt {
  font-weight: bold;
  grid-column: 1;
  font-size: 0.8rem;
}

.lect-sched dd {
  grid-column: 2;
  font-size: 0.8rem;
}

.lect-sched h1 {
  text-align: center;
  font-size: 0.8rem;

  /* width:auto; */
}

hr {
  color: silver;
  width: 100%;
}

.responsive {
  width: 100%;
  height: auto;
}

.desc-list dt {
  font-weight: bold;
}

/* navigation rules */

/* li{
 line-height: 1.5rem;
   padding:0.2rem;
  margin:0.1rem;
} */

h3,
h4 {
  text-align: left;
  /*  padding-top:1rem;*/
}

mark {
  background-color: #7c8d7d;
  color: #f0efeb;
}

.classHeading h1 {
  text-align: center;
}

.classHeading p {
  margin: 10px;
}

h1.semester {
  font-size: 1.15em;
  text-align: center;
  font-weight: normal;
}

h1.course {
  font-size: 1.75em;
  font-weight: bold;
  text-align: center;
}

h1.place {
  font-size: 1.15em;
  font-weight: bold;
  text-align: center;
}

.Sandie h1,
h2 {
  text-align: center;
}

.Sandie .container {
  margin: 0 auto;
}

.philosophy h1,
h2 {
  text-align: center;
}

.Sandie {
  margin: 0 10px;
  max-width: 1500px;
}

.tenCommandments h1 {
  font-size: 2rem;
}

.tenCommandments h2 {
  text-align: center;
}

.tenCommandments p {
  font-size: 1.4rem;
  padding-bottom: 20px;
 text-align: center;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: white;
}

/* .brand-title {
  font-size: 1.5rem;
  margin: 0.5rem;
} */

.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
}

.navbar-links li {
  list-style: none;
}

.navbar-links li a {
  text-decoration: none;
  color: #f0efeb;
  padding: 1rem;
  display: block;
}

.navbar-links li:hover {
  background-color: #555;
}

.class-navbar {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: flex-start;
  background-color: #333;
  color: white;
  
  /* width:100%; */
  /* height:100%;   */
}

.class-navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style-type: none;
}

.class-navbar-links {
  display: none;
  /* width:100%; */
}

.navbar-links.active {
  display: flex;
  /* height:auto; */
}

.class-navbar-links.active {
  display: flex;
  /* height:auto; */
}



.class-navbar-links li{
  list-style:none; 
  text-align: center;
   list-style-type: none;
}

.class-navbar-links li a {
  text-decoration: none;
  color: #f0efeb;
  padding: 0.5rem 1rem;
  display: block;
}

.class-navbar-links ul {
  width: 100%;
  flex-direction: column;
}

.class-navbar-links li:hover {
  background-color: #555;
}

.classNavbar-links ul {
  margin: 0;
  padding: 0;
  display: flex;
}

.classNavbar-links li {
  list-style: none;
}

.classNavbar-links li a {
  text-decoration: none;
  color: #f0efeb;
  padding: 1rem;
  display: block;
}

.classNavbar-links li:hover {
  background-color: #555;
}

.toggle-button {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 31px;
  height: 21px;
}

.toggle-button .bar {
  height: 3px;
  width: 100%;
  background-color: #f0efeb;
  border-radius: 10px;
}

.class-toggle-button {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 31px;
  height: 21px;
}

.class-toggle-button .bar {
  height: 3px;
  width: 100%;
  background-color: #f0efeb;
  border-radius: 10px;
}

.justify-container {
  max-width: 1100px; /* Set a maximum width */
  margin: 0 auto; /* Center horizontally */
  text-align: justify;
  text-justify: auto;
  padding-right: min(20px, 5%);
  padding-left: min(20px, 5%);
}

/* .flex-container {
  display: flex;
 

}

.flex-container > div {
  margin: 10px;
  padding: 20px;
  font-size: 30px;
  text-align: justify;
} */

/* maybe this works - - - maybe this doesn't */

html,
body {
  height: 100%;
}

.tall {
  height: 95%;
}

.content {
  flex: 1 0 auto;
  -vertical-align: top; /* I took this out */
  -padding-left: 10px;
}

.footnote {
  -font-size: 0.1 rem;
  margin: 10px;
  padding-bottom: 10px;
}

.red {
  color: red;
}

ol li {
  padding-bottom: 1rem;
}

/*  This is the new button stuff */

.mobile-container {
  max-width: 480px;
  margin: auto;
  background-color: #555;
  height: 500px;
  color: white;
  border-radius: 10px;
}

.topnav {
  overflow: hidden;
  /* background-color: #333; */
  position: relative;
}

.topnav #myLinks {
  display: none;
}

.topnav a {
  float: left;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: none;
}

.topnav a.icon {
  float: right;
}

.topnav a:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

/* .active {
  /* background-color: #04AA6D; \
  color: white;
} */