html {
      font-size: 16px; /* Set the root font size for the website */
    }
    
    /*formatting for song title class (want to use on my music page)*/
    .songTitle {
      color: white; /*NOT FINAL*/
      font-weight: bold;
      font-size: 1.5rem /* 1.5*16(html font size)*/
    }
    
    /*formatting for text title class (want to use on my writing page)*/
    .textTitle {
      color: white; /*NOT FINAL*/
      font-weight: bold;
      font-size: 1.5rem /* 1.5*16(html font size)*/
    }

    /*formatting for header class (want to use at the top of each page) NOT FINAL*/
    .Header {
      color: #9D5BCC;
      text-align: center;
      font-weight: bold;
      font-size: 3rem /* 3*16(html font size)*/
    }
    
    /*formatting for poems (want to use for my poetry) NOT FINAL*/
    .poem {
      color: white;
      font-style: oblique;
      font-size: 1rem /* 1*16(html font size)*/
    }
    
    /*formatting for sidebar that links back to the index page NOT FINAL*/
    .anchorHome {
      color: white;
      text-align: right;
      font-weight: bold;
      font-size: 1rem /* 1*16(html font size)*/
    }
    
    h1 {
        color: #9D5BCC;
        text-align: center;
    }

    body {
        background-color: #0C0412;
        /*background: linear-gradient(to right, #1A26F9, #090BE1, #0C0412); (trying out gradients)
        min-height: 100vh; /*makes sure gradient lasts to the end of the window and doesn't repeat half-way down*/
        
        /*default text colour*/
        color: white;
        
        /*display website using the default font for the user's OS*/
        font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        
        /*classic centered-column look that almost every nice-looking site uses*/
        max-width: 600px;
        margin: 0 auto;
        /*keep words off the walls of the screen no matter how small the window gets.*/
        padding: 0 20px;
    }
    
    /*changing the colour of hyperlinks to yellow*/
    a {
      color: #E8C353;
    }
    /*hyperlinks turn purple (same colour as h1) when hovered over*/
    a:hover {
      color: #9D5BCC;
    }
    
    /* giving the details (open and close thingy) a cute border*/
    details {
      border: 2px dashed darkslateblue;
      font-size: 0.9rem /* 0.9*16(html font size)*/
    }

    /* giving the summary ("my design process" text) some style*/
    summary {
      color: #E8C353;
      font-size: 1rem; /* 1*16(html font size)*/
      font-weight: normal; /*PLACEHOLDER - I haven't decided what design i want yet*/
    }