.gradientbg {
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23a6d5);
	background-size: 400% 400%;
	animation: gradient 15s ease ;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.gradient-border{
    border: 2px solid black;
    border-radius: 0px;
    border-image: linear-gradient(57deg,#833ab4,#ff7474,#4f90f1);
    border-image-slice: 1;  
}

.gradient-border2{
    border: 2px solid black;
    border-radius: 0px;
    border-image: linear-gradient(57deg,#833ab4,#74ffd1,#4f90f1);
    border-image-slice: 1;  
}

.gradient-border3{
    border: 5px solid black;
    border-radius: 0px;
    border-image: linear-gradient(57deg,#833ab4,#74ffd1,#4f90f1);
    border-image-slice: 1;  
}


.scrollbox {
    overflow: auto;
    max-height: 400px;
    background: /* Shadow covers */
    linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, /* Shadows */
    radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
    background: /* Shadow covers */
    linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, /* Shadows */
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
    /* Opera doesn't support this in the shorthand */
    background-attachment: local, local, scroll, scroll;
  }