// Adds background to the page when set
html::after {
    content:"";
    position: fixed;
    top: 0;
    right :0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-color: var(--theme-page-bg-color);
    background-image: var(--theme-page-bg-image);
    background-position: top center;
    background-size: var(--theme-page-bg-image-tiled, unset);

    @media all and (-webkit-min-device-pixel-ratio: 1.5),
    all and (   min--moz-device-pixel-ratio: 1.5),
    all and (     -o-min-device-pixel-ratio: 3/2),
    all and (        min-device-pixel-ratio: 1.5),
    all and (                min-resolution: 144dpi) ,
    all and (                min-resolution: 1.5dppx),
    all and (                min-device-width: 2880px) {
        background-image: var(--theme-page-bg-image-3k);
    }

    @media all and (-webkit-min-device-pixel-ratio: 2),
    all and (   min--moz-device-pixel-ratio: 2),
    all and (     -o-min-device-pixel-ratio: 2/1),
    all and (        min-device-pixel-ratio: 2),
    all and (                min-resolution: 192dpi) ,
    all and (                min-resolution: 2dppx),
    all and (                min-device-width: 3840px) {
        background-image: var(--theme-page-bg-image-4k);
    }
}

// Stop the page from scrolling when class is in place
html.no-scroll {
    overflow: hidden;
}

// Add link color to all links in the page
html body {
    a, a:hover  {
        color: var(--theme-link-color);
    }
}

hr {
    border-color: $gray-300;
}

// Highlight dot
$highlight-gradient: linear-gradient(to top, #fe5196, #f77062);
$highlight-box-shadow: 0 0 5px 0 rgba(254, 81, 150, 0.58);

.highlight-dot::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 10rem;
    margin-left: 7px;
    background: $highlight-gradient;
    box-shadow: $highlight-box-shadow;
    display: inline-block;
}


// Sets the border radius of profile picture image based on settings in theme
.profile-img,
#IC_image_user_photo .uploaded-image,
#IC_image_user_photo .current-image-container {
    border-radius: var(--theme-profile-picture-border-radius);
}


// Sets the border radius of item based on settings in theme
.rounded-corners {
border-radius: var(--theme-rounded-corners);
}

// Sets the top border radius of item based on settings in theme
.rounded-corners-top {
    border-top-left-radius: var(--theme-rounded-corners);
    border-top-right-radius: var(--theme-rounded-corners);
}

// Sets the bottom border radius of item based on settings in theme
.rounded-corners-bottom {
	border-bottom-left-radius: var(--theme-rounded-corners);
	border-bottom-right-radius: var(--theme-rounded-corners);
}

code {
    white-space: pre-wrap;

    br {
        display: none;
    }
}

// ------------------------------------
//     VIDEO
// ------------------------------------
// stop video overlapping
video {
    max-width: 100%;
}
