/*
    This file is for miscellaneous rules (non-theming/non-grid)
*/

/* @link https://utopia.fyi/type/calculator?c=320,25,1.2,2560,30,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
    --step--4: clamp(0.7535rem, 0.7515rem + 0.0103vw, 0.768rem);
    --step--3: clamp(0.9042rem, 0.8963rem + 0.0398vw, 0.96rem);
    --step--2: clamp(1.0851rem, 1.0687rem + 0.0821vw, 1.2rem);
    --step--1: clamp(1.3021rem, 1.2738rem + 0.1414vw, 1.5rem);
    --step-0: clamp(1.5625rem, 1.5179rem + 0.2232vw, 1.875rem);
    --step-1: clamp(1.875rem, 1.808rem + 0.3348vw, 2.3438rem);
    --step-2: clamp(2.25rem, 2.1529rem + 0.4855vw, 2.9297rem);
    --step-3: clamp(2.7rem, 2.5626rem + 0.6872vw, 3.6621rem);
    --step-4: clamp(3.24rem, 3.0489rem + 0.9555vw, 4.5776rem);
    --step-5: clamp(3.888rem, 3.626rem + 1.31vw, 5.722rem);
}

body {
    background-color: #d5cdbc50;
    padding: 2rem;
}

p {
    line-height: 2;
}

a, .external-icon {
    color: #AB209F;
    text-decoration: none;
    font-weight: 600;
}

a:hover {
    color: #2A6AFF;
    text-decoration: underline;
}

.home-layout {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: flex-end;
    min-width: 100vw;
    justify-content: space-between;
}

.portfolio-img {
    max-width: 40vw;
    @media (max-width: 425px) {
        max-width: 200vw;
    }
    @media (min-width: 650px) and (max-width: 1250px) {
        max-width: 80vw;
    }
}

nav ul, footer ul {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 1rem;
    list-style: none;
    font-size: smaller;
}

footer {
    display: inline-flex;
    min-width: 60vw;
    justify-content: space-evenly;;
    align-items: center;
}

.nav-item {
    font-weight: 800;
}

.profile-layout {
    display: inline-flex;
    flex-wrap: wrap;
    column-gap: 5rem;
    min-height: 80vh;
    min-width: 100vw;
    align-content: center;
    justify-content: center;
}
.bio {
    max-width: 50ch;
    line-height: 2;
}

.profile-img {
    /* Setting default img width to 800px without media queries &
    not dependent on view port width. */
    min-width: 500px;
    max-width: 600px;
    padding-right: 2rem;
    /*@media (max-width: 425px) {*/
    /*    max-width: 200vw;*/
    /*}*/
    /*@media (min-width: 650px) and (max-width: 1250px) {*/
    /*    max-width: 80vw;*/
    /*}*/
}

.gallery {
    min-width: 100vw;
    display: inline-flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    row-gap: 5rem;
    align-items: center;
    margin-top: 5rem;

}

.gallery-img {
    /* Setting default img size without media queries &
    not dependent on view port width. */
    min-width: 350px;
    max-width: 600px;
    padding-right: 2rem;
    object-fit: contain;
    /*@media (max-width: 425px) {*/
    /*    max-width: 120px;*/
    /*    padding-right: 2rem;*/
    /*}*/
    /*@media (min-width: 650px) and (max-width: 1250px) {*/
    /*    max-width: 80px;*/
    /*}*/
}

.post-container{
    max-width: 80ch;
    min-width: fit-content;
    justify-self: center;
    margin: auto;
    padding-right: 2rem;
    h1 {
        justify-self: center;
        font-weight: 900;
    }

    img {
        /* Setting default img width to 800px without media queries &
         not dependent on view port width. */
        max-width: 800px;
        object-fit: contain;
        /*@media (min-width: 430px) and (max-width: 1252px) {*/
        /*    max-width: 400px;*/
        /*}*/
        /*@media (min-width: 1252px) {*/
        /*    max-width: 800px;*/
        /*}*/
    }

    p {
        font-size: var(--step-0);
        @media (min-width: 430px) {
            font-size: var(--step--2);
        }
    }

    .pull-out {
        justify-self: center;
        font-weight: 900;
        font-size: xx-large;
        color: #0428a7d4;
    }

    @media (min-width: 1253px) {
        min-width: auto;
        max-width: 80ch;
    }

}

.posts-list {
    list-style: none;
}

.description {
    max-width: 65ch;
}

.post-list-img {
    /* Setting default img size without media queries &
    not dependent on view port width. */
    min-width: 350px;
    max-width: 600px;
    padding-right: 2rem;
    object-fit: contain;
    /*@media (min-width: 430px) and (max-width: 1252px) {*/
    /*    max-width: 40vw;*/
    /*}*/
    /*@media (min-width: 1252px) {*/
    /*    max-width: 30vw;*/
    /*}*/
}

.post-list-item-title {
    font-family: 'Tilt Warp';
    font-size: var(--step-2);
}

/*.gallery > section {*/
/*    display: inline-flex;*/
/*    justify-content: space-between;*/
/*    min-width: 100vw;*/
/*    flex-wrap: wrap;*/
/*}*/

/*body {*/
/*    font-family: "Noto Serif", serif;*/
/*}*/

/*h1 {*/
/*    font-family: "Righteous", sans-serif;*/
/*    font-weight: 400;*/
/*    font-style: normal;*/

/*}*/

/*ul {*/
/*    list-style-type: none;*/
/*}*/

/*a, a:hover {*/
/*    text-decoration: none;*/
/*}*/



/*nav, footer, .sm-btn, .note {*/
/*    font-size: clamp(1.5rem, 1vw, 3.5rem);*/
/*}*/

/*#about, .notice {*/
/*    !*letter-spacing: 1px;*!*/
/*    !*line-height: 1.8;*!*/
/*}*/

/*.sm-btn {*/
/*    border-radius: 0.2rem;*/
/*}*/

/*.lg-btn {*/
/*    border-radius: 0.3rem;*/
/*    font-size: clamp(1rem, 1.5rem, 2rem);*/
/*    font-weight: 500;*/
/*}*/
/*#workList {*/
/*    padding-left: 0;*/
/*}*/

/*.workLI h2 {*/
/*    font-size: clamp(4rem, 3.5vw, 30rem);*/
/*    font-family: "Righteous", sans-serif;*/
/*    letter-spacing: 3px;*/
/*}*/