/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   body {
       text-align: center;
       font-family:'Arial', Sans-Serif;
      /* background-color:;*/
      background-image: radial-gradient(at 50vw 100vh, #55cc7a 50%, #4bf4cb 90%);
      /* background-image: ; (hopefully uneeded)*/
      background-size: auto 100vh ;
      font-size: 16px;
      color: #FFFFFF; /* text colour */
   }
   p{ /* basic text */
       margin: 5px;
   }
   hr{ /* underline */
       border: 0;
        height: 1px;
        /* background-image: linear-gradient(to right, purple, blue, purple); */
        margin-right: 5px;
        margin-left: 5px;
   }
   a{   /*link text colour */
       color: #000000;
       text-decoration: none;
   }
   a:hover{ /* link text colour when cursor hovers over it */
       color: #FFFFFF;
       text-decoration: none;
   }
   
   .grid-containerss{
       /* colours. Dark= #15114C Light= #846AC10 */
       display: grid;
       grid-template-columns: repeat(3,1fr);
       grid-template-rows: repeat(5,1fr);
       gap: 25px;   /* px = pixels. (1inch = 96px)*/
       /* pt = points (1inch = 72 )pt | pc = picas (12pt =1pc) */
       width: 100%; /*Relative to the parent element*/
       height: 10vh; /*Relative to 1% of the height of the viewport. V(iewport)H(ieght)*/
   }
   .grid-item-1{
       grid-column: 2 / span 1;
       grid-row: 1 / span 1;
       background: #15114C;
       border-radius: 8px;
       padding: 20px;
   }
   .grid-item-2{
       grid-column: 1 / span 1;
       grid-row: 2 / span 1;
       background: #15114C;
       border-radius: 8px;
       padding: 20px;
   }
   .grid-item-3{
       grid-column: 2 / span 1;
       grid-row: 2 / span 2;
       background: linear-gradient(to bottom, #846AC1 0%, #15114C 80%);
       border-radius: 8px;
       padding: 20px;
       border-style: solid;
       border-color: black;
       border-width: 5px;
   }
   .grid-item-4{
       grid-column: 3 / span 1;
       grid-row: 2 / span 2;
       background: #8E50FB;
       border-radius: 8px;
       padding: 20px;
       border-style: solid;
       border-color: black;
       border-width: 5px;
   }
   .grid-item-5{
       grid-column: 1 / span 1;
       grid-row: 4 / span 1;
       background: linear-gradient(to bottom, #846AC1 0%, #15114C 80%);
       border-radius: 8px;
       padding: 20px;
       border-style: solid;
       border-color: black;
       border-width: 5px;
   }
   .grid-item-6{
       grid-column: 2 / span 1;
       grid-row: 4 / span 2;
       background: linear-gradient(to bottom, #846AC1 0%, #15114C 80%);
       border-radius: 8px;
       padding: 20px;
       border-style: solid;
       border-color: black;
       border-width: 5px;
   }
   .grid-item-7{
       grid-column: 3 / span 1;
       grid-row: 4 / span 2;
       background: #15114C;
       border-radius: 8px;
       padding: 20px;
       border-style: solid;
       border-color: black;
       border-width: 5px;
   }
   .grid-item-8{
       grid-column: 1 / span 1;
       grid-row: 1 / span 1;
       background: #15114C;
       border-radius: 8px;
       padding: 20px;
   }