/* Gradient styles */
#PDFView1,
#PDFView2,
#PDFView3 {
    display: none;
}

.box {
    width: 20rem;
    height: 20rem;
    /*border: 1px solid black;*/
    background-color: transparent;
    padding: 0.5rem;
}
    .box_border {
        border: 0.2px dotted rgb(107, 106, 106);
    }
.inner_box {
    width: 100%;
    height: 100%;
    padding: 0.5rem;
    background-color: white;
}
/* Section 1 Separate angled gradients */

.gradient1 {
    background-color: black;
    backdrop-filter: blur(15px) saturate(100%);
    background: linear-gradient(
        45deg,
        yellow,
        red,
        blue,
        black
    );
}

.gradient2 {
    background-color: black;
    backdrop-filter: blur(15px) saturate(100%);
    background: linear-gradient(
        225deg,
        rgba(255, 255, 0, 0.8),
        rgba(255, 0, 0, 0.8),
        rgba(20, 40, 189, 0.873) 65%,
        rgba(1, 1, 189, 0.877) 80%,
        rgba(0, 0, 0, 0.9) 
    );
}

.gradient3 {

    background: linear-gradient(
        135deg,
        rgb(255, 17, 0),
        rgb(255, 165, 0),
        rgb(255, 225, 0),
        rgb(45, 128, 0),
        rgb(0, 255, 238),
        blue,
        rgb(85, 0, 128),
        rgb(249, 126, 216),
        black
    );
}
/* filling page with colours each from different angles */
/* no visible hightlighted merge lines so no additional effects required*/
.gradient4 {

    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70%),
                linear-gradient(127deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70%),
                linear-gradient(336deg, rgba(255, 162, 0, 0.8), rgba(255, 255, 0, 0) 70%);
}
/* filling page with colours each from different angles */
/* no visible hightlighted merge lines so no additional effects required*/
.gradient5 {
    
    background: linear-gradient( 105deg,rgba(255, 255, 0, 0.8),rgba(255, 255, 0, 0) 70%),
                linear-gradient( 35deg,rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70%),
                linear-gradient( 65deg,rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70%),
                linear-gradient( 195deg,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0) 70%),
                linear-gradient( 165deg,rgba(0, 255, 38, 0.8), rgba(0, 255, 38, 0) 70%),
                linear-gradient( 295deg,rgba(154, 6, 234, 0.8), rgba(154, 6, 234, 0) 70%);
    
    
}



/*Section 2 Mirrored background */
.gradient_row1 {
    backdrop-filter: blur(10px);
    background-color: white;
    background: linear-gradient(
        45deg,
        yellow,
        red,
        blue,
        black
    );
}
.gradient_row2 {
    backdrop-filter: blur(60px);
    -webkit-backdrop-filter: blur(60px);
    background: linear-gradient(
        135deg,
        yellow,
        red,
        blue,
        black
    );
}

/* SECTION 3*/
/* straight edged shapes instead of polygon shapes */
.shape_gradient1 {
    
    background: linear-gradient(217deg, rgba(255,0,0,.8) 20%, rgba(255,0,0,0) 20%),
                linear-gradient(107deg, rgba(0,0,255,.8) 35%, rgba(0,0,255,0) 35%),
                linear-gradient(336deg, rgba(255, 162, 0, 0.8) 20%, rgba(255, 255, 0, 0) 20%),
                linear-gradient(17deg, rgba(0, 255, 119, 0.8), rgba(0, 255, 119,0) 95%);                    
}
/* straight edged shapes instead of polygon shapes with overflow text*/
.shape_gradient2 {
    
    background: 
        linear-gradient(180deg, rgba(255,0,0,1) 25%, rgba(255,0,0,0) 25%),
        linear-gradient(0deg, rgba(255,0,0,.8) 20%, rgba(255, 0, 0, 0) 20%),
        linear-gradient(125deg, rgba(0, 85, 255, 0.8) 30%, rgba(0, 85, 255,0) 32%),
        linear-gradient(235deg, rgba(0, 85, 255, 0.8) 30%, rgba(0, 85, 255,0) 32%);
}

/* different shapes */
.shape_gradient3 {
    background-color: white;
    background: 
        
        linear-gradient(180deg, rgba(255,0,0,1) 25%, rgba(255,0,0,0) 25%),
        linear-gradient(0deg, rgba(255,0,0,.8) 20%, rgba(255, 0, 0, 0) 20%),
        linear-gradient(125deg, rgba(0, 85, 255, 0.8) 30%, rgba(0, 85, 255,0) 32%),
        linear-gradient(235deg, rgba(0, 85, 255, 0.8) 30%, rgba(0, 85, 255,0) 32%),
        linear-gradient(180deg, rgba(255,255,255,1) 100%, rgba(255,255,255,0) 100%);
}
/* different shapes */
.shape_gradient4 {
    
    background: 
        linear-gradient(180deg, rgba(255,0,0,.8) 25%, rgba(255,0,0,0) 25%),
        linear-gradient(0deg, rgba(255,0,0,.8) 20%, rgba(255, 0, 0, 0) 20%),
        linear-gradient(125deg, rgba(0, 85, 255, 0.8) 30%, rgba(0, 85, 255,0) 32%),
        linear-gradient(235deg, rgba(0, 85, 255, 0.8) 30%, rgba(0, 85, 255,0) 32%),
        linear-gradient(180deg, rgba(255,255,255,.8) 100%, rgba(255,255,255,0) 100%);
}

.shape_gradient5 {
    background: 
        linear-gradient(90deg, rgba(255,0,0,1) 20%, rgba(255, 255, 255, 0) 20% 80%, rgb(255, 0, 0,1) 80% 100%),
    
        linear-gradient(135deg, rgba(255,0,0,1) 20%, rgba(255, 255, 255, 0) 20% 80%, rgb(255, 0, 0,1) 80% 100%),
        radial-gradient(red 10%, transparent 12% , blue 15% , transparent 17% , green 21% ,transparent 23% 100%);
}

.shape_gradient6 {
    background: 
        linear-gradient(35deg, rgba(255,0,0,1) 20%, rgba(255, 255, 255, 0) 20% 80%, rgb(255, 0, 0,1) 80% 100%),
        linear-gradient(235deg, rgba(255,0,0,1) 20%, rgba(255, 255, 255, 0) 20% 80%, rgb(255, 0, 0,1) 80% 100%);
        
}



/* BORDERS */
.border_gradient1 {  
    background: 
        linear-gradient(180deg, rgba(255,0,0,.8) 25%, rgba(255,0,0,0) 25%),
        linear-gradient(0deg, rgba(255,0,0,.8) 20%, rgba(255, 0, 0, 0) 20%),
        linear-gradient(
            180deg, 
        rgba(255,255,255,1) 100%, 
        rgba(255,255,255,0) 100%);
        
}

.border_gradient2 {
    background: 
        linear-gradient(90deg, rgba(255,0,0,1) 20%, rgba(255, 255, 255, 0) 20% 80%, rgb(255, 0, 0,1) 80% 100%),
        linear-gradient(135deg, rgba(255,0,0,1) 20%, rgba(255, 255, 255, 0) 20% 80%, rgb(255, 0, 0,1) 80% 100%);
}
        
.border_gradient3 {
    background: 
        linear-gradient(45deg, rgba(255,0,0,.8) 15%, rgba(255,0,0,0) 15%),
        linear-gradient(135deg, rgba(255,0,0,.8) 15%, rgba(255, 0, 0, 0) 15%),
        linear-gradient(225deg, rgba(255,0,0,.8) 15%, rgba(255, 0, 0, 0) 15%),
        linear-gradient(315deg, rgba(255,0,0,.8) 15%, rgba(255, 0, 0, 0) 15%);
        
}
.border_gradient4 {
    background: 
    radial-gradient(
        transparent 52%,
        red 56%,
        transparent 60%,
        blue 64%, 
        transparent 68%,
        green 72%, 
        transparent 76%,
        red 80%, 
        transparent 84% , 
        blue 88%,
        transparent 92% , 
        green 96% ,
        transparent 100%
        );
}
.border_gradient5 {
    background: ;
}