/*
For Things that are likely to be repeated and consistant between pages like box backgrounds and colours

Rainbow Delight Palette:
Black Text
- EA698B
- D55D92
- C05299
- AC46A1
White Text
- 973AA8
- 822FAF
- 6D23B6
- 6411AD
- 571089
- 47126B
*/
:root{
    --RD1: #EA698B;
    --RD2: #D55D92;
    --RD3: #C05299;
    --RD4: #AC46A1;
    --RD5: #973AA8;
    --RD6: #822FAF;
    --RD7: #6D23B6;
    --RD8: #6411AD;
    --RD9: #571089;
    --RD10: #47126B;
    --page-background: rgb(2, 131, 170);
    --text-background: rgb(108, 175, 196);
    --text-colour-dark: rgb(20, 20, 20);
    --text-colour-light: rgb(240, 240, 240);
    --headings-colour: rgb(20, 20, 20);
    --headings-background: rgb(142, 216, 238);
    
}

/* head, body, footer{
    /* background-color: var(--page-background); */
    /* background-image: radial-gradient(var(--RD1), var(--RD2), var(--RD3), var(--RD4)); 
} */

html, body, head, footer{
    height: 100%;
    margin: 0;
    padding: 0;
    justify-content: center;

}

html {
    background: var(--RD7);
}

body{
    height: 10000px;
}


.background {
    background: 
        
        linear-gradient(180deg, var(--RD1), var(--RD2), var(--RD3), var(--RD4)) ,
        var(--RD2); /* Replaces the default colour of the page background, only visible behind image in edge cases on mobile */


    min-height: 100vh;
    height: auto;


  }

  h1, h2, h3, h4, h5, h6{
    text-align: center;
  }

.standard-box, .heading-box, .image-box{

    background:
        var(--RD6)

        ;
    
    color: var(--text-colour-light);
    max-width: 75%;
    border-style: ridge;
    border-width: 7px;
    border-color: var(--RD9);


}