body {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  margin: 0;
  padding: 0;
  background-color: #dad5cf;
  color: #2f1a01;
}

body.home-page {
  font-weight: 100;
}

body.home-page h1 {
  font-size: 48px;
  font-weight: 100;
  margin: 60px 0 40px 60px;
  padding-left: 60px;
}

.week-stripes {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.week {
  display: block;
  text-decoration: none;
  color: #2f1a01;
  font-size: 1.2rem;
  line-height: 1;
  padding: 10px 0;
  padding-left: 60px;
  border-top-right-radius: 25px;
  margin: 0;
  transition: filter 0.2s ease;
}

.week:hover {
  filter: brightness(0.9);
}

.week1 { width: 400px; background-color: #ffff00; }
.week2 { width: 450px; background-color: #ffdd00; }
.week3 { width: 500px; background-color: #ffbb00; }
.week4 { width: 550px; background-color: #ff9900; }
.week5 { width: 600px; background-color: #ff7700; }
.week6 { width: 650px; background-color: #ff5500; }
.week7 { width: 700px; background-color: #ff3300; }
.week8 { width: 750px; background-color: #ff2200; }
.week9 { width: 800px; background-color: #ff1100; }
.week10 { width: 850px; background-color: #ff0000; }

.brown-bar {
  background-color: #2f1a01;
  width: 100%;
  min-height: 100px;
}

body.week-page {
  max-width: 900px;
  margin: 60px auto;
  padding: 0 20px;
  background-color: #dad5cf;
  color: #2f1a01;
  font-weight: 400;
}

body.week-page h1 {
  font-size: 48px;
  font-weight: 700;
  text-align: center;
  margin: 60px 0 40px;
}

body.week-page p {
  margin-bottom: 20px;
  line-height: 1.6;
}

body.week-page a {
  color: #2f1a01;
  text-decoration: underline;
}

body.week-page a:hover {
  color: #ff5500;
}

body.week-page .week-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 60px;
  justify-items: center;
  margin-top: 40px;
}

body.week-page .week-images img {
  max-width: 300px;
  width: 100%;
  height: auto;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

body.week-page .week-images img:hover {
  transform: scale(2.3);
}

body.cardbloom-page {
  background-color: #ffffff;
  color: #2f1a01;
  font-weight: 400;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

.cardbloom-top img {
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin-bottom: 40px;
}

.cardbloom-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  justify-items: center;
}

.cardbloom-grid img {
  width: 100%;
  max-width: 350px;
  transition: transform 0.3s ease;
}

.cardbloom-grid img:hover {
  transform: scale(1.2);
}

.cardbloom-button {
  display: inline-block;
  padding: 15px 40px;
  background-color: #ff7700;
  color: #ffffff;
  text-decoration: none;
  border-radius: 8px;
  font-size: 1.2rem;
  transition: background-color 0.3s ease;
}

.cardbloom-button:hover {
  background-color: #ff9900;
}

.cardbloom-top {
  text-align: center;
  margin-bottom: 20px;
}

.cardbloom-text {
  max-width: 800px;
  margin: 10px auto 100px;
  line-height: 1.6;
  text-align: center;
}

body.week4-page {
  background-color: #2b2b2b;
  color: #b19cd9;
  font-weight: 400;
  text-align: center;
  margin: 0;
  padding: 40px 20px;
}

body.week4-page h1 {
  font-size: 64px;
  font-weight: 900;
  margin: 0 0 40px;
}

body.week4-page .week4-main-image img {
  max-width: 1000px;
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 40px;
}

body.week4-page p {
  font-size: 18px;
  line-height: 1.6;
  margin: 40px auto;
  max-width: 800px;
}

body.week4-page .week4-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  justify-items: center;
  margin: 60px auto;
  max-width: 900px;
}

body.week4-page .week4-grid img {
  max-width: 400px;
  width: 100%;
  height: auto;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

body.week4-page .week4-grid img:hover {
  transform: scale(1.1);
}

body.week5-page {
  max-width: 900px;
  margin: 60px auto;
  padding: 0 20px;
  background-color: #ffffff;
  color: #2f1a01;
  font-weight: 400;
}

.week5-main-image img {
  width: 80%;
  max-width: 800px;
  height: auto;
  display: block;
  margin: 0 auto 40px;
  border-radius: 10px;
}

h2 {
  font-size: 32px;
  text-align: center;
  margin-top: 40px;
  margin-bottom: 20px;
}

p {
  max-width: 800px;
  margin: 0 auto 20px;
  line-height: 1.6;
  text-align: center;
}

.week5-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  justify-items: center;
  margin-bottom: 20px;
}

.week5-grid img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

.week5-grid img:hover {
  transform: scale(1.1);
}

@media (max-width: 700px) {
  .week5-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .week5-grid img {
    width: 80%;
    height: auto;
  }
}

body.week6-page {
  max-width: 900px;
  margin: 60px auto;
  padding: 0 20px;
  background-color: #ffffff;
  color: #2f1a01;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}

.week6-main-image img {
  width: 80%;
  max-width: 800px;
  height: auto;
  display: block;
  margin: 0 auto 40px;
}

.week6-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  justify-items: center;
  margin-bottom: 40px;
}

.week6-grid img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.week6-grid img:hover {
  transform: scale(1.1);
}

h1,
h2 {
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
}

h2 {
  font-size: 32px;
  margin: 40px 0 20px;
}

p,
pre {
  max-width: 800px;
  margin-bottom: 20px;
  line-height: 1.6;
  text-align: left;
  font-family: "Courier New", Courier, monospace;
  font-weight: 400;
}

@media (max-width: 700px) {
  .week6-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .week6-grid img {
    width: 80%;
    height: auto;
  }
}

body.week7-page {
  max-width: 900px;
  margin: 60px auto;
  padding: 0 20px;
  background-color: #ffffff;
  color: #2f1a01;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}

.week7-video {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

.week7-video video {
  max-width: 600px;
  width: 60%;
  height: auto;
  border: none;
  outline: none;
}


h1,
h2 {
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
}

h2 {
  font-size: 32px;
  margin: 40px 0 20px;
}

p {
  max-width: 800px;
  margin-bottom: 20px;
  line-height: 1.6;
  text-align: left;
  font-family: "Courier New", Courier, monospace;
  font-weight: 400;
}

.week7-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  justify-items: center;
  margin: 40px 0;
}

.week7-grid img {
  width: 100%;
  max-width: 400px;
  height: auto;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.week7-grid img:hover {
  transform: scale(1.05);
}

@media (max-width: 700px) {
  .week7-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .week7-grid img {
    width: 80%;
  }
}

body.week8-page {
  max-width: 900px;
  margin: 60px auto;
  padding: 0 20px;
  background-color: #ffffff;
  color: #2f1a01;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}

.week8-main-images {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  margin-bottom: 40px;
}

.week8-main-images img {
  width: 80%;
  max-width: 800px;
  height: auto;
  object-fit: cover;
}

h1,
h2 {
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
}

h2 {
  font-size: 32px;
  margin: 40px 0 20px;
}

p {
  max-width: 800px;
  margin-bottom: 20px;
  line-height: 1.6;
  text-align: left;
  font-family: "Courier New", Courier, monospace;
  font-weight: 400;
}

.week8-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  justify-items: center;
  margin: 40px 0;
}

.week8-grid img {
  width: 100%;
  max-width: 300px;
  height: auto;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.week8-grid img:hover {
  transform: scale(1.05);
}

@media (max-width: 700px) {
  .week8-main-images img {
    width: 90%;
  }

  .week8-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .week8-grid img {
    width: 80%;
  }
}

body.week9-page {
  max-width: 900px;
  margin: 60px auto;
  padding: 0 20px;
  background-color: #ffffff;
  color: #2f1a01;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}

.week9-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  justify-items: center;
  margin-bottom: 40px;
}

.week9-grid img {
  width: 100%;
  max-width: 300px;
  height: auto;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.week9-grid img:hover {
  transform: scale(1.05);
}

p {
  max-width: 800px;
  margin-bottom: 20px;
  line-height: 1.6;
  text-align: left;
  font-family: "Courier New", Courier, monospace;
  font-weight: 400;
}

@media (max-width: 700px) {
  .week9-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .week9-grid img {
    width: 80%;
  }
}

.week9-pdf {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.week9-pdf iframe {
  width: 90%;
  max-width: 800px;
  height: 900px;
  border: none;
}