@import url("fonts.css");
@import url("colors.css");

body,
html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    /* background-color: var(--color-white); */
}

* {
    /* margin: 0;af
    padding: 0; */
    box-sizing: border-box;
    /* color: var(--color-black); */
}

/* chnage spacing between list items to be 1.2 */
li {
    margin-bottom: 0.5rem;
}

a,
a:visited {
    color: var(--color-black);
}

a:hover,
a:focus,
a:active {
    color: var(--color-blue-700);
}

body {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 100%;
    width: 100%;
    height: 100%;
}

nav {
    margin: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-gray-100);
}

nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0 2rem;
    border-bottom: 2px solid var(--color-gray-200);

    position: sticky;
    top: 0;
}

nav a {
    padding: 0.5rem;
}

main {
    max-width: 70rem;
    margin: auto;
    padding: 2rem;
    width: 100%;
    height: 100%;
    /* background-color: var(--color-gray-100); */
    /* border-left: 2px solid var(--color-gray-200);
    border-right: 2px solid var(--color-gray-200); */
}

main h1 {
    margin-top: 0;
}

main #bio {
    display: grid;
    /* image on left colum should be height of text on right column */
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
}

/* h1 in bio spans two colums */
main #bio h1 {
    grid-column: 1 / 3;
}

main #bio #bio-img {
    height: 15rem;
    margin: auto;
    margin-right: 2rem;
}

/* if width is smaller than 600px, change grid-template-columns to 1fr */
@media (max-width: 800px) {
    main #bio {
        grid-template-columns: 1fr;
    }
    main #bio h1 {
        grid-column: 1 / 2;
    }
    main #bio #bio-img {
        margin: auto;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        text-align: center;
    }
}

main #contact > div.contact-list {
    display: grid;
    grid-template-columns: auto;
    gap: 0.2rem;
}

main #contact > div.contact-list > div {
    display: grid;
    grid-template-columns: auto 1fr;
}

main #contact > div.contact-list > div > img {
    height: 1rem;
    margin-right: 0.5rem;
    margin-top: auto;
    margin-bottom: auto;
}

main #contact > div.contact-list > div > p {
    margin: 0;
    margin-top: auto;
    margin-bottom: auto;
}

.card-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 0;
    list-style-type: none;
}

.card {
    border: 2px solid var(--color-gray-200);
    padding: 0.5rem;
    background-color: var(--color-white);
    margin: 0;
}

pre.shiki {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.5rem;
    overflow: auto;
    border: 2px solid var(--color-gray-200);
}

pre.shiki code {
    counter-reset: step;
    counter-increment: step 0;
}

pre.shiki code .line::before {
    content: counter(step);
    counter-increment: step;
    width: 1rem;
    margin-right: 1.5rem;
    display: inline-block;
    text-align: right;
    color: rgba(115, 138, 148, 0.4);
}

blockquote {
    overflow: auto;
    border: 2px solid var(--color-gray-200);
    border-left: 10px solid var(--color-gray-200) !important;
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: var(--color-white);
}

:not(pre) > code {
    color: var(--color-red-700);
    background-color: white;
    border: 1px solid var(--color-gray-200);
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

img {
    max-width: 100%;
    height: auto;
}

pre,
code {
    overflow-x: auto;
}

.music-grid {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

.music-grid .music-grid-item {
    width: 100%;
    height: 700px;
}

.music-grid .music-grid-item iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

@media only screen and (max-width: 800px) {
    .music-grid {
        grid-template-columns: 1fr;
    }
    .music-grid .music-grid-item {
        width: 70%;
        height: 700px;
        margin-left: auto;
        margin-right: auto;
    }
}

.footnote-item a {
    word-break: break-all;
}

/* a {
    word-break: break-all;
} */

mjx-container[jax="SVG"] > svg {
    max-width: 100% !important;
}