@import url("https://rsms.me/inter/inter.css");

/* Defines global variables to be used throughout the entire website */
:root{
    font-size: 16px;


    /* Text colors */
    --slight-white: hsl(0, 0%, 80%);
    --white-transparent: rgba(255, 255, 255, 0.8);

    --gray-mode: #191919;
    /* --light-mode:  */
    --dark-mode: #05010d;

    --inactive-link: hsl(0, 0%, 60%);
    --hover-link: hsl(0, 0%, 90%);

    /* Decrease margin for smaller viewports */
    /* --margin-base:  */


    /* Transitions */
    --link-transition: 200ms;
}

* {
    /* border: 1px solid coral; */
}

body{
    margin: 0;
    font-family: Inter, system-ui, 'Segoe UI', sans-serif;
    /* New colour for testing */
    background: var(--gray-mode);
    color: white;
    color: var(--slight-white);


    line-height: 1.5;
    -webkit-font-smoothing: antialiased;

}

body::-webkit-scrollbar{
    width: 0.35rem;
}
body::-webkit-scrollbar-track{
    background: rgba(255, 255, 255, 0.2);
}
body::-webkit-scrollbar-thumb{
    background: rgba(255, 145, 0, 0.5);
}


.default-padding{
    /*Padding removed in body, and reinserted as necessary*/
    padding: 8px;
}

h1{
    display: inline-block;
    font-size: 1.75em;
    font-weight: 300;
    /* color: grey; */
    color: var(--slight-white);

}

h2{
    display: inline-block;
    font-size: 1.25em;
    font-weight: 200;
    color: var(--slight-white);
}   

h3{
    display: inline-block;
    font-size: 1.25em;
    font-weight: 400;
    color: var(--slight-white);
}

h4{
    font-size: 1.30rem;
    font-weight: 500;
}


.detailContentPadding{
    padding-left: 1rem;
}

details > summary{
    cursor: pointer;
}

summary::marker{
    font-size: 0.8em;
    color: hsl(0, 0%, 65%);
}


summary:before{
    content: "";
    padding-right: 0.1rem;
}

a:link, a:visited{
    text-decoration: none;
    color: var(--inactive-link);
    transition: var(--link-transition);

}

a:hover{
    text-decoration: none;
    color: var(--hover-link);
}