body{
  font-family: Futura, Helvetica, sans-serif;
  background-color: white;
}

header{
  color: black;
  padding: 0px;
  text-transform: uppercase;
  font-size: 2em;
  border-bottom: 4px solid black;
}

h1{
  font-size: 2em;
}

h2{
  border-bottom: 1px dotted magenta;
}

section{
  border-bottom: 12px solid black;
  padding: 2px;
  margin: 2px 2px 20px 2px;
  border-radius: 10px;
  box-shadow: 4px 4px 18px rgba(0, 0, 0, 0.8);
}

/* Apply gray background to every even nth child */
section:nth-child(odd) {
  background-color: rgb(230, 229, 229);
}


.homework{
  background-color: yellow;
  border-radius: 40px;
  box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.8);
  padding: 5px;
  margin: 5px;
  border: 2px black solid;
  max-width: 800px;
}

.announcement{
  background: 
  linear-gradient(217deg, rgba(255,255,0,.8), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(255, 0, 195, 0.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(3, 255, 251, 0.8), rgba(0,0,255,0) 70.71%);
}
.book {
  max-width: 150px;
}
.content-img {
  width: 80vw;
}

.class-photos {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  border-radius: 10px;
}

.img-block {
  max-width: 400px;
  padding: 20px;
  margin: 10px;
  border-radius: 5px;
  border-color: black;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  background-color: white;
}

.img-block > img{
  max-width: 100%;
  border-radius: 5px;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.8);
}

.img-block > p{
  font-style: italic;
}

.class-date {
  color: black;
  padding: 2px 5px 0 5px;
  margin: 5px 10% 0 5px;
}