body.scss

@import "variables.scss";
$animationStepTime: 500ms;
html {
    scroll-behavior: smooth;
    scroll-padding-top: 75px;
}

body {
    transition: 0.5s;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,
        BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol";
    margin: 0;
    &[dark="true"] {
        background-color: $background-dark;
    }
    background-color: $background-light;
}

.content-wrapper {
    opacity: 1;
    position: relative;
    left: 0;
    top: 50px;
    padding-bottom: 50px;
    min-height: 100vh;

    @media (max-width: 1200px) {
        width: 75%;
        left: 12.5%;
    }

    &-to-left {
        transition: $animationStepTime;
        left: -100vw;
    }

    &-set-right {
        left: 100vw;
    }

    &-to-right {
        transition: $animationStepTime;
        left: 100vw;
    }

    &-set-left {
        left: -100vw;
    }

    &-to-middle {
        transition: $animationStepTime;
        left: 0;
        @media (max-width: 1200px) {
            width: 75%;
            left: 12.5%;
        }
    }
}