@-webkit-keyframes popfilms {
    0% {top: 95px;opacity: 0}
    to {top: 65px;opacity: 1}
}

@keyframes popfilms {
    0% {top: 95px;opacity: 0}
    to {top: 65px;opacity: 1}
}

@-webkit-keyframes popphotos {
    0% {top: 95px;opacity: 0}
    to {top: 65px;opacity: 1}
}

@keyframes popphotos {
    0% {top: 95px;opacity: 0}
    to {top: 65px;opacity: 1}
}

@-webkit-keyframes popfonts {
    0% {top: 95px;opacity: 0}
    to {top: 65px;opacity: 1}
}

@keyframes popfonts {
    0% {top: 95px;opacity: 0}
    to {top: 65px;opacity: 1}
}

@-webkit-keyframes popwebsites {
    0% {top: 95px;opacity: 0}
    to {top: 65px;opacity: 1}
}

@keyframes popwebsites {
    0% {top: 95px;opacity: 0}
    to {top: 65px;opacity: 1}
}

@-webkit-keyframes popmore {
    0% {top: 95px;opacity: 0}
    to {top: 65px;opacity: 1}
}

@keyframes popmore {
    0% {top: 95px;opacity: 0}
    to {top: 65px;opacity: 1}
}

@-webkit-keyframes animatemynav {
    0% {opacity: 0}
    to {opacity: 1}
}

@keyframes animatemynav {
    0% {opacity: 0}
    to {opacity: 1}
}

@-webkit-keyframes headermm {
    0% {height: 80px;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;}
    to {height: 100vh;border-bottom-left-radius: 0;border-bottom-right-radius: 0;}
}

@keyframes headermm {
    0% {height: 80px;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;}
    to {height: 100vh;border-bottom-left-radius: 0;border-bottom-right-radius: 0;}
}

@-webkit-keyframes headermmunfix {
    0% {height: 100vh;border-bottom-left-radius: 0;border-bottom-right-radius: 0;}
    to {height: 80px;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;}
}

@keyframes headermmunfix {
    0% {height: 100vh;border-bottom-left-radius: 0;border-bottom-right-radius: 0;}
    to {height: 80px;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;}
}

@-webkit-keyframes mm {
    0% {opacity: 0}
    to {opacity: 1}
}

@keyframes mm {
    0% {opacity: 0}
    to {opacity: 1}
}

@-webkit-keyframes mmunfix {
    0% {opacity: 1}
    to {opacity: 0}
}

@keyframes mmunfix {
    0% {opacity: 1}
    to {opacity: 0}
}

@-webkit-keyframes contentmm {
    0% {opacity: 1}
    to {opacity: .3}
}

@keyframes contentmm {
    0% {opacity: 1}
    to {opacity: .3}
}

@-webkit-keyframes contentmmunfix {
    0% {opacity: .3}
    to {opacity: 1}
}

@keyframes contentmmunfix {
    0% {opacity: .3}
    to {opacity: 1}
}

@-webkit-keyframes opensubcontainerfilms {
    0% {max-height: 0;opacity: 0}
    10% {opacity: 0}
    to {max-height: 300px;opacity: 1}
}

@keyframes opensubcontainerfilms {
    0% {max-height: 0;opacity: 0}
    10% {opacity: 0}
    to {max-height: 300px;opacity: 1}
}

@-webkit-keyframes closesubcontainerfilms {
    0% {max-height: 300px;opacity: 1}
    to {max-height: 0;opacity: 0}
}

@keyframes closesubcontainerfilms {
    0% {max-height: 300px;opacity: 1}
    to {max-height: 0;opacity: 0}
}

@-webkit-keyframes opensubcontainerphotos {
    0% {max-height: 0;opacity: 0}
    10% {opacity: 0}
    to {max-height: 300px;opacity: 1}
}

@keyframes opensubcontainerphotos {
    0% {max-height: 0;opacity: 0}
    10% {opacity: 0}

    to {max-height: 300px;opacity: 1}
}

@-webkit-keyframes closesubcontainerphotos {
    0% {max-height: 300px; opacity: 1}
    to {max-height: 0;opacity: 0}
}

@keyframes closesubcontainerphotos {
    0% {max-height: 300px;opacity: 1}
    to {max-height: 0;opacity: 0}
}

@-webkit-keyframes opensubcontainerwebsites {
    0% {max-height: 0;opacity: 0}
    10% {opacity: 0}
    to {max-height: 300px;opacity: 1}
}

@keyframes opensubcontainerwebsites {
    0% {max-height: 0;opacity: 0}
    10% {opacity: 0}
    to {max-height: 300px;opacity: 1}
}

@-webkit-keyframes closesubcontainerwebsites {
    0% {max-height: 300px;opacity: 1}
    to {max-height: 0;opacity: 0}
}

@keyframes closesubcontainerwebsites {
    0% {max-height: 300px;opacity: 1}
    to {max-height: 0; opacity: 0}
}

@-webkit-keyframes opensubcontainerfonts {
    0% {max-height: 0;opacity: 0}
    10% {opacity: 0}
    to {max-height: 300px;opacity: 1}
}

@keyframes opensubcontainerfonts {
    0% {max-height: 0;opacity: 0}
    10% {opacity: 0}
    to {max-height: 300px;opacity: 1}
}

@-webkit-keyframes closesubcontainerfonts {
    0% {max-height: 300px;opacity: 1}
    to {max-height: 0;opacity: 0}
}

@keyframes closesubcontainerfonts {
    0% {max-height: 300px;opacity: 1}
    to {max-height: 0;opacity: 0}
}

@-webkit-keyframes opensubcontainermore {
    0% {max-height: 0;opacity: 0}
    10% {opacity: 0}
    to {max-height: 300px;opacity: 1}
}

@keyframes opensubcontainermore {
    0% {max-height: 0;opacity: 0}
    10% {opacity: 0}
    to {max-height: 300px;opacity: 1}
}

@-webkit-keyframes closesubcontainermore {
    0% {max-height: 300px;opacity: 1}
    to {max-height: 0;opacity: 0}
}

@keyframes closesubcontainermore {
    0% {max-height: 300px;opacity: 1}
    to {max-height: 0;opacity: 0}
}

body,
html {
    height: 100%!important
}

html {
    font-size: 15px;

    --border-radius: 5px;
}

body {
    background-color: var(--back);
    margin: 0
}

#all-body.fixed {
    overflow: hidden!important;
}

html {
    --back: #130f0b;
    --back-rgba: #0b060080;
    --head: #1d1815;
    --menu: #342b25;
    --active: #453526;
    --scroll: #64503d;
    --font: #f2ede9;;
    --subtitle: #b8aba0;
    --vignette: #0b060080;
    --accent: #6fe09a;
    --secondary: #ffbd7c;
}

html.light {
    --back: #f3efed;
    --back-rgba: #f2ede980;
    --head: #dfdad1;
    --menu: #cabfb0;
    --active: #c4a681;
    --scroll: #a08164;
    --font: #130f0b;
    --subtitle: #584b40;
    --vignette: #0b060080;
    --accent: #008834;
    --secondary: #955c23;
}

@font-face {
    font-family:Fraunces;
    src: url(/inserts/fonts/Fraunces.ttf);
    font-display: fallback
}

@font-face {
    font-family:Nunito;
    src: url(/inserts/fonts/Nunito.ttf);
    font-display: fallback
}

h1,
h2,
h4,
h5,
h6,
p {
    color: var(--font)
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Fraunces";
    font-weight: 400
}

h2 {
    font-size: 1.9rem;
    margin: 1.8em .6em 1em
}

h3 {
    font-size: 1.333333rem;
    margin: 25px 0;
    color: var(--secondary)
}

p {
    margin-bottom: 1.3333em;
    line-height: 1.5em
}

a h2:hover,
a p:hover,
p a:hover {
    color: var(--accent);
}

p,
li,
text,
span
label {
    font-family: "Nunito";
    font-size: 1rem;
    color: var(--font)
}

a {
    font-family: "Nunito";
    font-size: 1rem;
}

#content a p,
#content p a,
#content span a,
#content li a,
#content .li a,
.tracklist a {
    text-decoration: underline;
    color: var(--font)
}

#content p a:hover,
#content span a:hover,
#content li a:hover,
#content .li a:hover,
.tracklist a:hover {
    text-decoration: underline;
    color: var(--accent)
}

#content p a:active,
#content span a:active {
    text-decoration: none;
    color: var(--accent)
}

#site-footer a,
#content a h2,
#content a h3,
#content a:active {
    text-decoration: none!important;
}

#site-header a {
    text-decoration: none;
}

ul {
    padding-left: 15px;
}
.ul-border {
    border-left: solid 2px var(--menu);
    border-bottom-left-radius: 15px;
    position: relative;
    padding: 0 0 12px 20px;
}

li {
    margin-top: 15px;
    line-height: 1.5em
}

.pages {
    ul {
        list-style-type: none;
    }
}

ul li::marker {
    color: var(--active)!important;
}

.li {
    display: flex;
    align-items: center;
    column-gap: 12px;
    margin-bottom: 1rem;

    p {
        margin: 0
    }
}

ol {
    padding: 0 0 0 25px;

    li {
        padding-left: 5px
    }

    li::marker {
        color: var(--active)!important;
    }
}

.img-round {
    border-radius: var(--border-radius);
    -webkit-border-radius: var(--border-radius);
    -moz-border-radius: var(--border-radius);
    -ms-border-radius: var(--border-radius);
    -o-border-radius: var(--border-radius);
}

.img-hover-div {
    display: block;
    transition: box-shadow .15s ease-in-out;
    overflow: hidden;
    border-radius: var(--border-radius);
    -webkit-border-radius: var(--border-radius);
    -moz-border-radius: var(--border-radius);
    -ms-border-radius: var(--border-radius);
    -o-border-radius: var(--border-radius);
    position: relative;
    cursor: pointer;

    .img-hover {
        display: block;
        z-index: -1!important;
        transform: scale(1.05);
        transition: transform .15s ease-in-out;
        position: absolute;
        top: 50%;
        width: 100%;
        height: 100%;
    }
}

.img-hover-div:hover {
    box-shadow: inset 0 0 30px var(--vignette);

    img {
        transform: scale(1.025);
    }
}

button,
button:hover {
    text-decoration: none
}

button {
    cursor: pointer;
    border: solid 2px var(--menu);
    border-radius: 10px;
    font-family: "Nunito";
    padding: 12.5px 20px;
    font-size: 1rem;
    color: var(--font);
    background: var(--back);
    -webkit-transition: .2s;
    -o-transition: .2s;
    transition: .2s
}

button:hover {
    background: var(--menu);
    -webkit-transition: .2s;
    -o-transition: .2s;
    transition: .2s
}

button:active {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
    color: var(--accent);
}

.head-btn {
    color: var(--font)!important;
    background-color: var(--head)!important;

    a {
        color: var(--font)
    }
}

.head-btn:hover {
    background-color: var(--menu)!important
}

.head-btn:active {
    color: var(--accent)!important;

    a {
        color: var(--accent)!important
    }

    svg {
        fill: var(--accent)!important
    }
}

.menu-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    padding: 0;
    border: solid 2px var(--menu);
    border-radius: 50%;
    -webkit-transition: .2s;
    -o-transition: .2s;
    transition: .2s;

    svg {
        width: 35px;
        height: 35px;
        fill: var(--font);
    }
}

.menu-btn:hover {
    background-color: var(--menu);
    -webkit-transition: .2s;
    -o-transition: .2s;
    transition: .2s;
    cursor: pointer
}

.menu-btn:active {
    transition: none;

    svg {
        fill: var(--accent)!important
    }
}

.dot-title {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 10px;
    margin: 30px 15px;

    h1 {
        font-size: 2.666666rem;
        text-align: center;
        margin: 0;
    }

    .dot-div {
        display: inline-flex;
        height: 1rem;
    }
}

.title-container {
    width: calc(100% - 30px);
    margin: 0 15px;

    .title {
        padding: 30px 0;
        margin: 0 auto;
        text-align: center;
        overflow: hidden;
        max-width: 800px;
        font-size: 2.666666rem
    }
    
    .title:before,
    .title:after {
        content: "◆";
        color: var(--active);
        font-size: 1rem;
        display: inline-block;
        width: 15px;
        margin: 0 8px;
        position: relative;
        top: -6px
    }
}

@media only screen and (max-width:700px) {
    .title:after,
    .title:before {
        display: none!important
    }
}

.title.sub {
    padding-bottom: 20px
}

.subtitle {
    color: var(--subtitle);
    max-width: 700px;
    margin: 0 auto 45px;
    padding: 0 15px
}

.subtitle.mid {
    text-align: center
}

.head-u {
    text-decoration: none;
    color: var(--font);
}

.head-u:hover {
    color: var(--accent)!important;
}

.head-u:active {
    text-decoration: underline;
}

.main .hello-back,
.back .hello-main {
    display: none!important
}

.hello {
    height: 80px;
    display: flex;

    a {
        height: 80px;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        
        svg {
            height: 45px;
            fill: var(--font);
            stroke: var(--font)!important;
        }
    }

    h3 {
        color: var(--font);
        margin: 15px;
        transition: color .2s;
        -webkit-transition: color .2s;
        -moz-transition: color .2s;
        -ms-transition: color .2s;
        -o-transition: color .2s;
    }

    a:hover h3 {
        color: var(--accent)!important;
        -webkit-transition: color .2s;
        -o-transition: color .2s;
        transition: color .2s;
        -moz-transition: color .2s;
        -ms-transition: color .2s;
    }

    a:active svg {
        fill: var(--accent)!important;
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
        -moz-transition: none;
        -ms-transition: none;
    }

    #logo-not-a-piano {
        display: none
    }
}

.main {
    .hello {
        margin-left: 15px;
    }

    .back-button {
        display: none
    }
}

@media only screen and (min-width:400px) {
    .back .hello {
        margin-left: 70px
    }
}

@media only screen and (max-width:400px) {
    .back .hello {
        width: 100%;
        margin: 0;

        a {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            margin: 0 auto
        }

        h3 {
            display: none
        }
    }
}

#site-header {
    height: 80px;
    width: 100%;
    background-color: var(--head);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;

    #desk {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: absolute!important;
        top: 0;
        right: 0;
        height: 80px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin-right: 10px;

        @media only screen and (max-width:700px) {
            display: none;
        }
        
        .box {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            margin-right: 10px;

            .link {
                padding: 5px 0
            }

            .link.arrow {
                margin-right: 7px
            }

            .icon {
                display: block;
                border-left: solid 2px var(--active);
                border-bottom: solid 2px var(--active);
                width: 6px;
                height: 6px;
                -webkit-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);
                margin: 0 4px 4px 0;
                -webkit-transition: border-color .2s ease-in-out;
                -o-transition: border-color .2s ease-in-out;
                transition: border-color .2s ease-in-out;
            }
        }

        .box a:hover {
            cursor: pointer;
        }

        .box-films:hover .pop-films {
            display: block;
            right: 326px;
            -webkit-animation-name: popfilms;
            animation-name: popfilms
        }

        .box-photos:hover .pop-photos {
            display: block;
            right: 244px;
            -webkit-animation-name: popphotos;
            animation-name: popphotos
        }

        /*
        .box-fonts:hover .pop-fonts {
            display: block;
            right: 77px;
            -webkit-animation-name: popfonts;
            animation-name: popfonts
        }
        */

        .box-websites:hover .pop-websites {
            display: block;
            right: 143px;
            -webkit-animation-name: popwebsites;
            animation-name: popwebsites
        }

        .box-more:hover .pop-more {
            display: block;
            right: 75px;
            -webkit-animation-name: popmore;
            animation-name: popmore
        }

        .box:hover .icon {
            border-color: var(--scroll);
            -webkit-transition: border-color .2s ease-in-out;
            -o-transition: border-color .2s ease-in-out;
            transition: border-color .2s ease-in-out;
        }
    }

    .pop {
        display: none;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 10px 20px;
        width: 300px;
        background: var(--menu);
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        position: absolute;
        top: 65px;
        -webkit-animation-duration: .25s;
        animation-duration: .25s;
        z-index: 80!important;
        
        a {
            width: 100%;
            display: block;
            padding: 10px 0;
            margin: 0
        }

        .space {
            position: absolute;
            margin: -25px 0 0 -20px;
            width: 275px;
            height: 15px
        }
    }

    .box a {
        font-size: 1.15rem;
        color: var(--font);
    }

    .box a:hover {
        color: var(--accent);
    }

    .box a:active {
        text-decoration: underline
    }
}

#site-header.fixed {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    z-index: 100;
    overflow: hidden;
    padding-bottom: 80px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    -webkit-animation-name: headermm;
    animation-name: headermm;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    animation-timing-function: ease-in;
}

#site-header.unfix {
    position: fixed;
    width: 100%;
    height: 80px;
    top: 0;
    z-index: 100;
    overflow: hidden;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    -webkit-animation-name: headermmunfix;
    animation-name: headermmunfix;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    animation-timing-function: ease-out;
}

.home .pop-p-home,
.about-me .pop-p-about,
.behind-the-scenes .pop-p-behind,
.films .pop-p-films,
.as-bold-as-love .pop-p-bold,
.lost-in-the-woods .pop-p-lost,
.more .pop-p-more,
.norm-memorial .pop-p-norm,
.not-a-piano .pop-p-piano,
.photography .pop-p-photos,
.set-free .pop-p-set,
.special-health-service .pop-p-special,
.stitches .pop-p-stitches,
.microscope .pop-p-microscope,
.archer .pop-p-archer,
.catlight .pop-p-catlight,
.fonts .pop-p-fonts,
.angular-glyphic .pop-p-angular,
.sliver .pop-p-sliver,
.mobius-7 .pop-p-mobius,
.websites .pop-p-websites,
.emrys .pop-p-emrys,
.sdf .pop-p-sdf,
.halftones .pop-p-halftones {
    text-decoration: underline !important;
    color: var(--font);
}

.home .hello a:active .pop-p-home,
.about-me .pop-p-about:active,
.behind-the-scenes .pop-p-behind:active,
.films .pop-p-films:active,
.as-bold-as-love .pop-p-bold:active,
.lost-in-the-woods .pop-p-lost:active,
.more .pop-p-more:active,
.norm-memorial .pop-p-norm:active,
.not-a-piano .pop-p-piano:active,
.photography .pop-p-photos:active,
.set-free .pop-p-set:active,
.special-health-service .pop-p-special:active,
.stitches .pop-p-stitches:active,
.microscope .pop-p-microscope:active,
.archer .pop-p-archer:active,
.catlight .pop-p-catlight:active,
.fonts .pop-p-fonts:active,
.angular-glyphic .pop-p-angular:active,
.sliver .pop-p-sliver:active,
.mobius-7 .pop-p-mobius:active,
.websites .pop-p-websites:active,
.emrys .pop-p-emrys:active,
.the-halftones .pop-p-halftones:active {
    text-decoration: none!important
}

.back-button {
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 20px;
    margin-left: 15px;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

#mm-btn-div,
.mm-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

#mm-btn-div {
    width: 70px;
    height: 80px;
    position: absolute;
    right: 0;
    top: 0
}

@media only screen and (min-width:700px) {
    #mm-btn-div {
        display: none
    }

    #mm-btn-div.fixed {
        display: flex
    }

    #desk.fixed {
        display: none!important
    }
}

#mm-open.fixed {
    display: none
}

#mm-open-svg {
    width: 18px;
    height: 18px
}

#mm-close {
    display: none
}

#mm-close.fixed {
    display: flex
}

#mm-close-svg {
    width: 13px;
    width: 13px
}

#mm {
    display: none;
    height: 100%;
    width: 100%;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;

    h1 {
        text-align: center
    }

    a {
        text-align: left
    }

    .menu {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        max-width: 600px;
        margin: auto;
        padding: 0 15px 45px;

        .link-main {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            padding: 7.5px 0;

            a.with,
            a.none {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                width: calc(100% - 55px);
                padding: 10px 15px;
                border: solid 2px var(--menu);
                border-radius: var(--border-radius);
                -webkit-border-radius: var(--border-radius);
                -moz-border-radius: var(--border-radius);
                -ms-border-radius: var(--border-radius);
                -o-border-radius: var(--border-radius);
                -webkit-transition: background-color .2s ease-in-out;
                -o-transition: background-color .2s ease-in-out;
                transition: background-color .2s ease-in-out;
                color: var(--font)
            }

            a.with:hover,
            a.none:hover {
                background: var(--menu);
                -webkit-transition: background-color .2s ease-in-out;
                -o-transition: background-color .2s ease-in-out;
                transition: background-color .2s ease-in-out;
            }

            a.with:active,
            a.none:active {
                color: var(--accent);
            }

            .btn {
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                background: 0 0;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                margin-left: 15px;
            }

            #mm-films.open,
            #mm-photos.open,
            #mm-fonts.open,
            #mm-websites.open,
            #mm-more.open {
                -webkit-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                transform: rotate(180deg);
                -webkit-transition: .2s ease-in-out;
                -o-transition: .2s ease-in-out;
                transition: .2s ease-in-out;
                -moz-transform: rotate(180deg);
                -o-transform: rotate(180deg);
            }

            #mm-films.close,
            #mm-photos.close,
            #mm-fonts.close,
            #mm-websites.close,
            #mm-more.close {
                -webkit-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                transform: rotate(0deg);
                -webkit-transition: .2s ease-in-out;
                -o-transition: .2s ease-in-out;
                transition: .2s ease-in-out;
                -moz-transform: rotate(0deg);
                -o-transform: rotate(0deg);
            }
        }

        .link-div {
            display: none;
            overflow: hidden;
            transform-origin: center top;
            -webkit-animation-duration: .25s;
            animation-duration: .25s;
            -webkit-transition: .3s;
            -o-transition: .3s;
            transition: .3s;
            max-height: 500px;

            .link-line-div {
                -ms-flex-wrap: wrap;
                flex-wrap: wrap;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;

                .link-line {
                    width: 15px;
                    height: calc(100% - 37.5px);
                    border-left: solid 2px var(--menu);
                    border-bottom: solid 2px var(--menu);
                    border-bottom-left-radius: 15px;
                    margin: 7.5px 15px 0;
                }
            }

            .link-sub {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                flex-direction: column;
                width: calc(100% - 47px);

                .sub {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    padding: 7.5px 0;

                    a {
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        align-items: center;
                        width: 100%;
                        -webkit-box-sizing: border-box;
                        box-sizing: border-box;
                        padding: 10px 15px;
                        border: solid 2px var(--menu);
                        border-radius: var(--border-radius);
                        -webkit-border-radius: var(--border-radius);
                        -moz-border-radius: var(--border-radius);
                        -ms-border-radius: var(--border-radius);
                        -o-border-radius: var(--border-radius);
                        -webkit-transition: background-color .2s ease-in-out;
                        -o-transition: background-color .2s ease-in-out;
                        transition: background-color .2s ease-in-out;
                        color: var(--font)
                    }

                    a:hover {
                        background: var(--menu);
                        -webkit-transition: background-color .2s ease-in-out;
                        -o-transition: background-color .2s ease-in-out;
                        transition: background-color .2s ease-in-out;
                    }

                    a:active {
                        color: var(--accent);
                    }
                }
            }
        }

        #mm-films-sub.open,
        #mm-photos-sub.open,
        #mm-websites-sub.open,
        #mm-fonts-sub.open,
        #mm-more-sub.open {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            animation-timing-function: ease-in-out
        }

        #mm-films-sub.open {
            -webkit-animation-name: opensubcontainerfilms;
            animation-name: opensubcontainerfilms;
            -webkit-animation-duration: .3s;
            animation-duration: .3s;
        }

        #mm-films-sub.close {
            -webkit-animation-name: closesubcontainerfilms;
            animation-name: closesubcontainerfilms;
            -webkit-animation-duration: .3s;
            animation-duration: .3s;
        }

        #mm-photos-sub.open {
            -webkit-animation-name: opensubcontainerphotos;
            animation-name: opensubcontainerphotos;
            -webkit-animation-duration: .2s;
            animation-duration: .2s;
        }

        #mm-photos-sub.close {
            -webkit-animation-name: closesubcontainerphotos;
            animation-name: closesubcontainerphotos;
            -webkit-animation-duration: .3s;
            animation-duration: .3s;
        }

        #mm-websites-sub.open {
            -webkit-animation-name: opensubcontainerwebsites;
            animation-name: opensubcontainerwebsites;
            -webkit-animation-duration: .2s;
            animation-duration: .2s;
        }

        #mm-websites-sub.close {
            -webkit-animation-name: closesubcontainerwebsites;
            animation-name: closesubcontainerwebsites;
            -webkit-animation-duration: .3s;
            animation-duration: .3s;
        }

        #mm-fonts-sub.open {
            -webkit-animation-name: opensubcontainerfonts;
            animation-name: opensubcontainerfonts;
            -webkit-animation-duration: .2s;
            animation-duration: .2s;
        }

        #mm-fonts-sub.close {
            -webkit-animation-name: closesubcontainerfonts;
            animation-name: closesubcontainerfonts;
            -webkit-animation-duration: .3s;
            animation-duration: .3s;
        }

        #mm-more-sub.open {
            -webkit-animation-name: opensubcontainermore;
            animation-name: opensubcontainermore;
            -webkit-animation-duration: .3s;
            animation-duration: .3s;
        }

        #mm-more-sub.close {
            -webkit-animation-name: closesubcontainermore;
            animation-name: closesubcontainermore;
            -webkit-animation-duration: .3s;
            animation-duration: .3s;
        }
    }

    #footer-center {
        display: flex;
        justify-content: center;
        align-items: center;
        height: calc(4em - 2px);
        position: absolute;
        bottom: 0;
        margin: auto;
        width: 100%;

        @container footer (width > 50em) {
            z-index: 19;
        }

        @container footer (width <= 50em) {
            z-index: 21;
        }

        @container footer (width <= 30em) {
            box-sizing: border-box;
            padding: 0 4.375em 0 1.25em
        }

        .min {
            display: flex;
            align-items: center;

            span {
                color: var(--subtitle);
                font-size: 0.7rem;
                margin-bottom: 0.25em
            }
        }

        .max {
            display: flex;
            align-items: center;

            span {
                color: var(--subtitle);
                font-size: 1.2rem;
                margin-bottom: 0.125em
            }
        }

        #font-slider {
            display: flex;
            align-items: center;
            width: 300px;
            gap: 0.5em;
            position: relative;
            margin: 0 0.75em;

            #bubble {
                display: none;
                position: absolute;
                margin-left: -1em;
                bottom: calc(100% + 0.5em);
                width: 2em;
                height: 1.5em;
                background: var(--meny);
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 15px;
                -webkit-border-radius: 15px;
                -moz-border-radius: 15px;
                -ms-border-radius: 15px;
                -o-border-radius: 15px;
}
            
            #bubble span {
                text-align: center;
                color: var(--font);
                font-size: 0.9rem;
                position: absolute;
                top: 0.1rem;
                left: 50%;
                transform: translate(-50%, 0);
            }

            input[type=range] {
                appearance: none;
                -webkit-appearance: none;
                width: 100%; /* Firefox. */
                background: transparent;
            }
            
            input[type=range]::-webkit-slider-thumb {
                -webkit-appearance: none;
            }
            
            input[type=range]:focus {
                outline: none;
            }

            /* WebKit/Blink */
            input[type=range]::-webkit-slider-thumb {
                border: none;
                height: 1.25em;
                width: 1.25em;
                background: var(--font);
                border: solid 2px var(--font);
                border-radius: 15px;
                transition: background-color .2s ease-in-out, border-color .2s ease-in-out;
                cursor: pointer;
                margin-top: -8px;
                -webkit-transition: background-color .2s ease-in-out, border-color .2s ease-in-out;
                -moz-transition: background-color .2s ease-in-out, border-color .2s ease-in-out;
                -ms-transition: background-color .2s ease-in-out, border-color .2s ease-in-out;
                -o-transition: background-color .2s ease-in-out, border-color .2s ease-in-out;
}

            /* Firefox */
            input[type=range]::-moz-range-thumb {
                border: none;
                height: 1.25em;
                width: 1.25em;
                background: var(--font);
                border: solid 2px var(--font);
                border-radius: 15px;
                transition: background-color .2s ease-in-out, border-color .2s ease-in-out;
                cursor: pointer;
                -webkit-border-radius: 15px;
                -moz-border-radius: 15px;
                -ms-border-radius: 15px;
                -o-border-radius: 15px;
}

            input[type=range]::-webkit-slider-runnable-track {
                width: 100%;
                height: 0.25em;
                cursor: pointer;
                background-color: var(--background);
                border: solid 2px var(--menu);
                transition: background-color .2s ease-in-out, border-color .2s ease-in-out;
                border-radius: 0.25em
            }

            input[type=range]::-moz-range-track {
                width: calc(100% - 2px);
                height: 0.25em;
                cursor: pointer;
                background-color: var(--background);
                border: solid 2px var(--menu);
                transition: background-color .2s ease-in-out, border-color .2s ease-in-out;
                border-radius: 0.25em;
            }
        }

        #valueBox {
            width: 70px;
            padding: 8px;
            color: var(--font);
            background: var(--background);
            border: solid 2px var(--menu);
            border-radius: 15px;
            text-align: center;
            font-size: 1rem;
        }

        #valueBox::-webkit-inner-spin-button,#valueBox::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        #valueBox {
            appearance: textfield;
            -moz-appearance: textfield;
        }

        p {
            color: var(--active);
            font-size: 0.9rem;
            margin: 0
        }

        #listen {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;

            input {
                width: calc(100% - 175px);
                height: 2.25em;
                margin: 0;
            }
        }
    }
}

#mm.fixed {
    display: block!important;
    z-index: 100!important;
    -webkit-animation-name: mm;
    animation-name: mm;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
}

#mm.unfix {
    -webkit-animation-name: mmunfix;
    animation-name: mmunfix;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
}

#mm.delay {
    overflow-y: auto
}

#crumbs {
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    padding: 10px 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    a,
    p {
        margin: 0 10px 0 0
    }

    .crumbs-dot {
        color: var(--active)
    }
}

@media only screen and (min-width:800px) {
    #content {
        min-height: calc(100vh - 160px)!important
    }
    .project #content {
        min-height: calc(100vh - 190px)!important
    }
}

@media only screen and (min-width:450px) and (max-width:800px) {
    #content {
        min-height: calc(100vh - 230px)!important
    }
    .project #content {
        min-height: calc(100vh - 230px)!important
    }
}

@media only screen and (max-width:450px) {
    #content {
        min-height: calc(100vh - 330px)!important
    }
    .project #content {
        min-height: calc(100vh - 330px)!important
    }
}

#content.fixed {
    box-sizing: border-box;
    margin-top: 80px;
    z-index: 40!important;
    -webkit-animation-name: contentmm;
    animation-name: contentmm;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
}

#content.unfix {
    -webkit-animation-name: contentmmunfix;
    animation-name: contentmmunfix;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
}

::-webkit-scrollbar {
    width: 15px
}

::-webkit-scrollbar-track {
    background: var(--head)
}

::-webkit-scrollbar-thumb {
    background: var(--menu);
    border-radius: 50px;
    border: solid;
    border-width: 3px;
    border-color: var(--head)
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--active)
}

::-webkit-scrollbar-thumb:active {
    background: var(--scroll)
}

#site-footer {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: var(--head);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    p {
        margin: 0!important
    }

    .left-div,
    .right-div,
    .social,
    .index {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .left-div .copy p {
        font-size: 0.85rem;
        color: var(--subtitle)
    }

    .index .privacy {
        margin-left: 25px
    }

    .social {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        gap: 25px;

        a {
            width: 30px!important;
            height: 30px;
            text-decoration: none;

            svg {
                fill: var(--font);
            }
        }

        a:hover svg {
            fill: var(--accent)
        }

        .space {
            width: 25px
        }
    }
}

@media only screen and (min-width:850px) {
    #site-footer {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 80px;

        .right-div {
            -webkit-box-pack: right;
            -ms-flex-pack: right;
            justify-content: right;

            .right {
                margin-left: 25px
            }
        }

        .left {
            margin-right: 25px
        }
    }
}

@media only screen and (min-width:450px) and (max-width:850px) {
    #site-footer {
        height: 150px;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;

        .left-div,
        .right-div {
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
        }

        .right-div {
            -webkit-box-orient: horizontal;
            -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
            margin-bottom: 25px
        }

        .copy {
            margin-left: 25px;
        }
        .social {
            margin-right: 25px
        }
    }
}

@media only screen and (max-width:450px) {
    #site-footer {
        height: 250px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;

        .right-div {
            margin-bottom: 25px
        }

        .left-div,
        .right-div {
            margin: 0 25px;

            .left,
            .right {
                width: 100%;
                -webkit-box-pack: left!important;
                -ms-flex-pack: left!important;
                justify-content: left!important;
            }
    
            .email,
            .index,
            .social {
                margin-bottom: 25px
            }
        }
    }
}

.pages .right .pages,
.privacy .right .privacy {
    a {
        text-decoration: underline!important
    }

    a:active {
        text-decoration: none!important
    }
}

.sub-div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 15px;
    padding: 0 15px;
    column-gap: 7px;
    row-gap: 3px;

    p,
    span {
        margin: 0;
        color: var(--subtitle)
    }
}

.new {
    color: var(--font)!important;
    background: var(--head);
    padding: 2px 7px;
    border-radius: var(--border-radius);
    -webkit-border-radius: var(--border-radius);
    -moz-border-radius: var(--border-radius);
    -ms-border-radius: var(--border-radius);
    -o-border-radius: var(--border-radius);
}

.dot {
    color: var(--active)!important;
    -webkit-user-select: none;
    user-select: none;
    font-size: 1rem!important;
}

.about-div {
    box-sizing: border-box;
    max-width: 800px;
    margin: 0 auto;

    .about {
        padding: 0 0 15px 15px;
        border-left: solid 2px var(--menu);
        border-bottom-left-radius: 15px;
        margin: 0 15px;

        h3 {
            margin: 45px 0 20px
        }

        p {
            margin: 15px 0 20px
        }
    }
}

.icon-link .icon {
    fill: var(--font)
}

.icon-link:hover {
    p {
        color: var(--accent)!important
    }
}

.icon-link:active {
    .icon {
        fill: var(--accent)
    }

    p {
        text-decoration: none;
    }
}

#lightdark {
    svg {
        display: block;
        width: 20.8px;
        fill: var(--font)
    }
}

#lightdark.dark {
    svg.dark {
        display: none
    }
}

#lightdark.light {
    svg.light {
        display: none
    }
}

.about {
    max-width: 800px;
    padding: 0 15px 15px;
    margin: auto;

    h3 {
        margin: 35px 0 25px!important;
    }

    .about-p {
        padding: 0 0 15px 15px;
        border-left: solid 2px var(--menu);
        border-bottom-left-radius: 15px;
    }

    .about-p p:last-child {
        margin-bottom: 0
    }
}

.ext .ext-svg {
    width: 20px;
    height: 20px;
    fill: var(--subtitle)!important;
    margin: 0 0 -4px 3px
}