:root {
  --black: #0B173E;
  --gray-1: #376FA0;
  --gray-2: #5CB3BE;
  --gray-3: #F2CF9F;
  --white: #FFF8E7;
  --link-active: #7C1581;
  --link: #243C85;
  --yellow: #D5B63B;
  --green: #6F9B32;
  --blue: #376FA0;
}

html {
  background-image: url("../img/white.webp");
  color: var(--black); font-family: Arial, Helvetica, sans-serif;
  &, body, p, h1 { margin:0; }
}
q { display: block; margin: 1rem 0 1rem 2rem; }
img { display: block; width: 100%; height: auto;}
a { color: var(--link); }
a:hover, a:active { text-decoration-style: wavy;}
a:visited, a:active { color: var(--link-active); }
h1 {padding: 1rem 0;}

body {
  display: flex; flex-direction: column; min-height: 100vh;
  >div {
    flex-grow: 1; display: flex; flex-direction: column;
    padding-bottom: 1rem;
    main {flex-grow: 1;}
  }
  footer {
    background-image: url("../img/footer.webp"); background-size: contain;
    color: var(--white); position: relative;
    display: flex; flex-direction: row; gap: 1rem;
    padding: 1rem;
    & * {align-content: center;}
    &::before {
      content: ''; display: block; position: absolute;
      top: -1rem; left:0; width: 100%; height: 1rem;
      background-image: url("../img/footer-wave.webp");
      background-size: contain;
    }
    & > p:first-child { flex-grow: 1; }
    a, a:visited, a:active { color: var(--white); }
    & > img { height: 100%; width: auto; margin: auto; }
  }
}

@media screen and (max-width: 30rem) {
  body > footer {flex-direction: column; text-align: center;}
}
@media screen and (min-width: 40rem) {
  body > footer { padding: 1rem 10%; }
}
@media screen and (min-width: 67rem) {
  body > footer { padding: 1rem 20%; }
}