@layer fonts-boiilerplates {


@font-face {
    font-family: sofia;
    src: url(fonts/SofiaSans-VariableFont_wght.ttf);
}
@font-face {
    font-family: playfair-display;
    src: url(fonts/PlayfairDisplay-VariableFont_wght.ttf);
}
@font-face {
    font-family: fredricka;
    src: url(fonts/FrederickatheGreat-Regular.ttf);
}
@font-face {
    font-family: rubik-dirt;
    src: url(fonts/RubikDirt-Regular.ttf);
}




*,
*::before,
*::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    /* font-size: 0; */
    /* outline: 2px solid rgb(255 105 180 /.5); */


}

:root {


    


    --main-heading-color: rgb(0 60 70);
    --main-text-color: #333;
    --main-link-color: rgb(0 90 120);
    --main-background-color: #f7f7f7;

    --header-background: linear-gradient(to right, rgb(0 70 70 /1), rgb(0 60 70 / 1));
    --header-backdrop: blur(10px) grayscale(50%);
    --header-shadow: 0 0 6px 10px rgb(51 51 51 / .5);
    --header-text-color: white;
    --header-text-shadow: 2px 2px 0 black;

    --page-hero-background: linear-gradient(to bottom right, rgb(0 60 70 / .9), rgb(0 90 120 / .9), rgb(0 130 150 / .9));
    /* --page-hero-background: linear-gradient(to top left, rgb(0 50 60 / 1), rgb(0 65 75 / 1), rgb(0 75 85 / 1)); */
}


}


@layer mobile-first {
body {
    font-family: sofia, sans-serif;
    font-size: .9rem;
    font-weight: 300;
    min-height: 100vh;

    color: var(--main-text-color);

    overflow-x: hidden;

    scrollbar-gutter: stable both-edges;
    background-color: var(--main-background-color);
}

h1,
h2,
h3,
h4,
h5 {
    margin-bottom: .25em;
    letter-spacing: .06em;
    color: var(--main-heading-color);
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
    font-weight: 400;
}

h2.front-presentation {

    display: none;
}

h3 {
    font-size: 1.5rem;
}



p {
    margin-bottom: .5em;
}

span {
    font-size: inherit;
    font-weight: inherit;
}

input[type="text"],
textarea,
input[type="email"] {
    background-color: #f7f7f7;
    border-color: var(--main-text-color);
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 1px solid;
    box-shadow: none;
    
    outline: none;
}


a:link,
a:visited {
    text-decoration: none;
    color: var(--main-link-color);
    
}

a:hover {
    color: var(--main-heading-color);
    /* opacity: .85; */
    
}

.left-justify {
    text-align: left;
}

.right-justify {
    text-align: left;
}

.center-justify {
    text-align: center;
}

.padded {
    padding: 2rem 1rem;
}

.btn {
    display: inline-block;

    text-transform: uppercase;



    margin: 5px 0;
    box-shadow: 3px 4px 0 0 rgb(51 51 51 / .7);
    cursor: pointer;
}

.btn:hover,
.btn:active,
.btn:focus {
    transform: translate(-1px, -2px);
    text-decoration: none;
    margin-top: 3px;
    margin-bottom: 7px;
    box-shadow: 4px 6px 0 0 rgb(51 51 51 / .7);
    opacity: 1;

}

.round-btn {

    
    
    text-decoration: none;

    padding: .5em 1em;
    
    border-radius: 100px;
}

.btn-teal {
    background-image: linear-gradient(to right, rgb(0 128 128), rgb(0 100 140));
    color: white !important;

    border: solid 1px var(--main-text-color);
}

.btn-white {
    background-color: var(--main-background-color);
    color: var(--main-text-color);
    border: solid 1px var(--main-text-color);
}


.img-btn {


    border-radius: 5px;
    justify-self: center;
    padding: .3rem;

}





header {
    background: var(--header-background);
    backdrop-filter: var(--header-backdrop);
    box-shadow: var(--header-shadow);

    color: var(--header-text-color);

    position: fixed;
    z-index: 999;
    width: 100vw;

    text-align: right;
}

.logo {
    display: block;
    width: 100%;
    letter-spacing: .1em;

    font-size: 3vmin;
    text-shadow: var(--header-text-shadow);

    padding: 1em;





}

.logo a,
.logo a:visited {
    color: inherit;
}

.logo a:hover,
.logo a:active {
    text-decoration: none;
    opacity: .75;
}

nav {
    position: absolute;
    top: 100%;
    left: 0;

    width: 100%;
    text-align: left;


    background: var(--header-background);

    box-shadow: var(--header-shadow);

    transform: scaleY(0);
    transform-origin: top;
    transition: transform ease-in-out 500ms;
}




nav ul {
    list-style: none;


}

nav li {
    text-shadow: var(--header-text-shadow)
}



nav a,
nav a:visited,
nav a:active {

    display: block;
    color: var(--header-text-color);
    font-size: min(4vw, 1.25rem);
    text-transform: uppercase;
    text-decoration: none;



    opacity: 0;
    transition: opacity ease-in-out 200ms 200ms;
    margin: 1em min(4vw, 1.5em);




}

nav a:hover,
nav a:focus {
    color: black;
    text-shadow: 1px 1px 0 white;

}

.menu-toggle {
    display: none;
}

.menu-toggle:checked~nav {
    display: block;

    transform: scaleY(1);
    transform-origin: top;
    transition: transform ease-in-out 500ms;
}

.menu-toggle:checked~nav a {
    opacity: 1;

    transition: opacity ease-in-out 400ms 200ms;
}

.menu-toggle-label {
    position: absolute;
    left: 0;
    top: 0;
    margin-left: 2rem;
    height: 100%;
    display: flex;
    align-items: center;
    width: 2rem;
}

.menu-toggle-label span,
.menu-toggle-label span::before,
.menu-toggle-label span::after {
    display: block;
    position: relative;
    

    background: var(--header-text-color);
    box-shadow: var(--header-text-shadow);
    height: 3px;
    width: min(100%, 7vw);
    border-radius: 2px;

    cursor: pointer;
}

.menu-toggle-label span {
    top: -5px;
    left: -18px;
}

.menu-toggle-label span::before,
.menu-toggle-label span::after {
    content: "";
    position: aboslute;

    transform: translateY(0);
    transition: transform ease-in-out 500ms;

}

.menu-toggle-label span::before {
    top: 5px;
    /* background-color: hotpink; */

}

.menu-toggle-label span::after {
    /* background-color: aqua; */
    top: 7px;
}

.menu-toggle:checked~label span::before {
    transform: translateY(100%);
}

.menu-toggle:checked~label span::after {
    transform: translateY(200%);
}




.menu-toggle:checked~label span::after,
.menu-toggle:checked~label span::before {
    transition: transform ease-in-out 500ms;
}


.flow-container {

    top: 0;
    left: 0;
    width: 100vw;

    z-index: 2;

    display: grid;

    grid-template-columns: [fill-width-start] 4vw [expand-start] 0 [content-start] 1fr 1fr 1fr 1fr [content-end] 0 [expand-end] 4vw [fill-width-end];
    
    margin-bottom: 6rem;





    justify-items: stretch;
    align-items: start;

}

.flow {
    position: relative;
    


}




.flow-first {
    padding-top: max(15vmin, 4rem);
}

.main {
    grid-column: content;


}

.expanded {
    grid-column: expand;
}

.fullwidth {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: fill-width;
    padding: 0 !important;
}

.sub-grid {
    display: grid;
    grid-template-columns: subgrid;
}

.top-margin {
    margin-top: 1rem;
}

.bottom-margin {
    margin-bottom: 1rem;
}

.bg-white {
    background-color: white;
    color: black;
    
}

.bg-black {
    background-color: black;
    color: white;
}

.bg-dimwhite {
    background-color: #f7f7f7;
}

.bg-teal {
    color: white;
    background-image: linear-gradient(to right, rgb(0 80 110), rgb(0 95 115), rgb(0 105 125));
}

.pane-teal {
    color: white;
    backdrop-filter: var(--header-backdrop);
    background-image: linear-gradient(to right, rgb(0 80 110 / .6), rgb(0 95 115 / .6), rgb(0 105 125 / .6));
}



.pane-white {
    color: var(--main-text-color);
    backdrop-filter: var(--header-backdrop);
    background: rgb(250 250 250 / .6);
}
.pane-grey {
    color: white;
    backdrop-filter: var(--header-backdrop);
    background-image: linear-gradient(to right, rgb(50 50 50 / .6), rgb(75 75 75 / .6), rgb(100 100 100 / .6));
}

.pane-black {
    position: relative;
    color: white;
    
}

.pane-black::before {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;

    content: "";
    z-index: -1;
    backdrop-filter: var(--header-backdrop);
    background: black;
    opacity: .6;
}

.shaded {
    
    box-shadow: 2px 2px 0 1px rgb(51 51 51 / .5);
}



.rounded {

    border-radius: 10px;

}


.img-top-left {
    position: relative;

    left: -1rem;

    width: min(50%, 200px);

    border: solid 5px linen;
    box-shadow: 2px 2px 4px 0 black;
    float: left;




}

.cards {
    position: relative;
    display: grid;
    justify-items: stretch;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

.line-between>* {
    text-align: center;
    text-wrap: balance;
}




.card {
    margin: 0;
    padding: .5em 1em;
    display: grid;
    grid-template-rows: 1fr .5fr;
    justify-items: stretch;
    align-content: top;
}

.btn-card>img.btn {
    width: 6rem;

}


.btn-card>a {
    margin: .5em 0;
    font-size: 1.1rem;
    color: var(--main-link-color);
}

.publication {
    padding: 1em .5em;
}

.publication:not(:first-child) {
    border: 1px solid;
    border-image: linear-gradient(to right, transparent, rgb(0 60 70 / .7) 10% 90%, transparent) 1;
    
}

.me {
    text-decoration: 1px underline dashed;
    text-decoration-color: #777777;
    text-underline-offset: .3em;
}
.title {
    font-weight: bolder;
}

.part-of-publication {
    font-style: italic;
    
}

.publication img {
    width: 1rem;
}

.abstract summary{
    font-style: normal;
    font-weight: inherit;
}

.abstract p {
    max-height:15rem;
    overflow-y: auto;
    margin: .5rem 1rem;
    padding: .5em;
    font-size: smaller;
    background-color: #f7f7f7;
    
}






.landing-hero {


    display: none;



}







.contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;

    width: clamp(70px, 70%, 300px);
    margin: 0 auto;
    
    
}

.contact__input__group {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: center;

    width: 100%;
    margin: 0 auto;
    
}

.contact-label,
.contact-msg-label {
    display: block;

}

.contact-in,
.contact-msg {
    
    width: 100%;
    border-radius: 5px;
}

.contact-msg {
    width: 100%;
    height: 5em;
}

.contact-send {
    align-self: flex-start;
}

.email-modal {
    position: absolute;
    top: 42.5%;
    left: 15%;

    width: 70%;
    height: 15%;

    font-size: .8rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .5em;

    background-color: rgb(0 120 140);
    color: var(--header-text-color);
    border: solid var(--main-background-color) 1px;

    box-shadow: var(--header-shadow);
}



::backdrop {
    background-image: radial-gradient(rgb(0 80 128 / .5), rgb( 0 40 64 /.5));
}

.cv {
    width: 100%;
    height: min(1000px, 60vh);
}

.blog-nav {
    
    color: black;
    font-size: 1rem;
}

.blog-nav-list {
    list-style: none;
    
}

.blog-nav-main {
    position: relative;
    display: flex;
    
}

.blog-nav-parent > a {
    cursor: pointer;
}

.blog-nav-nested {
    position: relative;
    z-index: 99;
    
    display: none;

}

.blog-nav-open > .blog-nav-nested {
    display: block;
}



.blog-page {
    
    display: grid;
    
    
    gap: .5rem;
    

}

.blog-preview-list {
    
    grid-column: 1;
}



.blog-preview {
    
    /* width: max(300px, 20%); */
    /* max-height: 300px; */
    margin-bottom: 1rem;

    
    border: .5px solid black;
    
    padding: .5rem 1rem 1rem;

}

.blog-preview a {
    color: inherit;
}

.blog-preview a:hover {
    opacity: .7;
}

/* .blog-preview-large {
    grid-column: span 2;
} */

.blog-preview-date {
    display: inline-block;
    font-family: rubik-dirt;
    font-weight: 100;
    margin-bottom: .5rem;
    padding: .2rem;
    background-color: white;
    box-shadow: -2px 2px 1px black, 0 0 2px rgb(100 100 100 / .5);
    transform: rotate(-.01turn) translateX(-2rem);
}


.blog-preview-inner p
 {
    mask-image: linear-gradient(to top, transparent 10%,  white 30% 100%);
    overflow: hidden;
    max-height: 6rem;
}



.blog-read-more {
    color: rgb(0 70 120) !important;
    font-weight: 700;
}

.blog-preview-heading {
    font-family: playfair-display;
    font-weight: 300;
    /* text-shadow: 1px 1px 1px rgb(50 50 50 / .5); */
    margin-bottom: .5rem;
}



.blog-preview-details {
    
    position: relative;
    left: -1.5em;
    width: calc(100% + 3em);
    
    border: solid .5px black;
   
    text-align: right;
    color: black;
    font-weight: 600;
    font-family: playfair-display;
    /* font-size: 1rem;
    ; */
    letter-spacing: .05em;
    background: white;
    padding: .3em .5em;

    /* box-shadow: 2px 2px 1px black, 0 0 2px rgb(100 100 100 / .5); */


    /* background-image: linear-gradient(to left, rgb(139 69 19 /.8), rgb(210 105 30 / .8), rgb(205 133 63 / .8), rgb(244 164 96 / .8));
    border: solid 2px white;
    outline: solid 2px chocolate;
    background-image: radial-gradient(ellipse 100% 150% at 100% 50%, saddlebrown, chocolate, peru, sandybrown, transparent 70% 100%);
    
    background-image: linear-gradient(to right, transparent 50%, rgb(250 70 50 / .5), rgb(250 50 20 / .9)); */
    
}



.blog-post-heading {
    
    font-family: playfair-display;
    font-weight: 200;
    font-style: italic;
    text-align: right;
    
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    
    

    border-image: linear-gradient(to left, transparent, black 25% 75%, transparent) 1;
    border-bottom: solid 1px;

}


.blog-post-view {
    
    text-align:justify;
    text-justify: inter-word;
    padding: 0 1rem;
    
}


footer {

    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 999;

    display: grid;
    grid-template-columns: 5vw [mailto-start] auto [mailto-end] 1rem [socials-start] auto [socials-end] 5vw;
    justify-items: space-between;
    align-content: end;

    font-size: .65rem;
    font-weight: 200;
    letter-spacing: .1em;
    text-align: left;
    padding: .5rem 0;
    background-color: #333;
    background-image: var(--header-background);
    color: white;
    
}

footer img {

    height: 15px;

    filter: invert();
}


.mailto,
.socials {
    display: grid;


    align-content: center;
}

.mailto {
    grid-template-columns: auto auto;
    gap: .5em;
}

.mailto a {
    color: white;
    
}


.mailto {
    grid-area: mailto;
    justify-self: start;

    justify-content: start;
    align-items: center;
}

/* .mailto img {
    height: 30px;
} */

.mail-address {
    display: none;
}

.socials {
    grid-area: socials;
    justify-self: end;

    grid-auto-flow: column;


}


.socials a:not(:last-of-type) {
    margin-right: 10px;
}







.page-hero {
    grid-area: fill-width;
    grid-row: 1;
    display: grid;
    grid-template-columns: subgrid;

    padding-top: clamp(35px, 20vmin, 100px);
    padding-bottom: 1rem;
    

}



.page-heading h1 {
    font-size: 1.4rem;
    font-family: playfair-display;
    margin: 0;
}

}

@media screen and (min-width: 700px) {

    :root {
        /* --header-background: linear-gradient(to right, rgb(0 70 70 /.5), rgb(0 50 70 / .5)); */

        --initial-logo-size: min(1.2rem, 1.6vw);
        --initial-menu-size: var(--initial-logo-size);

        --initial-menu-pad-top: 3rem;
        --initial-menu-pad-bottom: 2rem;
        --scrolled-menu-pad-top: 2rem;
        --scrolled-menu-pad-bottom: 1rem;
    }

    body {
        background-image: url(img/book-bg.png);
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: bottom -100px right 0px;
        background-blend-mode: luminosity;
        background-size: 40% auto;

        font-size: 1.1rem;
        
    }

    h1 {
        font-size: 3rem;
    }


    
    
    .menu-toggle-label,
    .menu-toggle-label::after,
    .menu-toggle-label::before {
        display: none;
    }

    header {
        

        display: grid;
        grid-template-columns: 5vw [logo-start] auto [logo-end] 1fr [menu-start] auto [menu-end] 5vw;
        justify-items: stretch;
        align-items: center;
        padding-block: var(--initial-menu-pad-top) var(--initial-menu-pad-bottom);

        

        animation: menu-scroll ease-in forwards;
        animation-timeline: view();
        animation-range: 100vh 150vh;
    }

    .logo {
        grid-area: logo;

        font-size: var(--initial-logo-size);
        letter-spacing: .2em;
        font-weight: 600;
    }

    nav {
        all: unset;
        grid-area: menu;
        z-index: 1000;

    }

    nav ul {
        display: flex;
        justify-content: flex-end;
        align-items: center;


    }

  

    nav li:not(:last-child) {
        padding-right: 1.3rem;
    }

    nav a,
    nav a:hover,
    nav a:active,
    nav a:visited {
        all: unset;
        display: block;
        position: relative;
        cursor: pointer;

        width: 100%;
        text-align: right;
        opacity: 1;
        color: var(--header-text-color);
        font-size: 1rem;
        letter-spacing: .2em;
    }

    nav a::before {
        content: "";
        position: absolute;
        left: 0;
        top: -5px;

        height: 3px;
        width: 100%;

        background-image: linear-gradient(to right, transparent, white, transparent);

        opacity: 0;
        transform: scaleX(0);
        transform-origin: center;
        transition: all ease-in-out 250ms;
    }

    nav a:hover:before {
        opacity: 1;
        transform: scaleX(1);
        transform-origin: center;
        transition: all opacity ease-in-out 250ms;
    }



    .landing-hero {
        position: relative;
        isolation: isolate;

        grid-column: fill-width;
        height: 100vh;
        background-color: transparent;





        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1;
    }

    .hero-background {
        display: block;
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        

        background-color: hsla(54, 70%, 30%, 0.3);
        background-image: url(img/interior.jpg);
        background-blend-mode: exclusion;
        background-size: cover;
        background-position: center;

    filter: grayscale(.3);
        transform: scale(1);
        transform-origin: bottom;
        opacity: 1;
        animation: hero-fade linear forwards;
        animation-timeline: view();
        animation-range: 100vh 140vh;
    }

  

    
.main-splash {

    z-index: 2;

    width: clamp(520px, 50vw, 800px);
    display: grid;
    grid-template-columns: .5fr 4px 2fr;

    grid-template-areas:
        "icon1 bar text1"
        "icon2 bar text2"
        "icon3 bar text3"
        "icon4 bar text4"
    ;
    column-gap: 3vw;
    justify-items: stretch;
    align-content: center;

    background: var(--header-background);
    backdrop-filter: var(--header-backdrop);
    

    border-radius: 5px;

    color: var(--header-text-color);
    text-shadow: var(--header-text-shadow);
    padding: 2rem 1rem;


}

.main-splash svg {
    display: block;
    justify-self: right;
    width: min(45px, 15vw);
    filter: drop-shadow(var(--header-text-shadow));
}

.main-splash-icon,
.main-splash-text {
    display: flex;

    align-items: center;
}

.main-splash-icon {
    justify-content: flex-end;
}

.main-splash-text p {
    justify-content: flex-start;
    font-size: min(1.1rem, 2vw);
    letter-spacing: .05em;
}

.middle-separator {
    align-self: center;

    height: 90%;
    width: 2px;
    border-radius: 2px;
    background-color: white;
    box-shadow: -.5px -.5px 1px .5px #777777 inset;
}



.flow-container {

    grid-template-columns: [fill-width-start] 15vw [expand-start] 7vw [content-start] 1fr 1fr 1fr 1fr [content-end] 7vw [expand-end] 15vw [fill-width-end];
}

    .animated {



        animation: scroll-flow-in linear forwards, scroll-flow-out linear forwards;
        animation-timeline: view();
        
    }

    .animation-fast {
        animation-range-start: entry, exit 20%;
        animation-range-end: entry 80%, exit;
    }

    .animation-slow {
        animation-range-start: entry, exit 40%;
        animation-range-end: entry 100%, exit;
    }

    .bg-white {
        background-color: white;
        background-image: unset;
        backdrop-filter: unset;
        
        
    }

    .flow-first {
        padding: 1rem 2rem;
        grid-area: content;
    }

    .main {
        grid-column: content;
    }

    h2.front-presentation {
        margin-block: .5em 1.5em;

        display: block;
    }

    .flow-first .btn {
        margin-top: 1.5em;
    }


    .img-top-left {
        width: 40%;

        margin-right: 30px;
        margin-bottom: 20px;
    }

    .cards {
        position: relative;
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
    }

    .cards-gap {
        gap: 1.5em;
    }

    .line-between>* {
        text-align: center;
        text-wrap: balance;
    }


    .line-between> :not(:first-child) {

        border-image: linear-gradient(to bottom, transparent 0% 10%, black 15% 85%, transparent 90% 100%) 1;
        border-left: .1em solid;
    }

    .card {
        position: relative;
        margin: 0;
        padding: 1em;
        display: grid;
        grid-template-rows: 1fr auto;
        justify-items: stretch;
        align-content: start;
    }

    .btn-card>img.btn {
        width: min(8rem, 8vw);
        /* align-self: end; */
    }

    /* .btn-card > :nth-child(2){
    align-self: center;
} */
    .btn-card>a {
        margin: .5em 0;
        font-size: 1.17rem;
    }

    
.page-hero {
    grid-area: fill-width;
    grid-row: 1;
    display: grid;
    grid-template-columns: subgrid;

    padding-top: clamp(110px, 25vmin, 175px);
    padding-bottom: 3rem;
    

}



.page-heading h1 {
    font-size: 2.4rem;
    margin: 0;
}


.contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    justify-items: center;
    align-content: start;
    width: clamp(430px, 80%, 750px);
    margin: 0 auto;
    
}

.contact-label,
.contact-msg-label {
    justify-self: end;
    margin-bottom: .6em;
}

.contact-in,
.contact-msg {
    justify-self: start;
    width: 100%;
    height: 1.2em;
    padding: 1em .5em;
    margin-bottom: 1em;
}

.contact-msg-label {
    grid-column: 1;
}

.contact-msg {
    
    grid-column: 2 / 5;
    height: 10em;
}

.contact-send {
    
    justify-self: start;
}

.email-modal {

    top: 40%;
    left: 40%;

    width: 20%;
    height: 20%;


    gap: 1em;
    font-size: 1.3rem;
}

.group--two-column {
    grid-column: span 2;
}

.blog-page {
    grid-template-columns: clamp(150px, 15vw, 450px)  1fr 75px;
}


.blog-preview-list {
    grid-column: 2;
}
.blog-preview {
    
    /* width: max(300px, 20%); */
    
    
    
    
    padding: .5rem 1rem 1rem;

}


.blog-preview-anfang {
    position: relative;
    
    font-family: fredricka;
    font-size: 4rem;
    font-weight: 300;
    text-align: center;


    float: left;
    background-color: white;
    color: white;
    text-shadow: 2px 0px 0 black, -2px 0px black, 0px -2px black, 0px 2px black;


    /* width: 20%; */
    padding: 0 1rem;
    margin-right: 1rem;
    border-right: solid 1px black;

    
    
}

.blog-preview-details {
    padding-right: 5em;
}


.blog-post-heading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    float: left;
    
    min-height: 200px;
    max-width: 400px;
   
    padding: 0 2rem;

    margin-right: 2rem;

    border-image: linear-gradient(to top, transparent, black 25% 75%, transparent) 1;
    border-right: solid 1px;

}

.blog-post-view {
    
    padding: 0;
    
}



    footer {

        grid-template-columns: 22vw [mailto-start] auto [mailto-end] 1rem [socials-start] auto [socials-end] 22vw;
        position: fixed;
        left: 0;
        bottom: 0;

        

        animation: footer-fade ease-in forwards;
        animation-timeline: scroll(root y);
        animation-range: 0vh 30vh;

        z-index: 999;
    }

   

    .mailto,
    .socials {
        display: grid;


        align-content: center;
    }

    .mailto {
        grid-template-columns: auto auto;
        gap: .5em;
    }

    .mailto a {
        color: white;
        display: inline;
    }


    .mailto {
        grid-area: mailto;
        justify-self: start;

        justify-content: start;
        align-items: center;
    }

    .mailto img {
        height: 25px;
    }



    .socials {
        grid-area: socials;
        justify-self: end;

        grid-auto-flow: column;


    }

    .socials img {
        height: 25px;
    }

    .socials a:not(:last-of-type) {
        margin-right: 10px;
    }



}

@layer animations {
@keyframes scroll-flow-in {
    0% {
        transform: scale(.8);
        opacity: 0;
    }
    50% {
        transform: scale(.9);
        
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes scroll-flow-out {
    0% {
        transform: scale(1);
        
        opacity: 1;
    }
    50% {
        transform: scale(.9);
        
        opacity: 1;
    }

    100% {
        transform: scale(.8);
        opacity: 0;
    }
}

@keyframes menu-scroll {

    from {
        background-color: transparent;
        background-image: var(--header-background);
        padding-top: var(--initial-menu-pad-top);
        padding-bottom: var(--initial-menu-pad-bottom);

    }

    to {
        background-color: #333;
        background-image: var(--header-background);
        padding-top: var(--scrolled-menu-pad-top);
        padding-bottom: var(--scrolled-menu-pad-bottom);

    }
}

@keyframes hero-fade {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    20% {
        opacity: 1;
        transform: scale(1.4);
    }

    40% {
        opacity: 1;
        transform: scale(1.8);
    }

    60% {
        opacity: .9;
        transform: scale(2.2);
    }

    80% {
        opacity: .7;
        transform: scale(2.6);
    }

    100% {
        opacity: .5;
        transform: scale(3);
    }
}

@keyframes footer-fade {
    from {
        
        
    }

    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

}