@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Urbanist&display=swap');

:root {
  --site-content-max-width: 1230px;

  --font-family-header: 'Urbanist', sans-serif;
  --font-family-main: 'Montserrat', sans-serif;

  --border-radius-main: 0.5rem;

  --padding-tiny: 0.25rem;
  --padding-thin: 0.5rem;
  --padding-medium: 1rem;
  --padding-thick: 2rem;

  --color-red: #db4437;
  --color-yellow: #e8ba00;

}

* {
  box-sizing: border-box;
  position: relative;
  max-width: 100%;
}

html, body {
  width: 100%;
  font-family: var(--font-family-main);
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
/*
  background: linear-gradient(
  165deg, #01944a, #103321, #ff014a);
*/
  background: repeating-linear-gradient(135deg, #004c26, #007a3d, #103321, #b30033, #000000, #004c26 1500px);
}

ol, ul {
  padding-right: var(--padding-thick);
}

li {
  margin-bottom: var(--padding-thin);
}

p {
  margin-top: var(--padding-thin);
}

.page {
  max-width: var(--site-content-max-width);
  width: 90%;
  min-height: calc(100vh - var(--padding-thick));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-color: white;
  border-radius: var(--border-radius-main);
  margin: var(--padding-medium) 0;
  padding: 0 var(--padding-medium);
}

.section-header-wrapper {
  display: grid;
  grid-template: 1fr / 1fr auto 1fr;
  align-items: center;
  margin-top: var(--padding-thin);
  margin-bottom: var(--padding-medium);
  font-family: var(--font-family-header);
}

.section-header-wrapper>.header {
  grid-area: 1 / 2 / span 1 / span 1;
  margin-bottom: 0;
  margin-top: 0;
}

.section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  margin: var(--padding-thin) 0 var(--padding-medium) 0;
}

.header {
  font-weight: bold;
  font-family: var(--font-family-header);
  text-align: center;
  margin-top: var(--padding-thin);
}

.page-header {
  padding-left: 0;
}

.hr {
  width: 100%;
  height: 3px;
  background-color: #ebebeb;
  margin: 0;
  border-radius: 100%;
}

.v-margin-thin {
  margin-top: var(--padding-thin);
  margin-bottom: var(--padding-thin);
}

.img {
  object-fit: cover;
  overflow: hidden;
  padding: 0;
  align-self: center;
  border-radius: var(--border-radius-main);
}

.img-height {
  width: auto;
  height: 300px;
}

.img-square {
  width: 200px;
  height: 200px;
  object-fit: cover !important;
}

.img-fullwidth {
  width: 100%;
  height: auto !important;
  object-fit: cover !important;
}

ul>img, ol>img {
  object-fit: contain !important;
  height: 200px !important;
  display: inherit;
  margin: var(--padding-thin) auto;
}

ol>li::marker {
  font-weight: bold;
  font-size: 1.5rem;
}

li.no-marker {
  list-style-type: none;
}

.li-img-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--padding-thin) 0;
  flex-wrap: wrap;
}

.li-img-wrapper>img {
  object-fit: contain;
  height: 200px;
  margin: var(--padding-tiny);
}

.center-margin {
  margin: 0 auto;
}

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

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

.bold-text {
  font-weight: bold;
}

.large-text {
  font-size: 2rem;
}

.center-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.max-content {
  width: max-content;
}

.border-gentle {
  border: 1px solid #ebebeb;
  border-radius: var(--border-radius-main);
  box-shadow: 0 0 5px 0 #ebebeb;
}

.step-label {
  width: 2rem;
  height: 2rem;
  border-radius: 100px;

  color: white;
  background-color: black;

  font-weight: bold;

  margin-right: var(--padding-thin);
  font-size: 1.5rem;
}

.red-text {
  color: var(--color-red);
}

.red {
  background-color: var(--color-red);
}

.white-text {
  color: white;
}

.center-absolute {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.warning-box {
  display: flex;
  margin: var(--padding-thin) 0;
  border: 2px solid var(--color-red);
  padding: 0;
  border-radius: var(--border-radius-main);
}

.warning-box>p {
  margin: var(--padding-thin);
}

.warning-icon {
  padding: var(--padding-thin);
  background-color: var(--color-red);
  color: white;
  border-radius: 0 0 var(--border-radius-main) 0;
  width: max-content;
  height: min-content;
}

.caution-box {
  display: flex;
  margin: var(--padding-thin) 0;
  border: 2px solid var(--color-yellow);
  padding: 0;
  border-radius: var(--border-radius-main);
}

.caution-box>p {
  margin: var(--padding-thin);
}

.caution-icon {
  padding: var(--padding-thin);
  background-color: var(--color-yellow);
  color: white;
  border-radius: 0 0 var(--border-radius-main) 0;
  width: max-content;
  height: min-content;
}

.info-box {
  display: flex;
  margin: var(--padding-thin) 0;
  border: 2px solid #007a3d;
  padding: 0;
  border-radius: var(--border-radius-main);
}

.info-box>p {
  margin: var(--padding-thin);
}

.info-icon {
  padding: var(--padding-thin) var(--padding-medium);
  background-color: #007a3d;
  color: white;
  border-radius: 0 0 var(--border-radius-main) 0;
  width: max-content;
  height: min-content;
}