:root {
  --font-sans-serif: sans-serif;
  --font-serif: serif;
  --color-body: #000;
  --color-link: #0d6efd;
  --max-width-container: 1920px;
  --padding-container: 12px;
}

body {
  font-family: var(--font-sans-serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-body);
}

section {
  position: relative;
}

a:where(:any-link, :hover) {
  color: var(--color-link);
}

a:hover {
  text-decoration: none;
}

img {
  max-width: 100%;
}

h1, h2, h3, h4, h5, h6, dl, dt, dd {
  font-family: inherit;
  font-weight: inherit;
  padding: 0;
  margin: 0;
}

.my-ajax-loading {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(255, 255, 255, .5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.my-container {
  position: relative;
  max-width: var(--max-width-container);
  margin: 0 auto;
  padding: 0 var(--padding-container);
}

.my-header {
  position: relative;
}

.my-header-logo {

}

.my-header-nav {

}

.my-main {
  position: relative;
}

.my-footer {
  position: relative;
  small {

  }
}

.my-footer-logo {

}

.my-footer-nav {

}

/* `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {

}

/* `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {

}

/* `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {

}

/* `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {

}

/* `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {

}