:root {
    --mobile-padding: 1rem;
    --medium-container-size: 45rem;
    --small-container-size: 20rem;
}
footer {
    margin-block-start: 0px;
}

/* anchor tags: remove default underline */
a:where(:not(.wp-element-button)) {
    text-decoration: none !important;
}

a:where(:not(.wp-element-button)):hover,
a:where(:not(.wp-element-button)):focus {
    text-decoration: underline;
}

@media (max-width: 600px){
    .wp-site-blocks main > *:not(.no-mobile-p),
    header,
    footer .alignwide,
    .add-mobile-p {
        padding-left: var(--mobile-padding);
        padding-right: var(--mobile-padding);
    }

    .remove-mobile-p,
body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)).remove-mobile-p {
        margin-left: calc(var(--mobile-padding) * -1) !important;
        margin-right: calc(var(--mobile-padding) * -1) !important;
    }
}

@media (min-width:600px) and (max-width: 72rem){
    header,
    footer .alignwide {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* fixes not having any margin when these are on small-ish screens. May have side-effects */
@media (min-width:600px) and (max-width: 72rem){
    body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
    body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)).add-tablet-p,
    .add-tablet-p {
        margin-left: var(--mobile-padding) !important;
        margin-right: var(--mobile-padding) !important;
    }
}

/* didn't have a natural place to put this */
#home-cover h1,
#home-cover section {
  animation: runin 0.5s;
  animation-fill-mode: forwards;
  transform-origin: left;
  opacity: 0;
}

#home-cover section {
    animation-delay: 0.25s;
}

.animate--fadein {
    animation: fadein 0.5s;
}
.animate--runin {
    animation: runin 0.5s;
}

.has-intersection-observer .animate--runin-children > * {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: right;
}

.has-intersection-observer .animate--runin-children--play > * {
    animation: runin 0.5s;
    animation-fill-mode: forwards
}

.animate--runin-children > *:nth-child(1) { animation-delay: .25s }
.animate--runin-children > *:nth-child(2) { animation-delay: .5s }
.animate--runin-children > *:nth-child(3) { animation-delay: .75s }
.animate--runin-children > *:nth-child(4) { animation-delay: 1s }
.animate--runin-children > *:nth-child(5) { animation-delay: 1.25s }
.animate--runin-children > *:nth-child(6) { animation-delay: 1.5s }
.animate--runin-children > *:nth-child(7) { animation-delay: 1.75s }
.animate--runin-children > *:nth-child(8) { animation-delay: 2s }
.animate--runin-children > *:nth-child(9) { animation-delay: 2.25s }

@keyframes fadein {
    from { 
      opacity: 0;
      transform: translateY(-5rem);
    }
    to   {
      opacity: 1;
      transform: translateY(0rem);
    }
}

@keyframes runin {
    from { 
      opacity: 0;
      transform: scaleX(0);
    }
    to   {
      opacity: 1;
      transform: scaleX(1);
    }
}

@keyframes slowzoomout {
    from {
        transform: scale(1.25);
    }
    to {
        transform: scale(1);
    }
}