@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap');
  
  * {
    box-sizing: border-box;
  }
  body {
    margin: 0;
  }
  h1 {
    line-height: 46px;
  }
  h2 {
    line-height: 34px;
  }
  @media print {
  p, div, img, h2, h3, li {
      break-inside: avoid;
    }
 
    .pdf-link {
      display: none;
    }
    p, li {
      orphans: 3;
      widows: 3;
  }
  }
  a {
    font-weight: 700;
  }
  img{
    display: block;
    margin:0px auto 0px auto;
    max-width: 450px;
    max-height: 450px;
  }

  .lesson-plan-page{
    background-image:url(./images/splat-dotted.svg);
      background-size: 80%;
      background-position: 200% -200px;
      background-repeat: no-repeat;
  
    font-family:Roboto;
    font-size:13pt;
    line-height:17pt;
    width:8.5in;
    max-width:8.5in;
    min-width:8.5in;
    padding-top:40px;
    padding-right:40px;
    padding-bottom:40px;
    padding-left:40px;
    margin-right:auto;
    margin-bottom:0px;
    margin-left:auto;

    box-shadow:rgba(0, 0, 0, 0.25) 0px 3px 10px 0px;
    font-weight:400;
  }
  .topic-section{
    width: 460px;
    height: 360px;
    background: url(./images/crash-with-card.png);
    background-size: 500px;
    padding-top: 20px;
    padding-right: 40px;
    padding-bottom: 20px;
    padding-left: 40px;
    font-size: 24px;
    font-weight: 900;
    color:rgb(255, 255, 255);
    display:inline-block;
    margin-left:-40px;
    margin-bottom:10px;
    float: left;
  }
  .topic-section .body-text {
    width: 270px;
    text-align: center;
    margin: 0px 0px 0px -40px;
  }
  .dashed-line-box{
    border-top-width:4px;
    border-top-style:dashed;
    border-top-color:rgb(0, 174, 239);
    border-right-width:4px;
    border-right-style:dashed;
    border-right-color:rgb(0, 174, 239);
    display:inline-block;
    position:relative;
    width:50%;
    height:70px;
    top:40px;
    left:-40px;
    margin-bottom: -20px;
  }
  .title-image {
    width: 400px;
    float: left;
  }
  .summary-section{
    font-weight:700;
    font-size:24px;
    line-height:34px;
    margin-top:10px;
    margin-right:0px;
    margin-bottom:10px;
    margin-left:0px;
  }
  .body-text{
    margin-top:10px;
    margin-right:0px;
    margin-bottom:10px;
    margin-left:0px;
  }
  h1{
    clear:both;
    font-size:40px;
    font-weight:900;
    padding: 20px 0px 10px 0px;
    color:rgb(21, 0, 169);
  }
  h2{
    clear:both;
    font-size:30px;
    font-weight:900;
    padding: 10px 0px 5px 0px;
    color:rgb(21, 0, 169);
  }
  td {
    width:50%;
    max-width: 50%;
    padding: 20px;
  }
  .resource-link{
    display:inline-block;
    border-top-width:2px;
    border-right-width:2px;
    border-bottom-width:2px;
    border-left-width:2px;
    border-top-style:dashed;
    border-right-style:dashed;
    border-bottom-style:dashed;
    border-left-style:dashed;
    border-top-color:rgb(0, 174, 239);
    border-right-color:rgb(0, 174, 239);
    border-bottom-color:rgb(0, 174, 239);
    border-left-color:rgb(0, 174, 239);
    border-image-source:initial;
    border-image-slice:initial;
    border-image-width:initial;
    border-image-outset:initial;
    border-image-repeat:initial;
    background-color:rgba(0, 174, 239, 0.2);
    padding-top:10px;
    padding-right:20px;
    padding-bottom:10px;
    padding-left:20px;
    margin-right:20px;
    font-size:18px;
  }
  hr{
    clear:both;
    margin-top:20px;
    margin-right:0px;
    margin-bottom:20px;
    margin-left:0px;
    border-top-width:2px;
    border-top-style:dashed;
    border-top-color:rgb(0, 174, 239);
  }
ol{
    margin-inline-start:10px;
    list-style-position:initial;
    list-style-image:initial;
    list-style-type:none;
    counter-reset:primary-counter 0;
  }
ol > li{
    margin-block-start:20px;
    list-style-position:initial;
    list-style-image:initial;
    list-style-type:none;
    counter-increment:primary-counter 1;
  }
  li{
    margin-bottom:10px;
    margin-top:10px;
    margin-left:20px;
  }
ol > li::before{
    display: block;
    margin-bottom: -35px;
    margin-top: -5px;
    content:counter(primary-counter) ":";
    font-size:32px;
    font-weight:900;
    margin-left:-78px;
    padding-top:12px;
    padding-right:20px;
    padding-bottom:12px;
    padding-left:20px;
    width:50px;
    margin-right:10px;
    color:rgb(14, 101, 229);
  }
  
  .page-break{
    break-after: page;
  }
  .metadata-section {
    padding: 10px;
    width: 300px;
   float: right;
    border-top-width:2px;
    border-right-width:2px;
    border-bottom-width:2px;
    border-left-width:2px;
    border-top-color:rgb(0, 174, 239);
    border-right-color:rgb(0, 174, 239);
    border-bottom-color:rgb(0, 174, 239);
    border-left-color:rgb(0, 174, 239);
    border-image-source:initial;
    border-image-slice:initial;
    border-image-width:initial;
    border-image-outset:initial;
    border-image-repeat:initial;
    color: #ffffff;
    background-color:rgba(0, 174, 239, 1.0);
    font-size:18px;
    margin-bottom:20px;
  }
  .section-break {
    clear:both;
  }
  #metadata, #summary, #summary2, #topic, #cover, #materials, #resources {
    display: none;
  }
  .lesson-table td {
    border: .5px solid #333333;
  }
  .score-sheet td {
    padding: 5px 10px 5px 10px;
    border: .5px solid #333333;
  }
  .cover-image img {
    height: 150px;
    margin: -20px 0px 20px 0px;
    float: left;
    border-radius: 12px;
  }
  .materials-section, .resources-section {
    padding: 10px;
    width: 49%;
    border-top-width:2px;
    border-right-width:2px;
    border-bottom-width:2px;
    border-left-width:2px;
    border-top-style:dashed;
    border-right-style:dashed;
    border-bottom-style:dashed;
    border-left-style:dashed;
    border-top-color:rgb(0, 174, 239);
    border-right-color:rgb(0, 174, 239);
    border-bottom-color:rgb(0, 174, 239);
    border-left-color:rgb(0, 174, 239);
    background-color:rgba(0, 174, 239, 0.2);
    font-size:18px;
    margin-bottom: 30px;
    margin-top: 20px;
  }
  .materials-section {
    float: left;
  }
  .resources-section {
    float: right;
  }
  .resources-section::before {
    content: "Resources";
    font-size: 22px; 
    font-weight: 700;
    color:rgb(21, 0, 169);
  }
  .materials-section::before {
    content: "Materials";
    font-size: 22px; 
    font-weight: 700;
    color:rgb(21, 0, 169);
  }
  .pdf-link {
      display: block;
      width: 100%;
      text-align: center;
      padding: 10px 20px;
      background-color: #e7198b;
      color: #ffffff;
      text-decoration: none;
      font-weight: 900;
      border-radius: 12px;
  }
  .load-code {
    display: none;
  }