@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Nunito:wght@300&family=Bitter:ital,wght@1,500&display=swap');

:root {
    --main-green: #335533;
    --light-green: #d7e4d7;
    --very-light-green: #ecf1ec;
    
    --blue-green: #2e6d54;
    --dark-grey: #333;

    --main-padding: 1em;
    --img-shadow: 0 0 10px #333;

    --main-max-width: 1920px;
}

body, html {
    font-family: 'Nunito', sans-serif;
    width: 100%;
    margin: 0;
    overflow-x: hidden;
    background-color: var(--dark-grey);
    /* background: linear-gradient(rgb(214, 214, 214) 3%, white 10%); */
}

body {
    padding: 0.2em;
}

a {
    color: var(--blue-green)
}

#main {
    margin-top: 0.4em;
    margin: auto;
    padding: var(--main-padding);
    border-top: 6px solid var(--main-green);
    border-left: 6px solid var(--main-green);
    border-image: linear-gradient(to bottom right, var(--main-green), rgba(0,0,0,0) 40%) 10;
    height: calc(100% - 2 * 1.2em);
    overflow-y: auto;
    overflow-x: hidden;

    background-color: white;
    width: calc(100% - 0.4em - 6px - 2 * var(--main-padding));
    /* margin: auto; */
}

#content-area {
    max-width: var(--main-max-width);
    margin: auto;
    min-height: calc(100vh - 4 * 1.2em);
}

h1, h2, h3, h4, h5 {
    font-family: 'Merriweather', serif;
    text-indent: 0.3em;
    text-shadow: 2px 2px 4px #33333370;
}

footer {
    text-align: center;
    color: var(--blue-green);
    font-family: 'Nunito', serif;
    font-size: smaller;
    padding: var(--main-padding);
    background: linear-gradient(to bottom, white 5%, 9%, var(--dark-grey) 30%);
    margin-left: 4px;
}

header {
    background: linear-gradient(to bottom, var(--dark-grey), #444 20%, 60%, var(--dark-grey));
    margin-left: -4em;
    padding: 0.5em;
    padding-left: 4em;
}

header a {
    color: var(--very-light-green);
    margin: 0 0.3em;
    font-family: 'Nunito', serif;
    font-size: x-small;
}

.header-content {
    margin: auto;
    max-width: var(--main-max-width);
}

.title-label {
    font-size: 12px;
    font-family: 'Bitter', serif;
}

#my-name {
    margin-top: 0;
    border-bottom: 4px solid var(--main-green);
    border-image: linear-gradient(to right, var(--main-green), rgba(0,0,0,0) 40%) 10;
}

.profile {
    float: right;
    max-width: 10em;
    border-radius: 12em;
    margin: 2em;
    box-shadow: 2px 3px 15px 1px var(--dark-grey);
    transition: all 0.2s ease-in-out;
}

.profile:hover {
    border-radius: 0px;
    transform: scale(1.3);
}

p {
    text-indent: 1em;
}

p img, p video, .sketchfab-embed-wrapper iframe {
    max-width: calc(100% - 2 * var(--main-padding));
    box-shadow: var(--img-shadow);
}

.dotcom {
    font-size: 60%;
    font-family: monospace;
}

.project-box {
    display: flex;
    justify-content: center;
    align-items: stretch;
}

.project-box > a,  .project-box > .stretch-project{
    text-align: center;
    background: #fff;
    width: 12em;
    flex-basis: 12em;
    height: 12em;
    display: block;
    margin: 1em;
    padding: 0.5em;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    line-height: 20px;
    position: relative;
    
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0px 3px 5px -1px #636363;
    transition: all 0.2s ease-in-out;
}

.shadow-inset-overlay-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    box-shadow: inset 0px 0px 2px 10px white;
}

.project-box > a:hover {
    /* width: 15em; */
    background: var(--very-light-green);
}

.project-box  img {
    max-width: 10em;
}

.project-preview > img{
    max-height: 5em;
    max-width: 10em;
    z-index: 0;
    position: absolute;
    bottom: 0%;
    left: 0%;
    /* filter: saturate(20%); */
    filter: sepia(50%) drop-shadow(0 0 4px var(--dark-grey));
    transform: translate(0%, 0%);
    transition: all 0.2s ease-in-out;
}

a:hover.project-preview > img {
    max-width: 100%;
    max-height: 100%;
    /* filter: saturate(100%); */
    filter: sepia(0%) drop-shadow(0 0 4px var(--dark-grey)) ;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, 50%);
}

.project-box > .stretch-project {
    max-width: fit-content;
    height: fit-content;
    min-height: 12em;
}

.project-box > .stretch-project h2 {
    writing-mode: vertical-rl;
    text-orientation: sideways-right;
    transform: rotate(180deg);
    margin: 0.5em;
    margin-left: 0;
    float: left;
}

.project-box.fill-project {
    flex-wrap: wrap;
}

.project-box.fill-project > a {
    flex-grow: 1;
}

.project-box li {
    text-align: left;
}

.project-box.project-box.resume-box {
    flex-wrap: wrap;
}

.project-box.resume-box > a {
    max-width: 50em;
    min-height: 12em;
    min-width: 12em;
    height: fit-content;
    width: 80%;
    flex-basis: fit-content;
    flex-grow: 1;
}

.project-box > a.art-project-preview {
    /* transition: transform 0.3s ease-in; */
    /* transition-delay: 500ms; */
    transition: none;
}

.art-project-preview img {
    max-width: unset;
    max-height: unset;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, 50%);
    object-fit: cover;
}

.art-project-preview:hover {
    transform: scale(200%);
    z-index: 9999;
    animation-name: show-art;
    animation-duration: 0.6s;
    animation-timing-function: ease-in;
    object-fit: contain;
}

@keyframes show-art {
    0% { transform: scale(100%); }
    60% { transform: scale(100%); }
    100% { transform: scale(200%); }
}



.art-project-preview:hover img {
    object-fit: contain;
}

.social-media-buttons svg {
    width: 48px;
    height: 48px;
    filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4));
    transition: all 0.1s ease-in;
}

.social-media-buttons a:hover {
    z-index: 99;
}

.social-media-buttons svg:hover {
    transform: scale(1.5);
}

.social-media-buttons a:hover + a {
    transform: scale(0.5);  
}

.social-media-buttons svg path {
    fill: var(--blue-green);
}

.social-media-buttons svg:hover path {
    fill: var(--main-green);
}

.songlist img {
    width: 128px;
    height: 128px;
    box-shadow: var(--img-shadow);
    float: left;
    margin: 10px;
}

.songlist hr {
    clear: both;
    width: 75%;
    height: 3px;
    border: none;
    margin: 2em;
    background: linear-gradient(to right, rgba(0,0,0,0), var(--main-green), rgba(0,0,0,0));
}

.lyrics-link {
    font-family: 'Bitter', serif;
}

.lyrics-link::before {
    content: "+"

}

.project-container.grid {
    display: flex;
    flex-wrap: wrap;
    max-width: fit-content;
}

pre code, #mastodon-feed {
    box-shadow: inset 2px 2px 5px 0px #aaa;
    border-radius: 5px;
}

#mastodon-feed {
    padding: 0.5em;
    max-height: 50vh;
    overflow-y: auto;
    background-color: var(--very-light-green);
    border: 1px solid var(--very-light-green);
}

.toot {
    /* border: 1px solid var(--light-green); */
    box-shadow: 2px 2px 5px 0px #aaa;
    margin-bottom: 5px;
    border-radius: 5px;
    padding: 2px;
    background-color: white;
}

.toot p {
    width: 100%;
}

.toot hr {
    max-width: 50%;
    border: none;
    background-color: var(--very-light-green);
    width: 50%;
    height: 5px;
}

.toot.content-warning {
    cursor: pointer;
}

.toot.content-warning p {
    display: none;
}

.toot.content-warning p:first-child{
    display: initial;
}

.toot.content-warning.expanded p {
    display: initial;
}

.toot.content-warning.expanded {
    cursor: initial;
}

.toot img, .toot video {
    display: block;
    max-width: 90%;
    max-height: 25vh;
    margin: 10px auto;
}

 .sketchfab-embed-wrapper {
    width: 80vw;
    margin: auto;
    max-width: 80em;
}

.sketchfab-embed-wrapper iframe {
    width: 100%;
    min-height: 50vw;
    max-height: 80em;
}

.twitter-timeline {
    /* width: 100% !important; */
    box-shadow: var(--img-shadow);
    /* border: 2px solid var(--main-green); */
}

.lyrics p {
    text-indent: 0;
}

/* .lyrics {
    transition: all 0.6s ease-in;
    max-height: 100vh;
    overflow-y: hidden;
}

.lyrics:empty {
    max-height: 0;
} */