:root {
	--black: #000;
	--gray: #CCC;
	--white: #FFF;
	--brown: #542f19;
	--size: 20px;
	--half: 10px;
	--border: 3px;
	--heading-font: 'AllerDisplay', Verdana, Arial, sans-serif;
	--body-font: 'Aller', Verdana, Arial, sans-serif;
	--bold-font: 'AllerBold', Verdana, Arial, sans-serif;
}

@font-face {
    font-family: 'AllerBold';
    src: url('fonts/aller_bd-webfont.woff2') format('woff2'),
         url('fonts/aller_bd-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Aller';
    src: url('fonts/aller_rg-webfont.woff2') format('woff2'),
         url('fonts/aller_rg-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'AllerDisplay';
    src: url('fonts/allerdisplay-webfont.woff2') format('woff2'),
         url('fonts/allerdisplay-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html, body {
	margin: 0;
	padding: 0;
    font-size: 19px;
}

body {
    background: var(--brown) url('imgs/wood.webp') top center fixed; 
    color: var(--brown);
    font-family: var(--body-font);
    font-size: var(--size);
    line-height: 1.5;
}
body.nowebp {
    background-image: url('imgs/wood.png');
}



/***************** DEFAULTS *****************/
img {
    max-width: 100%;
    height: auto!important;
}
a {
    color: var(--brown);
}
a:hover {
    color: var(--black);
}
h1, h2, h3, h5, h5, h6 {
    font-family: var(--heading-font);
    font-weight: normal;
    color: var(--brown);
    line-height: 1.3;
    margin: var(--size) 0;
    text-align: center;
    font-size: 2rem;
}
h1, .nowhite h2, .nowhite h3, .nowhite h4, .nowhite h5, .nowhite h6,
.nowhite p, footer p {
    text-shadow: var(--brown) 3px 0px 0px, 
    var(--brown) 2.83487px 0.981584px 0px, 
    var(--brown) 2.35766px 1.85511px 0px, 
    var(--brown) 1.62091px 2.52441px 0px, 
    var(--brown) 0.705713px 2.91581px 0px, 
    var(--brown) -0.287171px 2.98622px 0px, 
    var(--brown) -1.24844px 2.72789px 0px, 
    var(--brown) -2.07227px 2.16926px 0px, 
    var(--brown) -2.66798px 1.37182px 0px, 
    var(--brown) -2.96998px 0.42336px 0px, 
    var(--brown) -2.94502px -0.571704px 0px, 
    var(--brown) -2.59586px -1.50383px 0px, 
    var(--brown) -1.96093px -2.27041px 0px, 
    var(--brown) -1.11013px -2.78704px 0px, 
    var(--brown) -0.137119px -2.99686px 0px, 
    var(--brown) 0.850987px -2.87677px 0px, 
    var(--brown) 1.74541px -2.43999px 0px, 
    var(--brown) 2.44769px -1.73459px 0px, 
    var(--brown) 2.88051px -0.838247px 0px;
}
strong {
    font-family: var(--bold-font);
    font-weight: normal;
}


/***************** COLOR AND SIZE EFFECTS *****************/
a {
    -webkit-transition: color 0.5s ease;
    transition: color 0.5s ease;
}
svg {
    -webkit-transition: fill 0.5s ease, transform 0.5s ease;
    transition: fill 0.5s ease, transform 0.5s ease;
}


/***************** SCROLL EFFECTS *****************/
.js-scroll {
    opacity: 0;
    transition: opacity 0.5s;
}
.js-scroll.scrolled {
    opacity: 1;
}
.scrolled.fade-in {
    animation: fade-in 1s ease-in-out both;
}
.scrolled.fade-in-bottom {
    animation: fade-in-bottom 1s ease-in-out both;
}
.scrolled.slide-left {
    animation: slide-in-left 1s ease-in-out both;
}
.scrolled.slide-right {
    animation: slide-in-right 1s ease-in-out both;
}
@keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes fade-in-bottom {
    0% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}



/***************** HEADER *****************/
header {
    text-align: center;
    padding: 0 Calc(var(--size) * 2);
    min-height: 102vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: Calc(var(--size) * 2);
}
header img {
    display: block;
    margin: 0 auto;
    width: 250px;
}
header h1 {
    color: var(--white);
    font-size: 2.5rem;
}
header h1 span {
    white-space: nowrap;
    display: inline-block;
}
header #scrolldown {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    background: var(--brown);
    border: 1px solid var(--brown);
    color: var(--white);
    border-radius: 50%;
    animation: smoothbounceball 1.5s ease-in-out infinite alternate;
    text-align: center;
}
header #scrolldown svg {
    display: block;
    fill: var(--white);
    width: Calc(var(--size) * 3);
    height: Calc(var(--size) * 3);
}
header #scrolldown:hover {
    animation-play-state: paused;
}
header #scrolldown:hover svg {
    transform: scale(1.1);
}
@keyframes smoothbounceball {
    from { transform: translate3d(0, 0, 0); } 
    to { transform: translate3d(0, 50px, 0); }
}


/***************** MAIN *****************/
.white {
    background: var(--white);
    padding: var(--size) 0;
    margin: 50px 0;
    position: relative;
}
.white::before {
    content: '';
    position: absolute;
    top: -50px;
    left: 0;
    right: 0;
    height: 50px;
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
    background: var(--white);
    border-top: 3px solid var(--brown);
}
.white::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: 0;
    right: 0;
    height: 50px;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    background: var(--white);
    border-bottom: 3px solid var(--brown);
}

.block {
    padding: var(--size) 0;
    margin: 0 auto;
}
.block.contain {
    max-width: 1000px;
    padding: var(--size) Calc(var(--size) * 2);
}

.block.nowhite {
    padding: 50px var(--size);
}
.nowhite h2, .nowhite h3, .nowhite h4, .nowhite h5, .nowhite h6,
.nowhite p, .nowhite a {
    color: var(--white);
}

.cols {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--size);
    list-style: none;
    margin: 0;
    padding: 0;
}
.cols .col-half {
    flex-basis: 50%;
}
.cols .col-third {
    flex-basis: 33.33%;
}
.cols .col-fourth {
    flex-basis: 25%;
}
.cols .col-fifth {
    flex-basis: 20%;
    flex-shrink: 0;
}
.cols .col-fill {
    flex-grow: 1;
}

.profile {
    display: block;
    margin: 0 auto;
    border-radius: 50%;
    border: var(--border) solid var(--brown);
    background: var(--brown);
    max-width: Calc(100% - (var(--border) * 2));
}

.cols.wrap {
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    gap: Calc(var(--size) * 2) var(--size);
    padding: var(--size) 0;
}
.cols.wrap .col-half {
    flex-basis: Calc(50% - (var(--size) / 2));
}
.cols.wrap .col-third {
    flex-basis: Calc(33.33% - (var(--size) * 2 / 3));
}
.cols.wrap .col-fourth {
    flex-basis: Calc(25% - (var(--size) * 3 / 4));
}


.stackAnimWrap {
    overflow: hidden;
}
.stackAnim {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--size);
    list-style: none;
    margin: Calc(var(--size) * 2) 0;
    padding: 0;
    text-align: center;
}
.stackAnim.carousel-ready {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    will-change: transform;
}
.stackAnim.carousel-ready li {
    flex: 0 0 auto;
}
.stackAnim .logo {
    display: block;
    width: 170px;
    height: 120px;
    margin: 0 auto;
    overflow: hidden;
}
.stackAnim .logo img {
    display: block;
    object-fit: contain;
    width: 100%!important;
    height: 100%!important;
    pointer-events: none;
}
.stackAnim .name {
    display: block;
    margin-top: var(--half);
}


label {
    color: var(--white);
}
#filter {
    display: block;
    margin: var(--size) auto Calc(var(--size) * 3);
    background: var(--white);
    color: var(--brown);
    font-family: var(--body-font);
    font-size: var(--size);
    padding: var(--half);
    border-radius: var(--half);
    border: var(--border) solid var(--brown);
    cursor: pointer;
    min-width: 200px;
    transition: color 0.5s ease;
}
#filter:hover {
    color: var(--black);
}
.portfoliosite {
    position: relative;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: opacity 0.5s ease;
}
.portfoliosite.active {
    display: block;
    height: auto;
}
.portfoliosite.visible {
    opacity: 1;
}
.portfoliosite .mockup {
    display: block;
    position: relative;
    background: var(--black);
    border: var(--border) solid var(--black);
    border-radius: var(--half);
    text-decoration: none;
    color: var(--black);
    transition: color 0.5s ease;
}
.portfoliosite .mockup:hover {
    color: var(--brown);
}
.portfoliosite .mobile {
    background: var(--black);
    color: var(--white);
    border-color: var(--black);
    border-bottom-width: 1.5rem;
    position: absolute;
    top: Calc(var(--size) * 1.25);
    right: 0;
    z-index: 50;
}
.portfoliosite .mockup .url {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    gap: 6px;
    padding: 3px 3px 6px 6px;
    font-size: 18px;
}
.portfoliosite .mobile .url {
    padding: 3px 3px 6px;
}
.portfoliosite .mockup .url svg {
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    fill: var(--white);
    width: var(--size);
    height: var(--size);
}
.portfoliosite .mockup .url span {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    background: var(--white);
    border-radius: 4px;
    flex-grow: 1;
    padding: 3px 6px;
}
.portfoliosite .mockup .url span strong {
    display: block;
    flex-grow: 1;
    font-family: var(--body-font);
}
.portfoliosite .mockup .url span svg {
    fill: var(--black);
}
.portfoliosite .mockup:hover .url span svg {
    fill: var(--brown);
}
.portfoliosite .mockup .wrapper {
    display: block;
    overflow: hidden;
    border-radius: var(--half);
}
.portfoliosite .wrapper img {
    transition: transform 0.5s ease;
}
.portfoliosite .wrapper:hover img {
    transform: scale(1.025);
}
.portfoliosite .wrapper img {
    display: block;
    object-fit: cover;
    object-position: top;
    width: 100%!important;
    height: 100%!important;
    pointer-events: none;
}
.portfoliosite .mobile .circle {
    border: 2px solid var(--white);
    width: Calc(var(--size) * 0.75);
    height: Calc(var(--size) * 0.75);
    position: absolute;
    bottom: Calc(var(--size) * -1 - 3px);
    left: 50%;
    border-radius: 50%;
    margin-left: Calc(var(--half) * -1);
    z-index: 55;
}
.portfoliosite .desktop {
    width: 500px;
    max-width: Calc(100% - (var(--border) * 2));
}
.portfoliosite .desktop .wrapper {
    width: 500px;
    max-width: 100%;
    aspect-ratio: 5 / 3;
}
.portfoliosite .mobile {
    width: 200px;
}
.portfoliosite .mobile .wrapper {
    width: 200px;
    height: 275px;
}
.portfoliosite p {
    margin-top: var(--half);
}

.portfolio-gallery {
    position: relative;
}
.portfolio-gallery .navbtn {
    position: absolute;
    top: 50%;
    display: block;
    background: var(--brown);
    border-radius: 50%;
    border: 1px solid var(--brown);
    padding: 0;
    margin: Calc(var(--size) * -3) 0 0;
    text-align: center;
    cursor: pointer;
    z-index: 90;
}
.portfolio-gallery .navbtn svg {
    display: block;
    fill: var(--white);
    width: Calc(var(--size) * 2.5);
    height: Calc(var(--size) * 2.5);
}
.portfolio-gallery .navbtn:hover svg {
    transform: scale(1.1);
}
.portfolio-gallery .navbtn#portfolionext {
    right: Calc(var(--size) * 2);
}
.portfolio-gallery .navbtn#portfolioprev {
    left: Calc(var(--size) * 2);
}



#contact .cols .col-fourth {
    flex-basis: auto;
}
#contact .cols a {
    display: block;
    background: var(--brown);
    border-radius: var(--half);
}
#contact .cols a svg {
    display: block;
    fill: var(--white);
    width: Calc(var(--size) * 3);
    height: Calc(var(--size) * 3);
}
#contact .cols a:hover svg {
    fill: var(--white);
    transform: scale(1.1);
}
#contact .email {
    text-align: center;
    margin-top: 0;
}
#contact .email a {
    text-decoration: none;
}


.contact-info {
    position: relative;
    min-height: 140px;
}
.contact-info > div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#turnstile-area {
    opacity: 1;
    transition: opacity 0.5s ease;
    text-align: center;
}
#turnstile-area #turnstile-box {
    width: 300px;
    margin: var(--size) auto var(--half);
    max-width: 100%;
}
#turnstile-area.fade-out {
    opacity: 0;
}
#protected-content {
    opacity: 0;
    transition: opacity 0.5s ease;
}
#protected-content.show {
    opacity: 1;
}


/***************** FOOTER *****************/
footer {
    text-align: center;
    padding: var(--size) var(--size) Calc(var(--size) * 2);
    color: var(--white);
    font-size: 14px;
}
footer p {
    opacity: 0.75;
}


/*****************  ACCESSIBILITY *****************/
.sr {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
@media (prefers-reduced-motion) {
    html {
    	scroll-behavior: auto;
    }
    .js-scroll {
        opacity: 1!important;
        transition: none!important;
        transform: none!important;
    }
    .scrolled, header #scrolldown {
        animation: none!important;
    }
    a, svg, 
    #filter, .portfoliosite,
    .portfoliosite .mockup, .portfoliosite .wrapper img {
        transition: none!important;
    }
    .portfoliosite .wrapper img,
    .stackAnim.carousel-ready {
        transform: none!important;
    }
    .stackAnimWrap {
        overflow: visible;
    }
}



/*****************  RESPONSIVE *****************/

@media (max-width: 1000px) {
    .portfoliosite p {
        min-height: Calc(var(--size) * 2 * 1.5);
    }
    .portfolio-gallery .navbtn#portfolionext {
        right: 0;
    }
    .portfolio-gallery .navbtn#portfolioprev {
        left: 0;
    }
}

@media (max-width: 868px) {
    .portfoliosite .mockup {
        margin: 0 auto;
    }
    .portfoliosite .mobile {
        display: none!important;
    }
    .stackAnim .logo {
        width: 130px;
        height: 100px;
    }
    .stackAnim .name {
        font-size: 16px;
    }
    #profile .cols {
        flex-direction: column;
    }
    #profile .cols > div {
        flex-basis: 100%!important;
    }
}

@media (max-width: 600px) {
    :root {
        --size: 18px;   
    }
    header img {
        width: 200px;
    }
    header h1 {
        font-size: 2rem;
    }
    header h1 span {
        display: block;
    }
    .portfolio-gallery .navbtn#portfolionext {
        right: Calc(var(--size) * -0.9);
    }
    .portfolio-gallery .navbtn#portfolioprev {
        left: Calc(var(--size) * -0.9);
    }
    .stackAnim .logo {
        width: 110px;
        height: 90px;
    }
}

@media (max-width: 468px) {
    .stackAnim .logo {
        width: 100px;
        height: 80px;
    }
    .stackAnim .name {
        font-size: 14px;
    }
    footer span {
        display: block;
    }
}