html {
    background: #43324d;
    background-image: linear-gradient(135deg, #412F47 20%, #463958 80%);
    background-attachment: fixed;
    font-family: Verdana;
    color: white;
}

a, p {
    color: white;
}

p code {
    border: solid;
    border-color: #666;
    border-width: 1px;

    display: inline-block;
    
    background-color: #444;
    padding: 2px 4px;
}

.project {
    margin: 25px 10px 25px 11%;
    padding: 2px;
    

    box-shadow: 2px 2px #39273B;
    background: #3F2B41;

    overflow: hidden;
}

.project .repo {
    font-style: italic;
    text-decoration: none;
    font-size: small;

    border-style: solid none solid none;
    border-color: #39273B;
    
    width: 100%;
    padding: 5px 10px;
}

.project p {
    padding: 2px 10px;
    margin: 5px 10px;
}

.project .repo p {
    padding: 5px 0px;
    margin: 0px;
    display: inline;
}

.project h3, .project h4 {
    margin: 15px 0px 5px 0px;
    padding: 2px 20px;
}

.project img, .project video {
    width: 33%;
    max-width: 500px;
    padding: 5px 10px;
}

iframe {
    border-color: #39273B;
    margin-left: 10px;
}

.footnote li a{
    text-decoration: none;
}

.MediaGrid {
    display: flex; 
    overflow-x: auto;
    align-items: center;
}

/* Letter boxes so can be manually set without problem*/
.MediaGrid iframe {
    width: 445px;
    height: 250px
}

.project .GridElement {
    max-height: 250px;
    width: auto;
    margin: auto;
}

.PDF {
    width: 300px;
    min-width: 100%;
}

.astro-code {
    width: 33%;
    max-width: 500px;
    
    height: 33%;
    max-height: 400px;

    padding: 5px 10px;
    margin: 0px 10px;
    font-size: smaller;
}


/* Sidebar */
#sidebar {
    width: 10%;
    margin: 0px;
    position: fixed;

    box-shadow: 2px 2px #39273B;
    background: #3F2B41;
}

#sidebar h5 {
    text-align: center;
    text-decoration: underline;
    
    padding: 5px;
    margin: 5px;
}

#sidebar a {
    display: block;
    padding: 8px 16px;
}   

#sidebar a:hover:not(.current) {
    background-color: #43324D;
}

.current {
    background-color: #463958;
    text-decoration: none;

    pointer-events: none;
}

#PuffyPitch {
    display: inline;
}

@media only screen and (max-width: 1100px) {
    #sidebar {
        width: 100%;
        display: grid;
        position: static;

        grid-template-columns: repeat(5, auto);
        place-items: center;
    }

    #sidebar h5 {
        display: none;
    }

    #sidebar a {
        place-items: center;
        display: inline-block;
        text-align: center;
    }

    .project {
        margin: 10px 0px;
        padding: 10px;
    }

    .MediaGrid {
        justify-content: left;
    }

    .project img, .project video {
        width: 100%;
        max-width: 100%;
    }

    .project .GridElement {
        padding: 10px 5px;
        height: 300px;

        width: none;
        max-width: none;
    }

    .project p, .project h3 {
        padding: 0px;
        margin: 5px 0px;

        display: block;
    }

    .project h4 {
        padding: 5px 0px;
    }

    .project ul {
        padding-left: 10px;    
    }

    .astro-code {
        width: 100%;
        max-width: 100%;

        padding: 5px 10px;
        margin: 10px 0px;
    }

    .repo {
        margin-left: -10px;
    }

    #PuffyPitch {
        width: 80%;
        height: 300px;
    }
}