styles.css

body {
  background:#ffffff;
  width:80%;
  padding-top:10%;
  padding-left:10%;
  padding-right:10%;
}
h1,h2,h3,h4,h5,text,li,ul,font,p, a{
  color:#000000;
  font-family: Arial, Helvetica, sans-serif;
}
a:link {
  color: 000000;
}

/* visited link */
a:visited {
  color: 333333;
}
input[type='checkbox'] { display: none; }
.wrap-collabsible { margin: 1.2rem 0; }
.lbl-toggle { display: block; font-family: Arial, Helvetica, sans-serif; font-size: 1.2rem; text-align: center; padding: 1rem; color: #000; background: #f2f2f2; cursor: pointer; border-radius: 7px; transition: all 0.25s ease-out; }
.lbl-toggle::before { content: ' '; display: inline-block; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid currentColor; vertical-align: middle; margin-right: .7rem; transform: translateY(-2px); transition: transform .2s ease-out; }
.toggle:checked+.lbl-toggle::before { transform: rotate(90deg) translateX(-3px); }
.collapsible-content { max-height: 0px; overflow: hidden; transition: max-height .25s ease-in-out; }
.toggle:checked + .lbl-toggle + .collapsible-content { max-height: 350px; }
.toggle:checked+.lbl-toggle { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
.collapsible-content .content-inner { background: rgba(255, 244, 79, 0.2); border-bottom: 1px solid rgba(255, 244, 79, 0.2); border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; padding: .5rem 1rem; }
.collapsible-content p { margin-bottom: 0; }
.lbl-tip { display: block; font-family: Arial, Helvetica, sans-serif; font-size: 1.2rem; padding: 1rem; color: #000; background: #f2f2f2; border-radius: 7px; }


ol {
  counter-reset: section;                /* Creates a new instance of the
                                            section counter with each ol
                                            element */
  list-style-type: none;
}

ol li::before {
  counter-increment: section;            /* Increments only this instance
                                            of the section counter */
  content: counters(section, ".") " ";   /* Combines the values of all instances
                                            of the section counter, separated
                                            by a period */
}

.cropped-head {
    width: 100%; /* width of container */
    height: 500px; /* height of container */
    overflow: hidden;
}
.cropped-head img {
    margin: -280px 0px 0px 0px;
    width: inherit;
}

.container {
  display: flex;
}

.item {
  flex-basis: 50%;
  margin: 65px;
}
.item img {
  width:100%;
}