html,
body {
    background: @background;
    color: @on-background;
    font-size: @font-size-default;
    font-weight: @font-weight-default;
    line-height: @font-line-height-default;
    font-family: "Nunito", sans-serif;
    width: 100%;
    height: 100%;
}

body {
    overflow-x: hidden;
    padding: @header-height + 60px 0 0 0;

    @media (max-width: 768px) {
        padding: @header-height-max-768 0 0 0;
    }
}

// Scroll To Top

.scroll-to-top {
    position: fixed;
    z-index: 9999;
    right: 5rem;
    bottom: 5rem;

    @media (max-width: 768px) {
        right: 4rem;
        bottom: 1rem;
    }

    .circle-top,
    .circle-email,
    .circle-contact {
        width: 80px;
        height: 80px;
        border-radius: 100%;
        background-color: @secondary;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    }

    .circle-email {
        width: 60px;
        height: 60px;
        background-color: @secondary;
        position: absolute;
        top: -20px;
        right: -39px;
    }

    .circle-contact {
        width: 60px;
        height: 60px;
        background-color: @secondary;
        position: absolute;
        top: 23px;
        right: -53px;
    }
}

// 404

.page-404 {
    text-align: center;
    margin-bottom: @space-xl;

    .brand {
        width: 400px;
        margin: auto auto @space-xl auto;
    }
}