:root {
  --stdPadding: 15px;
}

* {
  background-color: white;
}

img {
  display: block;
  width: 90%;
  max-width: 100%;
  height: auto;
  padding: var(--stdPadding);
  margin: auto;
}

body {
  scroll-behavior: smooth;
  font-family: Helvetica, Sans-Serif;
  width: min(1300px,90%);
  margin: auto;
  padding: var(--stdPadding);
}

div {
  width:100%;
}

.header {
  display: grid;
  grid-template-columns:  minmax(300px, 1fr);
  text-align: center;
}

.container {
  display: grid;
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  gap: 1em;
  width: 100%;
}

.container3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(300px, 1fr));
  gap: 1em;
  width: 100%;
}


div.element {
  width: 100%;
}

div.text {
}

h1, h2, h3, h4, p, a {
  margin: 0;
  padding: var(--stdPadding);
}

h1, h2, h3, h4 {
  text-align: center;
}

p {
  text-indent: 24px;
}

ul {
  padding-left: 25px;
  list-style-position: inside;
  list-style-type: none; /* Remove bullets */
}

li {
}

*.nopadding {
  ## padding: 3px var(--stdPadding);
  text-indent: 0;
}

hr {
  border: 0.5px solid black;
}

/* Media query for tablets */
@media screen and (max-width: 1100px) {
  body {
    padding: 10px;
    margin: auto;
    width: min(90%, 800px);
  }

  img {
    display: block;
    width: min(80%,486px);
    height: auto;
    padding: var(--stdPadding);
    margin: auto;
  }

  .container {
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
    padding: 0.5em;
    gap: 0.5em;
  }

  .container3 {
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
    padding: 0.5em;
    gap: 0.5em;
  }

  div.element {
    margin: auto;
  }

  h1, h2, h3, h4 {
    text-align: center;
  }

}

/* Media query for mobile phones */
@media screen and (max-width: 480px) {
  body {
    padding: 5px;
    margin: auto;
  }

  .container {
    padding: 0.25em;
    gap: 0.25em;
  }

  .container3 {
    padding: 0.25em;
    gap: 0.25em;
  }

  div.element {
    margin: 0.25em;
  }

}