:root {
    --default-padding: 12.8rem;
    --default-margin: 6.4rem;
    --default-padding-side: 1.6rem;
    --default-border-radius: 0.4rem;
    --default-border-radius-big: 3.2rem;

    --default-animation: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    --default-animation-time-micro: 0.075s;
}

main, #article {
    max-width: 100vw;
    overflow-y: hidden;
    overflow-x: hidden;
    flex-grow: 1;
}

::-webkit-scrollbar {
    width: 0.7rem;
    background-color: var(--clr-secondary-850);
}
::-webkit-scrollbar-thumb {
    background-color: var(--clr-secondary-150);
    border-radius: 0.5rem;
}

.fixed-div {
    position: fixed;
    inset: 0;
    background-color: rgba(255, 0, 0, 0.1);
}
.fixed-div a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

@media only screen and (max-width: 1199px) {
    :root {
        --default-padding: 9.6rem;
        --default-margin: 4.8rem;
        --default-padding-side: 2.4rem;
    }
}
@media only screen and (max-width: 800px) {
    :root {
        --default-padding: 6.4rem;
        --default-margin: 3.2rem;
        --default-padding-side: 1.6rem;
        --default-border-radius-big: 1.6rem;
    }
}

body {
    --shadow-amount: 1;
}

a:focus-visible, button:focus-visible, input:focus-visible, .focus1 input:focus-visible + label {
    outline-offset: 0.35rem;
}

input {
    outline-color: var(--clr-primary-900);
    caret-color: var(--clr-primary-900);
}

/* TODO: Fix this, is also not in the center with background. No */
img {
    background-color: var(--clr-secondary-150);
    /* background-image: url("https://dev.markf.nl/media/img/spinner.gif"); */
    background-size: min(5rem, 80%);
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.005);
}
.image-container {
    background-color: var(--clr-secondary-150);
}
:where(body[data-background="dark"], .dark-body) :is(img, .image-container) {
    background-color: var(--clr-secondary-750);
}
.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#smooth-content > .pin-spacer {
    pointer-events: none;
}

.ampersand {
    font-family: "Open Sans";
    font-style: normal;
}