/* Decorative Elements */
.decoration {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.top-right-above {
    top: 820px;
    right: 0px;
    width: 300px;
    height: auto;
}

.top-right-under {
    top: 795px;
    right: 0px;
    width: 180px;
    height: auto;
}

.top-left {
    top: 50px;
    left: 0px;
    width: 160px;
    height: auto;
}

.square-dots-vertical {
    top: 50%;
    left: 30px;
    width: 30px;
    height: auto;
}

.sparkles {
    top: 50px;
    right: 20px;
    width: 150px;
    height: auto;
    position: absolute;
}






/* Body Decorative Elements */
.decoration.right {
    top: 175%;
    right: 0;
    width: 70px;
    height: auto;
}

.decoration.left {
    top: 120%;
    left: 0;
    width: 70px;
    height: auto;
}

.decoration.right-2 {
    top: 420%;
    right: 0;
    width: 70px;
    height: auto;
}

.decoration.left-2 {
    top: 350%;
    left: 0;
    width: 70px;
    height: auto;
}

.decoration.middle-left-squares {
    top: 240%;
    left: 25px;
    width: 30px;
    height: auto;
}

.decoration.middle-right-squares {
    top: 290%;
    right: 25px;
    width: 30px;
    height: auto;
}

.decoration.body-bottom-right {
    top: 390%;
    right: 0;
    width: 120px;
    height: auto;
}

.decoration.body-bottom-left {
    top: 370%;
    left: 15px;
    width: 70px;
    height: auto;
}

/* Medium Screen Responsive Styles (9.5 inches and under) */
@media (max-width: 1024px) {
    /* Hide decorative elements not in header */
    .decoration.right,
    .decoration.left,
    .decoration.middle-left-squares,
    .decoration.middle-right-squares,
    .decoration.body-bottom-right,
    .decoration.body-bottom-left {
        display: none;
    }
}

@media (max-width: 1300px) {
    .sparkles {
        width: 100px;
    }
}

@media (max-width: 768px) {
    .sparkles {
        width: 100px !important;
    }
}