html {
  font-size: 62.5%;
  /* 1rem = 10px; 10px/16px = 62.5% */
}

body {
  /* font-size: clamp(0.4rem, 0.4rem + 2vw, 1.2rem);  font changes with viewport */
  margin:0;
  font-size: 1.3rem;   /* 13px */
  line-height: 1.7;
  font-weight: 400;
  font-family: 'IBM Plex Mono', monospace;
  color: #222;
}

.wrapper {
  margin-inline: auto;
  padding-inline: 5%;
  padding-top: 0rem;
  /* 2rem */
  max-width: 100rem; /* 750px */
  /*max-width: 117rem; /* 1170px   to big?*/
}

.gridwrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  place-self: center;
  align-items: center;
  background-color:white;
  column-gap: 20px;
  row-gap: 20px;
}

.gridwrapper2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  place-self: center;
  align-items: center;
  background-color:white;
  column-gap: 20px;
  row-gap: 20px;
}

.vert {
grid-column: span 2;
}

.horiz {
grid-column: span 3;
}

h1 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 400;
  font-size: 2rem;
  font-size: clamp(1rem, 1rem + 2vw, 2rem);
  /* font changes with viewport */
  line-height: 1.2;
  letter-spacing: -.1rem;
}

p {
  max-width: 50rem;
  padding: 0px;
  margin-bottom: 2rem;
}

.header {
  padding-left: 0px;
  text-decoration: none;
  margin-bottom: 2rem;
}

.coverimg {
  max-width: 35rem;
  height: auto;
  max-height: 100%;
  padding-bottom: 0rem;
}

img {
  max-width: 100%;
  height: auto;
  max-height: 100%;
  padding-bottom: 3rem;
}

.photo {
  max-width: 100%;
  height: auto;
  max-height: 100%;
  padding-bottom: 30rem;
}

a:link {
  color: black;
}

a:visited {
  color: black;
}

ul{
  padding-left:12px;
  line-height: 1.7;
}

li{
max-width:50rem;
}

b,
strong {
  font-weight: 500;
}

.main-content {
  display: flex;
  flex-wrap: wrap; /* Allows stacking on mobile */
  gap: 40px;      /* Space between columns */
  margin-top: 20px;
}

.left-col, .right-col {
  flex: 1;         /* Makes columns equal width */
  min-width: 280px; /* Forces stack if screen is too narrow */
}

.footer {
  clear: both;
  margin-top: 40px;
  padding-bottom: 40px;
}