@font-face {
    font-family: 'times_new_romanregular';
    src: url('/fonts/Times Roman.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@keyframes fadeout {
    0%   {opacity: 1;}
    100% {opacity: 0;}
}
@keyframes zoomin {
    0%   {transform: translateX(-1.4rem) scale(0);}
    100% {transform: translateX(-1.4rem) scale(1);}
}

@view-transition {navigation: auto;}


*, ::after, ::before {
    margin: 0; padding: 0; font-weight: normal; box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
}

html {font-size: clamp(24px, 1.5vw, 30px); overflow: hidden; overflow-y: scroll; scroll-behavior: smooth;}
body {
    color: rgba(255, 255, 255, 0.8); 
    font-family: 'Times New Roman','Times', 'times_new_romanregular', serif;
    display: flex; 
    flex-direction: column; 
    justify-content: center;
    min-height: 100vh;
    min-height: 100lvh;
    position: relative;
    background: #032159;
}
@-moz-document url-prefix() {
    body {font-family: 'times_new_romanregular','Times New Roman','Times', serif;}
}
body.android {font-family: 'times_new_romanregular','Times New Roman','Times', serif;}

/* --------------------------- */
/* bananas
/* --------------------------- */

#bananaleft, #bananaright {
    max-width: 650px!important; 
    pointer-events: none; 
    transition: transform 0.7s ease-in-out; 
    transform: translateX(-100%); 
    position: fixed; 
    width: 24vw!important; 
    left: 0; 
    top: calc(100px + 8vh); 
    height: calc(92vh - 100px); 
    opacity: 0.25; 
    z-index: -1;
    object-fit: cover; 
    object-position: 100% 0%;
    pointer-events: none;
    user-select: none;
}
#bananaright {left: auto; right: 0; object-position: 0% 0%; transform: translateX(100%);}
.loaded #bananaleft, .loaded #bananaright {transform: translateX(0%);}

/* --------------------------- */
/* general
/* --------------------------- */

img {max-width: 100%;}
a {
    color: rgba(255, 255, 255,0.8); 
    text-decoration: none;
    background-image: linear-gradient(rgba(255,255,255,0.45), rgba(255,255,255,0.45)),linear-gradient(rgba(255,255,255,0.45), rgba(255,255,255,0.45));
    background-position: 0% calc(50% + 0.5em);
    background-repeat: no-repeat;
    background-size: 100% 1px, 0% 1px;
    transition: background-size .3s;
}
a:hover {background-size: 100% 1px, 100% 1px;}

#content .fullscreen, #splash {align-items: center; display: flex; justify-content: center; min-height: 100%; position: relative; z-index: 9;}
.imageholder {background: #032159; position: relative; display: block;}
.imageholder::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(/img/checker.svg);
    z-index: 1;
    opacity: 0.6;
    background-attachment: fixed;
}
.lightbox-youtube.hasimage .imageholder::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiCiAgIHhtbG5zOnNvZGlwb2RpPSJodHRwOi8vc29kaXBvZGkuc291cmNlZm9yZ2UubmV0L0RURC9zb2RpcG9kaS0wLmR0ZCIKICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiCiAgIHZpZXdCb3g9IjAgMCAzMTcuMTAwMDEgOTguMDk5OTk4IgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcxNSIKICAgc29kaXBvZGk6ZG9jbmFtZT0ieW91dHViZS5zdmciCiAgIHdpZHRoPSIzMTcuMTAwMDEiCiAgIGhlaWdodD0iOTguMDk5OTk4IgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkyLjUgKDIwNjBlYzFmOWYsIDIwMjAtMDQtMDgpIj4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGEyMSI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGRlZnMKICAgICBpZD0iZGVmczE5IiAvPgogIDxzb2RpcG9kaTpuYW1lZHZpZXcKICAgICBwYWdlY29sb3I9IiNmZmZmZmYiCiAgICAgYm9yZGVyY29sb3I9IiM2NjY2NjYiCiAgICAgYm9yZGVyb3BhY2l0eT0iMSIKICAgICBvYmplY3R0b2xlcmFuY2U9IjEwIgogICAgIGdyaWR0b2xlcmFuY2U9IjEwIgogICAgIGd1aWRldG9sZXJhbmNlPSIxMCIKICAgICBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMCIKICAgICBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIgogICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMjU2MCIKICAgICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSIxMzkxIgogICAgIGlkPSJuYW1lZHZpZXcxNyIKICAgICBzaG93Z3JpZD0iZmFsc2UiCiAgICAgZml0LW1hcmdpbi10b3A9IjAiCiAgICAgZml0LW1hcmdpbi1sZWZ0PSIwIgogICAgIGZpdC1tYXJnaW4tcmlnaHQ9IjAiCiAgICAgZml0LW1hcmdpbi1ib3R0b209IjAiCiAgICAgaW5rc2NhcGU6em9vbT0iMi43Njg5Mjc4IgogICAgIGlua3NjYXBlOmN4PSI3My43MjIzMDEiCiAgICAgaW5rc2NhcGU6Y3k9IjQ3LjgiCiAgICAgaW5rc2NhcGU6d2luZG93LXg9IjAiCiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjAiCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMSIKICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJzdmcxNSIgLz4KICA8ZwogICAgIGlkPSJnMTEiCiAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZiIKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTczLC00LjcpIj4KICAgIDxwYXRoCiAgICAgICBkPSJtIDIyNy45LDk5LjcgYyAtMy4xLC0yLjEgLTUuMywtNS4zIC02LjYsLTkuNyAtMS4zLC00LjQgLTEuOSwtMTAuMiAtMS45LC0xNy41IHYgLTkuOSBjIDAsLTcuMyAwLjcsLTEzLjMgMi4yLC0xNy43IDEuNSwtNC41IDMuOCwtNy43IDcsLTkuNyAzLjIsLTIgNy4zLC0zLjEgMTIuNCwtMy4xIDUsMCA5LjEsMSAxMi4xLDMuMSAzLDIuMSA1LjMsNS4zIDYuNyw5LjcgMS40LDQuNCAyLjEsMTAuMyAyLjEsMTcuNiB2IDkuOSBjIDAsNy4zIC0wLjcsMTMuMSAtMi4xLDE3LjUgLTEuNCw0LjQgLTMuNiw3LjYgLTYuNyw5LjcgLTMuMSwyIC03LjMsMy4xIC0xMi41LDMuMSAtNS40LDAuMSAtOS42LC0xIC0xMi43LC0zIHogTSAyNDUuMiw4OSBjIDAuOSwtMi4yIDEuMywtNS45IDEuMywtMTAuOSBWIDU2LjggYyAwLC00LjkgLTAuNCwtOC41IC0xLjMsLTEwLjcgLTAuOSwtMi4zIC0yLjQsLTMuNCAtNC41LC0zLjQgLTIuMSwwIC0zLjUsMS4xIC00LjQsMy40IC0wLjksMi4zIC0xLjMsNS44IC0xLjMsMTAuNyB2IDIxLjMgYyAwLDUgMC40LDguNyAxLjIsMTAuOSAwLjgsMi4yIDIuMywzLjMgNC41LDMuMyAyLjEsMCAzLjYsLTEuMSA0LjUsLTMuMyB6IE0gNDY0LjQsNzIuNyB2IDMuNSBsIDAuNCw5LjkgYyAwLjMsMi4yIDAuOCwzLjggMS42LDQuOCAwLjgsMSAyLjEsMS41IDMuOCwxLjUgMi4zLDAgMy45LC0wLjkgNC43LC0yLjcgMC45LC0xLjggMS4zLC00LjggMS40LC04LjkgbCAxMy4zLDAuOCBjIDAuMSwwLjYgMC4xLDEuNCAwLjEsMi40IDAsNi4zIC0xLjcsMTEgLTUuMiwxNC4xIC0zLjUsMy4xIC04LjMsNC43IC0xNC42LDQuNyAtNy42LDAgLTEyLjksLTIuNCAtMTUuOSwtNy4xIC0zLC00LjcgLTQuNiwtMTIuMSAtNC42LC0yMiBWIDYxLjYgYyAwLjM0LC0xNyAzLjMzLC0yOS40NSAyMC45LC0yOS41IDUuMywwIDkuMywxIDEyLjEsMi45IDIuOCwxLjkgNC44LDQuOSA2LDkgMS4yLDQuMSAxLjcsOS43IDEuNywxNi45IHYgMTEuNyBoIC0yNS43IHogbSAyLC0yOC44IGMgLTAuOCwxIC0xLjMsMi41IC0xLjYsNC43IC0wLjMsMi4yIC0wLjQsMTAgLTAuNCwxMCB2IDQuOSBoIDExLjIgdiAtNC45IGMgMCw0LjkgLTAuMSwtNy43IC0wLjQsLTEwIC0wLjMsLTIuMyAtMC44LC0zLjkgLTEuNiwtNC44IC0wLjgsLTAuOSAtMiwtMS40IC0zLjYsLTEuNCAtMS43LDAuMSAtMi45LDAuNiAtMy42LDEuNSB6IE0gMTkwLjUsNzEuNCAxNzMsOC4yIGggMTUuMyBjIDAsMCA3LjE1LDMxLjcgOS42LDQ2LjYgaCAwLjQgYyAyLjc4LC0xNS44MiA5LjgsLTQ2LjYgOS44LC00Ni42IGggMTUuMyBsIC0xNy43LDYzLjEgdiAzMC4zIEggMTkwLjYgViA3MS40IFoiCiAgICAgICBpZD0icGF0aDYiCiAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIgogICAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZiIgLz4KICAgIDxwYXRoCiAgICAgICBpZD0iQSIKICAgICAgIGQ9Im0gMzExLjUsMzMuNCB2IDY4LjMgaCAtMTIgbCAtMS4zLC04LjQgaCAtMC4zIGMgLTMuMyw2LjMgLTguMiw5LjUgLTE0LjcsOS41IC0xMS43NywtMC4wMyAtMTMuMDgsLTEwIC0xMy4yLC0xOC40IHYgLTUxIGggMTUuNCB2IDUwLjEgYyAwLDMgMC4zLDUuMiAxLDYuNSAxLjQyLDIuNzggNS4xLDIuMDcgNy4xLDAuNyBhIDgsOCAwIDAgMCAyLjcsLTMuMSBWIDMzLjQgWiIKICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiCiAgICAgICBzdHlsZT0iZmlsbDojZmZmZmZmIiAvPgogICAgPHBhdGgKICAgICAgIGQ9Ik0gMzUzLjMsMjAuNiBIIDMzOCB2IDgxLjEgSCAzMjMgViAyMC42IEggMzA3LjcgViA4LjIgaCA0NS41IHYgMTIuNCB6IG0gODcuOSwyMy43IEMgNDQwLjMsNDAgNDM4LjgsMzYuOSA0MzYuNywzNC45IDQzNC42LDMzIDQzMS44LDMyIDQyOC4xLDMyIGEgMTQuMSwxNC4xIDAgMCAwIC03LjksMi40IGMgLTIuNSwxLjYgLTQuMywzLjcgLTUuNyw2LjMgaCAtMC4xIHYgLTM2IGggLTE0LjggdiA5Ni45IGggMTIuNyBsIDEuNiwtNi41IGggMC4zIGEgMTQsMTQgMCAwIDAgNS4zLDUuNSBjIDIuNCwxLjMgNSwyIDcuOSwyIDUuMiwwIDksLTIuNCAxMS41LC03LjIgMi40LC00LjggMy43LC0xMi4zIDMuNywtMjIuNCBWIDYyLjIgYyAwLC03LjYgLTAuNSwtMTMuNiAtMS40LC0xNy45IHogbSAtMTQuMSwyNy45IGMgMCw1IC0wLjIsOC45IC0wLjYsMTEuNyAtMC40LDIuOCAtMS4xLDQuOCAtMi4xLDYgLTEsMS4yIC0yLjMsMS44IC0zLjksMS44IC0zLjEsLTAuMSAtNC44NiwtMS41IC02LjEsLTMuNiBWIDQ5LjMgYyAwLjUsLTEuOSAxLjQsLTMuNCAyLjcsLTQuNiAyLjIsLTIuNDcgNS45NiwtMi41IDcuNywwIDAuOSwxLjIgMS40LDMuMyAxLjgsNi4yIDAuMywyLjkgMC41LDcgMC41LDEyLjQgeiIKICAgICAgIGlkPSJwYXRoOSIKICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiCiAgICAgICBzdHlsZT0iZmlsbDojZmZmZmZmIiAvPgogIDwvZz4KICA8dXNlCiAgICAgeGxpbms6aHJlZj0iI0EiCiAgICAgeD0iNzguOTAwMDAyIgogICAgIGlkPSJ1c2UxMyIKICAgICB5PSIwIgogICAgIHdpZHRoPSIxMDAlIgogICAgIGhlaWdodD0iMTAwJSIKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTczLC00LjcpIgogICAgIHN0eWxlPSJmaWxsOiNmZmZmZmYiIC8+Cjwvc3ZnPgo=') calc(100% - 0.6rem) calc(100% - 0.6rem) / auto 1rem no-repeat;
    z-index: 1;
    opacity: 0.8;
}

/* --------------------------- */
/* background
/* --------------------------- */

#noise {
    background: black url("data:image/svg+xml,%3C!-- svg: first layer --%3E%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='3' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    min-height: 100lvh; 
    position: fixed;
    width: 100%;
    z-index: 3;
    top: 0; 
    left: 0;
    opacity: 0.15;
    pointer-events: none;
}
html.portfolios #noise {opacity: 0.1;}
.posts body, .portfolios body {justify-content: flex-start;}

/* --------------------------- */
/* splash
/* --------------------------- */

body.showsplash #splash {
    opacity: 1;
    animation-name: fadeout; 
    animation-delay: 1.4s; 
    animation-duration: 0.3s; 
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    background: #171f27; 
    color: rgba(255, 255, 255,0.8);
}
#splash {
    position: fixed;
    top: 0; 
    left: 0; 
    z-index: 21; 
    width: 100%; 
    height: 100vh;
    pointer-events: none; 
    opacity: 0;
}
#splash a {
    background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)),linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5));
    background-position: 0 calc(50% + 0.47em);
    background-size: 100% 0.05em, 100% 0.05em!important;
}

#splash:after {
    content: "";
    position: absolute;
    inset: 1rem;
    background: #171f27 url(/img/waves.svg) 50% 50% / 3.5rem auto repeat;
    mask: radial-gradient(1.5rem at 1.5rem 1.5rem,#0000 98%,#000) -1.5rem -1.5rem;
    z-index: 1;
} 
#splash:before {
    content: "";
    position: absolute;
    inset: 1rem;
    background: #252e38;
    mask:
    radial-gradient(1.5rem at 1.5rem 1.5rem,#0000 calc(98% - 2px),#000 calc(100% - 2px) 98%,#0000) -1.5rem -1.5rem,
    linear-gradient(90deg,#000 4px,#0000 0) -2px 50% /100% calc(100% - 3rem + 2px) repeat-x,
    linear-gradient(      #000 4px,#0000 0) 50% -2px/calc(100% - 3rem + 2px) 100% repeat-y;
    outline: red 1px solid;
    z-index: 2;
}

#splash > div {
    padding: 0 2rem 1rem 1.25rem;
    animation-name: fadeout; 
    animation-delay: 1s; 
    animation-duration: 0.3s; 
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    margin-top: -2rem;
    z-index: 3;
    position: relative;
}
#splash > div > span.medium {display: inline-block; margin: 0 0.15em;}
#splash > div > span.medium span {display: inline-block; margin: 0 0.07em 0 0;}
#splash > div > span.medium span:first-child {margin-right: 0.1em;}
@media screen and (max-width: 600px) {
    #splash > div > span.medium {display: block; margin: 0.15em 0 0.15em 0.15em;}
    #splash > div {text-align: center;}
}

/* --------------------------- */
/* fontsizes
/* --------------------------- */

body {font-size: 1rem; line-height: 1.25;}
h3, .small {padding-bottom: 0.2rem; font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.3em; display: inline-block;}
.posts #content > p:first-of-type, blockquote, .smallmedium {font-size: 1.42rem;}
.medium, h1 {font-size: 3.33rem; line-height: 1;}
h1 {padding-bottom: 0.4em;}
h2 {padding-bottom: 0.6em; padding-top: 0.6em;}
h3 {padding-bottom: 0.6em; padding-top: 0.6em;}
.large {font-size: 6.5rem;}

.credentials {margin-block: 3rem -3rem; text-align: center;}
.credentials > div {padding-bottom: 1rem;}

/* --------------------------- */
/* edge links
/* --------------------------- */

#scrolltotop, #logo, #menu, #nextlink {position: fixed; top: 1rem; z-index: 6;}
#scrolltotop, #logo, #menu {text-transform: lowercase;}
#menu {right: 1.25rem; position: absolute;}
#menu li {list-style: none; display: inline;}
#menu li a {display: inline-block; margin: 0 0 0 clamp(0rem,1.75vw,1rem);}
#logo {left: 1.25rem; top: 1rem; line-height: 1; display: block; border: 1px solid rgba(255, 255, 255,0.4); opacity: 0.8; background: none;}
#logo > * {width: 2.25rem; height: auto; display: block; opacity: 1; }
#logo:hover > * {transform: rotateY(-360deg); transition: transform 0.3s ease-in-out;}
#logo::after {
    content: "";
    width: calc(2.25rem + 2px);
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255,0.4);
    position: absolute;
    top: 0;
    margin: -1px;
    clip-path: circle(0% at 0% 0%);
    transition: clip-path 0.25s linear;
}
#logo:hover::after {
    clip-path: circle(145% at 0% 0%);
}
#scrolltotop {top: auto; bottom: 1rem; right: 1.25rem; opacity: 0; pointer-events: none; transition: background-size 0.3s ease-in-out, opacity 0.3s ease-in-out;}
#nextlink {top: auto; bottom: 1rem; left: 1.25rem; right: auto; max-width: calc(65% - 30px); text-transform: lowercase; display: none;}
#nextlinktop, #prevlinktop {top:50vh; left: 1.25rem; position: fixed; opacity: 1; transform: rotate(-90deg) translateX(-50%); transform-origin: 0% 0%; z-index: 5;}
#nextlinktop {left: auto; right: 1.25rem; transform-origin: 100% 0%; transform: rotate(90deg) translateX(50%);}
#prevlink {display: none;}
.scrolled #scrolltotop {opacity: 1; pointer-events: all; white-space: nowrap;}


/* --------------------------- */
/* content
/* --------------------------- */

#content {width: 100%; max-width: 32rem; text-align: left; margin: 0 auto; padding: 9rem 1.25rem 12rem; position: relative; z-index: 3;}
#content h1 {text-align: center; position: relative; z-index: 1;}
#content h2 {padding-top: 1em;}
body:not(.home) #content h1 {padding-bottom: .7em;}
#content p, #content ol, #content ul, #content table {padding-bottom: 1.25em;}
#content pre {max-width: 100%; overflow: auto; font-size: 55%; margin-block: 0.75rem 2rem; padding: 1rem; background: rgba(0, 0, 0, 0.2); color: rgba(255, 255, 255,0.9)}
blockquote {margin-top: 0.5em; border-left: 0.2rem solid rgba(255,255,255,0.3); margin-bottom: 1.35em; padding-left: clamp(1rem, 2.1vw, 2rem);}
#content img {width: 100%; max-width: 100%; margin-bottom: 0.2em;}
#content p img {display: block;}
#content ul {margin-left: 2em}
#content ol {margin-left: 2em;}
#content p:last-child {padding-bottom: 0;}
#content .fullscreen {width: 100%; left: 0; min-height: 100vh;}
.small.date {margin: 1rem 0 0.15rem; display: inline-block;}


.home:not(.error) #content {max-width: 40rem; text-align: center;}

/* --------------------------- */
/* portfolios
/* --------------------------- */

.portfolios h1 {margin: 0 -15vw; padding-bottom: .35em!important;}
.portfolios h1 + p {margin-top: 2em;}
.posts .fullscreen h1 {position: relative; margin: 0 -15vw; padding: 1.2em 0 1.4em!important;}
#content .fullscreen > a {display: block; background: none;}
.posts #content,
.portfolios #content {padding-top: 0;}
.portfolios #content .svg {width: clamp(0rem, 36rem, 95vh); max-width: 1000px;}

@keyframes bounce2 {
	0%, 20%, 50%, 80%, 100% {transform: rotate(90deg) translateX(0);}
	40% {transform: rotate(90deg) translateX(-1rem);}
	60% {transform: rotate(90deg) translateX(-0.5rem);}
}

#scrolldown {position: absolute; left: 50%; margin-top: -15vh;}
#scrolldown:before {content: "»"; transform: rotate(90deg); position: absolute; color: rgba(255, 255, 255,0.5); font-size: 7rem; margin-left: -1.25rem; margin-top: -2rem; opacity: 0.25; animation: bounce2 2.5s ease infinite;}
.scrollstart #scrolldown:before {animation-play-state: paused;}
#postdate {padding-bottom: 1.75em; font-size: 0.9rem; display: block;}
html.portfolios #scrolldown:before {color: rgba(255, 255, 255,0.35)}

.btn {
    display: inline-block; 
    padding: 0.35em 1em 0.45em; 
    text-decoration: none; 
    border: 1px solid rgba(255, 255, 255,0.4);
    background: transparent;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}
.btn:hover {border-color: rgba(255, 255, 255,0.6);}
.btn > span {
    top: 50%;
    left: 50%;
    border-radius: 100%;
    background: rgba(255,255,255,0.05);
    position: absolute;
    display: block;
    width: 0%;
    transition: width 0.3s ease-in-out;
    transform: translate(-50%, -50%);
    aspect-ratio: 1;
    z-index: -1;
}
.btn:hover > span {
    width: 101%;
}

.threecols {display: flex; justify-content: space-between;}
.threecols > div {padding-right: 1.5rem;}

.page {min-height: 100lvh; display: flex; justify-content: center; flex-direction: column;}



/* --------------------------- */
/* video
/* --------------------------- */

a.hasimage {position: relative; display: block;}
.imageholder + em, a.hasimage + em {font-size: 0.95rem;}
a.lightbox-youtube.hasimage img {display: block;}
a.lightbox-youtube.hasimage::after,
a.lightbox-youtube.hasimage::before {
    content: "";
    width: 5rem;
    height: 5rem;
    background: #0f3068; 
    border-radius: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    transition: all 0.15s ease-in-out;
}
a.lightbox-youtube.hasimage::after {
    width: 0; 
    height: 0; 
    border-top: 1rem solid transparent;
    border-bottom: 1rem solid transparent;
    border-left: 1.75rem solid rgba(255, 255, 255,0.8);
    border-radius: 0;
    margin-left: 0.25rem;
    background: transparent;
}
a.lightbox-youtube.hasimage:hover::before {transform: translate(-50%, -50%) scale(1.075);}


/* --------------------------- */
/* overlay
/* --------------------------- */

#overlay {
    position: relative;
    left: 0;
    background: red;
    z-index: 5;
    margin-top: -6rem;
    padding: 8rem 4.25rem 11rem 4.25rem;
}
#overlay > div {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(0rem, 10vw, 5rem) 3vw;
    align-items: center;
    max-width: 50rem;
    margin: 0 auto;
}
#overlay a {background: url() center center / cover no-repeat; display: block; background: rgba(255, 255, 255, 0.037); overflow: hidden; width: 100%; padding-block: 11%;}
#overlay a img {display: block; overflow: hidden; border-radius: clamp(0rem, 0.5vw, 0.5rem); margin-inline: 15%; width: 70%;}
#overlay a.desktop {max-width: 50rem;}
#overlay a.mobile {width: calc(50% - 1.51vw); max-width: calc(25rem - 1.5vw); position: relative; padding-block: 8%;}
#overlay a.mobile img {border-radius: clamp(0rem, 1vw, 1rem); margin-inline: 31%; width: 38%;}

#warrantcanary {
    width: 2.5rem !important;
    position: relative;
    cursor: pointer;
    display: none;
    left: 0;
    display: inline-block;
    margin-right: -2.5rem;
    bottom: 1.2rem;
    opacity: 0.8;
    transform: translateX(-1.4rem) scale(0);    
    animation-name: zoomin; 
    animation-delay: 0; 
    animation-duration: 0.15s; 
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

/* --------------------------- */
/* responsive
/* --------------------------- */

.mobile {display: none;}

@media screen and (max-width: 1300px) {
    #logo, #scrolltotop, #nextlink {position: absolute;}
    #scrolltotop {pointer-events: all; z-index: 10; white-space: nowrap;}
    #innerbody {position: relative;}
    .portfolios h1 {margin: 0;}
    .posts .fullscreen h1 {padding: 2.5em 0 2.7em!important;}
    #nextlink .mobile {display: inline;}
    #nextlink .desktop {display: none;}
    .large {font-size: clamp(3.33rem, 13vw, 6.5rem);}
    .medium {font-size: 2.5rem;}
    .portfolios #content .svg {max-width: 100vw;}
    #postdate {font-size: clamp(0.7rem,2vw,0.9rem);}
}

@media screen and (max-width: 1100px) {
    #nextlinktop, #prevlinktop {opacity: 0; pointer-events: none;}
    .posts .fullscreen h1 {max-width: 100%;}
    #nextlink {display: block;}
    #overlay {padding-inline: 1.25rem;}
    .home:not(.error) #bananatree {display: none;}
}

@media screen and (max-width: 750px) {
    #bananaleft, #bananaright {display: none;}
    #content .fullscreen {min-height: 0;}
    #scrolldown::before, #scrolldown {display: none!important;}
    .portfolios #content {padding-top: 110vw;}
    .portfolios #content .fullscreen {align-items: flex-start;}
    .portfolios #content .fullscreen .stage {margin-top: -85vw; aspect-ratio: 1; height: auto!important;}
    .posts .fullscreen h1 {padding: 9.5rem 0 5rem!important;}
    #content h1, .posts .fullscreen h1, p, .credentials {text-align: left!important;}
    html.home #content h1, html.home p {text-align: center!important;} 
    html.home:not(.error) #content > * {margin-left: 0;}
    #content em {transform-origin: left center;}
    #overlay {padding-top: 6rem;}
    #overlay > div {gap: 17vw 3vw;}
    #overlay a {padding: 0;}
    #overlay a.desktop {background: none;}
    #overlay a img {margin-inline: 0; width: 100%;}
    #overlay a.mobile {padding-block: 11%;}
    #overlay a.mobile img {margin-inline: 23.5%; width: 53%;}
}

@media screen and (max-width: 600px) {
    .threecols {flex-direction: column; gap: 1.75rem;}
}

@media screen and (max-width: 480px) {
    html {font-size: 5vw;}
}

/* --------------------------- */
/* lightbox
/* --------------------------- */


#lightbox,
body::before {
    opacity: 0; 
    pointer-events: none;
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0;
    transition: all 0.3s ease-in-out;
}
#lightbox {position: fixed; cursor: pointer; z-index: 9999999; line-height: 0;}
body::before {
    backdrop-filter: grayscale(1) blur(2px); 
    transition: all 0.3s ease-in-out;
    background: rgba(0,0,0,0.7);
    z-index: 11;
    content: "";
}
body.lightbox_visible #lightbox,
body.lightbox_visible::before {opacity: 1; pointer-events: all;}
#lightbox .img {
    position: relative; 
    top: 50%;
    left: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    max-width: 100%;
    max-height: 100%;
}
#lightbox .img img {opacity: 0; pointer-events: none; width: auto;}
@media screen and (min-width: 1200px) {
    #lightbox .img {
        max-width: 1200px;
    }
}
@media screen and (min-height: 1200px) {
    #lightbox .img {
        max-height: 1200px;
    }
}
#lightbox span {display: block; position: fixed; bottom: 13px; height: 1.5em; line-height: 1.4em; width: 100%; text-align: center; color: white; text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
}

#lightbox span {display: none;}

#lightbox .videoWrapperContainer {
    position: relative; 
    top: 50%;
    left: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 1200px;
    max-width: 100%;
    max-height: 100%;
}
#lightbox .videoWrapperContainer .videoWrapper {
    height: 0;
    line-height: 0;
    margin: 0;
    padding: 0;
    position: relative;
    padding-bottom: 56.333%; /* custom */
    background: black;
} 
#lightbox .videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}   
#lightbox #prev, #lightbox #next {height: 50px; line-height: 36px; display: none; margin-top: -25px; position: fixed; top: 50%; padding: 0 15px; cursor: pointer; text-decoration: none; z-index: 99; color: white; font-size: 60px;}
#lightbox.gallery #prev, #lightbox.gallery #next {display: block;}
#lightbox #prev {left: 0;}
#lightbox #next {right: 0;}
#lightbox #close {height: 50px; width: 50px; position: fixed; cursor: pointer; text-decoration: none; z-index: 99; right: 0; top: 0; background: none!important;}
#lightbox #close:after, #lightbox #close:before {
position: absolute; 
margin-top: 22px; 
margin-left: 14px;
content: ""; 
height: 2px; 
background: white; 
width: 23px;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
}
#lightbox #close:after {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
#lightbox, #lightbox * {
    -webkit-user-select: none;  
    -moz-user-select: none;    
    -ms-user-select: none;      
    user-select: none;
}

/* LENIS */

html.lenis, html.lenis body {height: auto;}
.lenis.lenis-smooth {scroll-behavior: auto !important;}
.lenis.lenis-smooth [data-lenis-prevent] {overscroll-behavior: contain;}
.lenis.lenis-stopped {overflow: hidden;}
.lenis.lenis-smooth iframe {pointer-events: none;}