/* Example CSS file */ 
/* Center horizontally and vertically */
#main {
    position: absolute;
    top: 50%; /* a little bit towards the top */
    left: 50%;
    transform: translate(-50%, -50%);}

    #header {font-family: "IBM Plex Mono", monospace; font-size: 5rem; border: solid; padding: 2.5rem;}

    .line2 {font-size: 2rem;}
    .line2 > span {padding-right:0.1em; padding-left:0.1em; margin-right: 0.5em; display: inline-block}

    /* Link format */

    a, a:link {text-decoration: underline; color: black; padding: 2px;}

    a:hover, a:focus {position: relative; bottom: 0.05em;  border: none; border-width: 0.01em; border-radius: 1px}

    .grey {color: darkgrey}

    /* link hover effects */
    /*#link-1:hover {background-color: magenta;} */
    #link1:hover {background-color: yellow;}
    #link2:hover {background-color: cyan;}
    #link3:hover {background-color: magenta;}

    #content {font-size: 1.2rem; padding-left: 2.5rem; padding-right: 2.5rem; margin-top: 2rem; border:solid; font-family: "IBM Plex Mono", monospace;}

        /* split into about and main */

    /* on name hover slow color invert */
    /* maybe only on about page */
    /*.main:hover {background-color: black;}
     . main:hover span {color: white;*}
     .main:hover #link-1 {background-color: magenta;}
     .main:hover #link1 {background-color: yellow;}
     .main:hover #link2 {background-color: cyan;}
     */

    /* split into about and main */