@import url(settings.css);
@import url(gem.css);

.mobile,
.mobile_andrew{
    display: none;
}
.andrew,
.mobile_andrew,
.mobile .sideContent .ponies,
h1, h2, #contact,
.titleContainer,
.descrContainer,
#formsList  {
    font-family: "JakartaMedium", Helvetica, Arial, sans-serif;
    line-height: 1.25;
    font-size: calc(0.95 * var(--fontSize));
    text-decoration: none;
    color: #00F;
    font-weight: normal;
    margin: 0px;
}

article:nth-child(odd) h1,
article:nth-child(odd) h2,
article:nth-child(odd) .title,
article:nth-child(odd) .descrContainer{
    color: #000;
}

.sideContent,
figcaption,
.formCaption{
    font-family: 'IBM Plex Mono','Courier New', Courier, monospace;
    font-size: calc(var(--fontSize)*0.5);
    line-height: 1.6;
    color: #000;
}

body,
.partners{
    font-size: calc(0.6 * var(--fontSize));
}


/*------------------------------------*\
    MAIN
\*------------------------------------*/

html {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 0 auto;
 }


body{
    background-color: #FFF;
    overflow: hidden;
}

.home_andrew{
    overflow-y: scroll;
    height:  calc(100vh - 2* var(--rowHeight));
    padding: calc(2* var(--rowHeight)) var(--bodyMargin);
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    min-height: 100vh;
    margin-bottom: var(--rowHeight);
}


#contact{
    position: absolute;
    top: calc(2* var(--rowHeight));
    right: var(--bodyMargin);
}

    .andrew{
        width: calc(var(--columnWidth)*16);
        margin-right: calc(var(--columnWidth)*4);
        color: black;
    }
      .andrew a{
            position: relative;
        }
        .andrew a::after, #contact::after {
            content: '' !important; 
            position: absolute;
            display: none;
            z-index: 100;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-height: 100px;
            max-width: 100px;
            width: var(--gemSize);
            height: var(--gemSize);
            background: url(img/hearts.png) no-repeat center center;
            background-size: 100% auto;
        }
        #work::after{
            background-image: url(img/diamonds.png);
        }

        #forms::after{
            background-image: url(img/spades.png);
        }

        #places::after{
            background-image: url(img/clubs.png);
        }

        #contact::after{
            background-image: url(img/hearts.png);
        }

        .gemLink, #contact{
            text-decoration: underline;
            text-underline-offset: 0.2em;
            
        }


    .sideContent{
        flex-basis: calc(var(--columnWidth)*18);
        padding-top: calc(5*var(--rowHeight));
        color: #00F;
        align-self: flex-start;
        min-height: 70vh;
    }

        .work, .places, .ponies, .forms, .contact{
            display: none;

        }

        .sideContent ul{
            column-width: auto;
            columns: 1;
        }

        .sideContent li{
           width: 100%;
            /* width: 100%; */
           display: inline-table;
        }

        .sideContent a{
            display: inline-flex;
        }

        .sideContent span{
            padding-inline-end: 0.8em;
        }

/*------------------------------------*\
    CONTENT
\*------------------------------------*/

.wrapper{
	width: 100%;
    height: 100vh;
    padding: calc(2* var(--rowHeight)) var(--bodyMargin);
    /* border: 1px solid #00F; */
    overflow-y: scroll;

}

    
article.post,
#formsOverview,
#categories {
    position: relative;
    z-index: 0;
    margin-left: calc(3*var(--columnWidth));
    position: relative;
 }

    .voetnoot{
        display: none;
        position: absolute;
        left: 50%;
        top: calc(-3*var(--rowHeight));
        width: 10vw;
        height: 10vw;
        transform: translateX(-50%);
        font-size: 300%;
        animation: knipper 1s infinite ;
    }

    .voetnoot img.emoji{width: 100%;}

    .voetnoot.up {
        top: calc(2*var(--rowHeight));       
        z-index: 1001;
        animation-delay: 0.5s;
    }

    .post .spacer{
        height: calc(10*var(--rowHeight));
        margin-left: calc(-2.5vw - 3*var(--columnWidth) );

    }

            .post .spacer:first-child{
                transform: rotate(-3deg);
                transform-origin: left top;
                background-color: white;
            }

            .post:nth-child(odd) .spacer:first-child {
                transform: rotate(3deg);
            }
            .post .spacer:first-child::before{
                content: '';
                position: absolute;
                z-index: 1000;
                width: calc(100vw - 2* var(--bodyMargin));
                top: 5vw;
                margin-left: 2.5vw;
                border-top: 3px solid blue;
                overflow: hidden;
            }

            .post:nth-child(odd) .spacer:first-child::before{
                border-color: #000;  
            }


 .anchor{
    height: calc(2*var(--rowHeight));
    background-color: white;
}


.titleContainer{
    position: -webkit-sticky;
    position: sticky; 
    height: 0;
    top: 0;
    width: calc(16*var(--columnWidth));
    margin-left: calc(-3*var(--columnWidth));
    z-index: 20;
    /* border: 1px dashed blue; */
}
        .titleContainer > div{
            position: absolute;
        }
        .title{
            text-decoration: underline;
            text-underline-offset: 0.3em;
            z-index: 100;

        }


.descrContainer{
    position: -webkit-sticky;
    position: sticky; 
    height: 0;
    top: 0;
    width: calc(16*var(--columnWidth));
    margin-left: calc(-3*var(--columnWidth));
    z-index: -10;
}
    .descrContainer::before{
        content: '';
        position: absolute;
        z-index: 1;
        width: 100%;
        top: -20vh;
        height: calc(68*var(--rowHeight));   
        background-color: white;
    }   
.descrContainer:hover{
    background-color: #FFF;
}


    /* .descrContainer > div{
        position: absolute;
        height: calc(100vh - 2*var(--rowHeight));
        width: calc(16*var(--columnWidth));
         
    } */

    .descr {
        position: relative;
        top: 4em; /*onder titel plaatsen */
        z-index: 10;
        padding-right: 1rem;
        /* margin-block-start: 1em;
        margin-block-end: 1em;       */
        max-height: calc(80vh - 4 * var(--rowHeight));
        overflow: auto;
        background-color: white;
    }

.descr::-webkit-scrollbar-thumb {
	background-color: #FFF;
}

.descr:hover{
    overflow-y: auto;
}

.descr:hover::-webkit-scrollbar-thumb {
	background-color: #DFE9EB;
  }
  
.imgContainer{
    position: relative;
    z-index: 1;
    min-height: 100vh;
    /* padding-top: calc(2*var(--rowHeight)); */
}



.imgContainer > figure{
    margin-bottom: var(--rowHeight);
}
        /* .wp-block-column {
            border: 1px dashed blue;
            
        } */


 
        .wp-block-columns{
            margin-bottom: 0;
            gap: var(--gutter);
        }
        
        .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:not(:first-child) {
            /* margin-left: var(--gutter); */
        }    

        

            .wp-block-image {
                margin: 0;
                margin-bottom: var(--rowHeight);
            }

            .wp-block-embed{
                float: right;
            }

            .wp-block-embed figcaption,
            .wp-block-image figcaption{
                float: right;
                margin-right: calc(0*var(--columnWidth));
                margin-top: 0.5rem;
                margin-bottom: var(--rowHeight);
            }



            .eenderde{
                flex-basis: 31.7%;

            }
            .tweederde{
                flex-basis: 65.85%;
            }

         
         


@media (min-width: 600px) and (max-width: 781px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:not(:only-child) {
        flex-basis: calc(50% - var(--gutter)/2);
        flex-grow: 0;
    }    

    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:not(:first-child) {
        flex-basis: calc(50% - var(--gutter)/2);
    }
    .wp-block-columns{
        justify-content: space-between;
    }
    .wp-column{
        flex-basis: calc(50% - var(--gutter)/2);
        margin-left: 0;
    }
}



@media (max-width: 781px) {
    .andrew,
    .descrContainer{
        width: calc(23 *var(--columnWidth));
    }   

    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:not(:first-child) {
      
        margin-left: 0;
    } 

}

@media (max-width: 781px) {

    :root {
        --gemSize: 20vw;
        font-size: calc(var(--fontSize)*1);
    }

    .home_andrew{
        /* padding-top: max(var(--gemSize), calc(6* var(--rowHeight))); */
        padding-top: clamp(calc(var(--bodyMargin) + var(--gemSize)), calc(6* var(--rowHeight)), 12vh);
   }

    .andrew,
    .titleContainer,
    .descrContainer,
    .sideContent{
        width: 100%;
        flex-basis: 100%;
    }

    /* display projects */

    .wrapper{
        overflow-x: hidden;
    }


    .titleContainer{
        margin-left: 0;
        background-color: #FFF;
        z-index: 100;
        padding:  0;
        width: 100%;
        height: 4em;
    }
            .titleContainer::before{
                content: '';
                position: absolute;
                top: -2.5em;
                height: 2.5em;
                width: 100%;
                background-color: white;
            }

            .titleContainer div{
                width: 100%;
            }
            .title{
                background-color: white;
                width: 100%;
                height: 4em;
            }

    .descrContainer {
        position: relative;
        height: unset;
        margin-left: 0;
    }
            .descrContainer::before{
                height: unset;
            }

            .descr{
                max-height: unset;
                top: 0;
            }
        

    article.post{
        margin-left: 0;
    }

    .post .spacer{
        margin-left: -2.5vw;
    }

    .voetnoot{
        display: block;
    }

}

@media (max-width: 781px) {

    .andrew{
        display: none;
    }

    .mobile,
    .mobile_andrew{display: block; color: #000;}

    .mobile nav{
        position: absolute;
        right: calc(var(--bodyMargin) + var(--gemSize) + 1em);
        top: calc( var(--bodyMargin) );
        height: var(--gemSize);
    }
        .mobile nav li{
            display: block;
            width: 14vw;
        }

    #gem {
        display: none;
    }
    #gemStatic{
        display: block;
        left: unset;
        right: var(--bodyMargin);
        top:  var(--bodyMargin);
    }
    /* #gemStatic:hover div,
    #gemStatic:hover div + div{
        background: none;
        animation: none;
    } */

    #contact{
        display: none;
    }

    .mobile #contact{
        display: block;
        top: unset;
        right: unset;
    }

    .mobile #contact,
    nav a{
        font-family: 'IBM Plex Mono','Courier New', Courier, monospace;
        font-size: calc(var(--fontSize)*0.5);
        line-height: 1.6;
        color: blue;
    }

    #sideContent{
        min-height: unset;
        padding-top: unset;
    }

    .ponies{
        font-family: "JakartaMedium", Helvetica, Arial, sans-serif;
        line-height: 1.25;
        font-size: calc(0.95 * var(--fontSize));
        text-decoration: none;
        color: #000;
        font-weight: normal;
        margin: 0px;
    }
}