@font-face {
  font-family: Garamond;
  src: url(fonts/EBGaramond-VariableFont_wght.ttf);
  font-weight: normal;
}

@font-face {
  font-family: Abril;
  src: url(fonts/AbrilFatface-Regular.ttf);
  font-weight: normal;
}

body {
  font-family: Garamond;
  line-height: 1.3;

  color: black;

  display: flex;
  flex-direction: column;
  /* justify-items: center; */
  justify-content: space-between;

  height: 100dvh;

  font-size: 13pt;
}

.header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  line-height: 1;
}

.oriolus-text-logo {
  font-family: Abril;
  font-size: 72pt;
}

h1 {
  font-size: 16pt;
  font-weight: 800;
  font-family: sans-serif;
}

h2 {
  font-size: 16pt;
  font-weight: 800;
  margin-top: 5px;
  margin-bottom: 10px;
}

p {
  margin-top: 5px;
  margin-bottom: 10px;

  /* text-align: justify; */
  text-justify: inter-word;
}

p,
h1,
h2,
h3,
table {
  margin-left: 20px;
  margin-right: 20px;
}

th,
td {
  padding: 3px;
}

.textmain {
  /* flex-grow: 1; */

  margin: auto;
  max-width: 1024px;
  margin-top: 20px;
  margin-bottom: 30px;
}

.textmain > p {
  padding-top: 10px;
  padding-bottom: 10px;
}

.socmediacontainer {
  display: flex;
  /* flex-wrap: wrap; */
  gap: 5px;

  justify-content: center;

  margin: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

.socmediaicon {
  width: 40px;
}

.legal {
  font-size: 12pt;
  line-height: 1;
  /* color: #2e2e2e; */
  padding-bottom: 10px;

  margin-left: auto;
  margin-right: auto;
  max-width: 1024px;

  text-align: center;
}

.legal > p {
  padding-bottom: 0px;
  margin-top: 10px;
  margin-bottom: 10px;

  text-align: center;
}

.textimage {
  max-width: min(1024px, 100%);
  margin: auto;
  display: block;
}

.image-text {
  display: flex;
  justify-content: center;
}

.image-text > div.image img {
  max-width: 380px;
}
.image-text > div.text {
  max-width: min(380px, 100%);
}

.image-text > div.image img,
.image-text > div.text {
  /* text-align: justify; */
  padding: 10px;
}

.socmedia-text {
  margin: auto;
  padding: 20px;

  font-size: 15pt;
  font-weight: bold;

  text-align: center;
}

@media (min-width: 1200px) {
  .image-text > div.image img {
    max-width: 500px;
  }
  .image-text > div.text {
    max-width: min(500px, 100%);
  }

  body {
    font-size: 16pt;
  }
  .socmedia-text {
    font-size: 17pt;
  }
}

@media (max-width: 850px) {
  .image-text {
    flex-wrap: wrap;
  }
  .image-text > div.image img,
  .image-text > div.text {
    max-width: 90dvw;
    text-align: justify;
    font-size: 15pt;
  }
}

@media (max-width: 600px) {
  .oriolus-text-logo {
    font-size: 48pt;
  }

  .socmedia-text {
    font-size: 13pt;
  }
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}