@font-face {
    font-family: "Roboto_Mono";
    src: url(Roboto_Mono/RobotoMono-VariableFont_wght.ttf);
}
body {
    margin: 0;
    padding: 0;
    color: white;
    font-family: "Roboto_Mono", Roboto_Mono;
    background-color: #000000;
    height:100vh;
    display: flex;
    font-weight: 300;
}
a {
    font-family: "Roboto_Mono", Roboto_Mono;
    display: block;
    text-decoration: none;
    color: white;
    padding: 1em;
}
a:hover {
    color: red;
}
.active {
    color: red;
    background: #171717;
}
.section {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    font-weight: 350;
}
.leftCol {
    display: flex;
    flex-direction: column;
    flex: 1;
    background-color: #141414;
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
}
.rightCol {
    flex: 4;
    background-color: #000000;
    font-weight: 300;
    padding: 2em;
    padding-bottom: 0;
    line-height: 1.6em;
    overflow-y: scroll;
    display:flex;
    flex-direction: column;
    min-height: 0;
}

.rightColBio {
    flex: 4;
    background-image: url(pictures/mainBackground.gif);
    background-size: 100% 100%;
    font-weight: 300;
    padding: 2em;
    padding-bottom: 0;
    line-height: 1.6em;
    overflow-y: scroll;
    display:flex;
    flex-direction: column;
    min-height: 0;
}

@media (max-width: 768px) {
    .leftCol {
        flex: 2;     
    }

}
#statement {
    margin-top: auto;
}
#bio {
    padding-top: 1em;
    padding-bottom: 4em;
}
#contact {
    justify-self: flex-end;
    align-self: flex-end;
    padding-top: 1em;
}
.essay {
    text-indent: 2em;
}
#worksCited {
    line-height: 1em;
}
#playbackRight {
    flex: 4;
    background-color: #FFFFFF;
    font-weight: 300;
    padding: 2em;
    padding-bottom: 0;
    line-height: 1.6em;
    overflow-y: scroll;
    display:flex;
    flex-direction: column;
    min-height: 0;
}
#playbackCard {
    width: 60%;
}
#trioPibble {
    width: 50%;
    align-self: last baseline;
}
#blackPibble {
    height: 20%;
    position: absolute;
    top: 0;
    right: 0;
}
.soundcloudEmbed {
    z-index: 1;
}

#instructionPopup {
    position: absolute;
    top: 10%;
    right: 5%;
    width: 17em;
    padding: 1em;
    background-color: #141414;
    border: 1px solid #444;
    border-radius: 8px;
    z-index: 9999;
    color: white;
    line-height: 1.4em;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.6);
    font-size: 1em;
}
#instructionPopup button#closePopup {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    color: white;
    font-size: 1.2em;
    cursor: pointer;
}
#instructionPopup button#closePopup:hover {
    color: red;
}

#webampLink {
    display: inline;
    padding: 0;
}

#clockContainer {
    display: flex;
    justify-content: center;
}
#gameContainer {
    display: flex;
    justify-content: center;
}
#ballsContainer {
    display: flex;
    justify-content: flex-end;
}
#cameraContainer {
    display: flex;
    justify-content: center;
}
.p5PageText {
    display: flex;
    justify-content: center;
}
#ballsText {
    display: flex;
    justify-content: end;
}
#shapesContainer {
    display: flex;
    justify-content: flex-start;
}
#shapesText {
    display: flex;
    justify-content: flex-start;
}
.gallery {
    display: flex;
    flex-wrap: wrap;
}
.gallery img {
    width: 45%;
    margin-top: auto;
    padding: 1em;
    object-fit: contain;
}

@media (max-width: 768px) {
    .gallery img {
        width: 100%;
    }
}

#galleryBottom {
    width: 100%;
    height: auto;
}
/* #portrait {
    width: 20%;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: -1;
} */
.contactCol {
    display: flex;
    align-self: flex-start;
    justify-content: flex-end;
    margin-top: auto;
}

audio {
    min-height: 50px;
    min-width: 25%;
}

#boxCarlevasText {
    padding-bottom: 1em;
    padding-top: 1em;
}
.boxCaption {
    padding-top: 1em;
    padding-bottom: 1em;
}
.boxGallery {
    display: flex;
    flex-wrap: wrap;
}
.boxGallery img {
    width: 45%;
    object-fit: contain;
    margin-top: auto;
    padding: 1em;
}

@media (max-width: 768px) {
    .boxGallery img {
        width: 100%;
    }
}

#pianoWorksText {
    padding-bottom: 1em;
    padding-top: 1em;
}

#drawSynthText {
    display: flex;
    flex-direction: column;
    padding-top: 1em;
    padding-bottom: 1em;
}
#drawSynthText h2 {
    align-self: center;
    padding-bottom: 0;
}
#notice {
    color: red;
    text-decoration: underline;
}
#drawSynthLink {
    align-self: center;
}
.pianoContainer {
    padding-top: 1em;
    display: flex;
    align-items: last baseline;
}
.pianoContainer img {
    width: 50%;
    object-fit: contain;
    height: auto;
}
.pianoContainer.noImage {
    justify-content: flex-end;
}


@media (max-width: 768px) {
    .pianoContainer {
        flex-direction: column;
        align-items: center;
    }
    .pianoContainer img {
        width: 100%;
    }
}