* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  line-height: 1.5;
}
body {
  font: ;
}
a {
  color: black;
  text-decoration: none;
}
h2 {
  font-size: 42px;
}
p,
ol,
ul {
  font-size: 24px;
}
.page {
  height: 150vh;
  display: grid;
  grid-template-rows: 50px 50px 1fr 50px;
}
ul {
  text-decoration: none;
}

header {
  text-align: center;
  padding: 1.5%;
}
.nav {
  text-align: center;
}
.nav ol {
  display: inline;
  margin: 2.5%;
}
.main {
  margin: 4%;
  display: grid;
  grid-template-columns: 1fr /*repeat(3, 1fr)*/;
  grid-template-rows: auto 1fr auto /*repeat(3, 1fr)*/;
  grid-template-areas:
    "section1 "
    "section2 "
    " steps  ";
  gap: 4vh;
}

#section1 {
  grid-area: section1;
  /* background-color: aliceblue; */
}

.ar {
  display: flex;
  /* background-color: aliceblue; */
  margin-bottom: 3vh;
  gap: 10px;
}
.ar p {
  width: 50%;
}
.ar div {
  width: 50%;
}
.caption--example p {
  font-size: 18px;
}

.sec1--image img {
  max-width: 100%;
}
#section2 {
  grid-area: section2;
  box-shadow: 10px 10px 5px 12px rgb(228, 232, 234);
  /* background-color: antiquewhite; */
}
.container {
  padding-top: 5vh;
  padding-bottom: 5vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2vh;
}

.display--image {
  width: 50vw;
  height: 55vh;
  border: 1px black solid;
  background-position: center;
  background-size: cover;
}
.caption--text {
  width: 50vw;
}

#steps {
  grid-area: steps;
  /* background-color: aqua; */
}
#steps ol,
.eval ul {
  padding-left: 3vw;
}

.footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "logo nav";
}
.footer-logo {
  grid-area: logo;
  /* background-color: azure; */
}
.footer-nav {
  grid-area: nav;
  font-size: 24px;
  /* background-color: beige; */
}

.logo-r {
  max-width: 100%;
}