:root{
  --header-h: 70px;
  --nav-h: 40px;
  --gap-bridge: 20px;
}

@media (max-width: 999px){
  :root{ --nav-h: 48px; }
}


*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0px; padding: 0px; }


body {
  padding-top: calc(var(--header-h) + var(--nav-h));
  padding-bottom: 60px;
  background: rgb(242,242,242);
  color: rgb(20,30,60);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 24px;
}
@media (prefers-color-scheme: dark){
  body {
    background: rgb(60,60,60);
    color: rgb(242,242,242);
  }
}

.ech-main { padding: 0px; }

.ech-border {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  overflow-x: clip;
}

/* Desktop: top 80, right 80, bottom 50, left 70 */
.ech-content {
  padding: 70px 100px 100px 100px;
}


.ech-container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  max-width: 1280px;
}

@media (max-width: 999px){
  .ech-content {
    padding: 70px 10px 100px 10px;
  }
}

@media (max-width: 1200px){ .ech-container { max-width: 1000px; } }
@media (max-width: 1000px){ .ech-container { max-width: 760px;  } }
@media (max-width: 768px) { .ech-container { max-width: 640px;  } }
@media (max-width: 576px) { .ech-container { max-width: 100%;   } }


.ech-content img,
.ech-content video,
.ech-content iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

.ech-content table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  white-space: nowrap;
}