@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root{
    --font-mainpage-title: "Inter", "Inter Placeholder", sans-serif;



    --text-color-1: "rgb(51, 51, 51)";
}

body{
    margin: 0;
}

img{
    width: 100%;
    height: 100%;
}


/* TEMPLATES */

.ap__template__frame__1{
    display: flex;
    display: flex;
    flex-flow: column;
    gap:10px;
    padding: 0;
    width: 100%;
    height: auto;
}

.ap__template__frame__1 h1{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-size: 18px;
    font-weight: 700;
    font-style: normal;

    color: rgb(51, 51, 51);
    letter-spacing: -0.5px;
    text-align: left;
    line-height: 1.2em;
}

.ap__template__frame__1 h2{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-size: 14px;
    font-weight: 400;
    font-style: normal;

    color: rgb(136, 136, 136);
    letter-spacing: -0.2px;
    text-align: left;
    line-height: 1.2em;
}

.ap__template__frame__2{
    display: flex;
    flex-flow: column;
    gap:10px;
    padding: 0;
    width: 100%;
    height: auto;
}

.ap__template__frame__2 h1{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-size: 16px;
    font-weight: 600;
    font-style: normal;

    color: rgb(51, 51, 51);
    letter-spacing: -0.5px;
    text-align: left;
    line-height: 1.2em;
}

.ap__template__frame__2 h2{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-size: 14px;
    font-weight: 400;
    font-style: normal;

    color: rgb(136, 136, 136);
    letter-spacing: -0.2px;
    text-align: left;
    line-height: 1.2em;
}














/* TEMPLATES */

.ap__title__1 h1{
    font-family: var(--font-mainpage-title);
    font-size: 18px;
    font-weight: 700;
    font-style: normal;
    color: rgb(51, 51, 51);
    letter-spacing: -0.5px;
    text-align: left;
    line-height: 1.2em;
}

.ap__title__2 h1{
    font-family: var(--font-mainpage-title);
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
    color: rgb(51, 51, 51);
    letter-spacing: -0.5px;
    text-align: left;
    line-height: 1.2em;
}

.ap__text__1 h2{
    font-family: var(--font-mainpage-title);
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    color: rgb(136, 136, 136);
    letter-spacing: -0.2px;
    text-align: left;
    line-height: 1.2em;
}


.main__container{
    padding: 0;
    margin: 0;
    background-color: rgb(250,250,250);
}

.main__frame__container{
    display: flex;
    flex: none;
    width: 100;
    height: min-content;
    padding: 0 40px;
    gap: 20px;
    justify-content: center;
    align-items: center;
}


.main__frame{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    width: 1100px;
}

.page__frame__container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    height: 90vh;
    width: 100%;
    border-width: 10px;
    border-radius: 40px;
    box-shadow: 0 1px 2px #0000000d;
    flex: .95 0 0px;
    border-color: #ffffff;
    border-style: solid;
    box-sizing: border-box;
}

.page__frame{
    display: flex;
    flex-flow: column;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    align-items: center;
    overflow: auto;
    scroll-behavior: smooth;
    /* padding: 0 40px ; Padding only for media */
}

.white__default__frame{
    display: flex;
    flex-flow: column;
    flex: 0 0 auto;
    gap: 24px;

    border-style: solid;
    border-width: 1px;
    border-color: rgba(34, 34, 34, 0.05);
    border-radius: 16px;

    background-color: rgb(255, 255, 255);
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
}


/* MAIN PAGE */

.main__page{ 
    background: linear-gradient(125deg, #c3e0d4 -18.61537006926759%, rgb(255, 253, 230) 32.96535647041467%, rgb(247, 235, 203) 59.33056399565705%, rgb(250, 243, 230) 86.29534989865198%); 
    border-radius: 40px;
}

.main__page__container{
    display: flex;
    height: 100%;
    width: 100%;
}

.main__page__content{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    flex-flow: column;
    gap: 24px;
    padding: 0;
}




.main__page__title__container{
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
}

.main__page__title__container h1{
    margin: 0;
    padding: 0;

    font-family: var(--font-mainpage-title);
    font-size: 50px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: -2.6px;
    text-align: center;
    color: rgb(51,51,51);
    line-height: 1.2;
    text-align: start;
}

.main__page__description{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 24px;
    height: min-content;
    margin: 0;
    padding: 0;
    width: 440px;
}

.main__page__description h2{
    margin: 0;
    padding: 0;

    font-family: var(--font-mainpage-title);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.5px;
    line-height: 1.5em;
    text-align: center;
    color: rgb(136, 136, 136);
}

.main__page__description a{
    text-decoration: none;

    font-family: var(--font-mainpage-title);
    color: #333333;
}

.main__page__description a:hover{
    color: #111111;
}

.main__page__buttons{
    display: flex;
    flex-direction: row;
    gap: 15px;
    height: 40px;
    align-items: center;
    justify-content: center;
}

.main__page__button__container{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 15px;
    border-radius: 8px;
    transition: 0.2s;
    cursor: pointer;
}

.view__my__work__button{
    background: #222;
}

.view__my__work__button h1{
    color: #ffffff;
}

.about__me__button{
    background-color: #ffffff;
}

.about__me__button h1{
    color: #222;
}

.main__page__button__container:hover{
    transform: scale(1.1);
}

.main__page__buttons a{
    text-decoration: none;
    color: inherit;
}

.main__page__button__container h1{
    margin: 0;
    padding: 0;
    text-decoration: none;

    font-family: var(--font-mainpage-title);
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.2em;
    text-align: center;
}

/* HEADER */

.header__container{
    display: flex;
    width: 980px;
    flex: 0 0 auto;
    position: relative;
}

.header__content__container{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: min-content;
    width: 100%;
    gap: 20px;
    padding: 20px 0;
}

.header__title__container{
    display: flex;
    flex-flow: row;
    width: min-content;
    height: min-content;
    padding: 0;
    margin: 0;
}

.header__title__content a{
    text-decoration: none;
    padding: 0;
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-style: normal;
    color: #111111;
    font-size: 14px;
    font-weight: 700;
    line-height: 2em;
    letter-spacing: -0.01em;
}



.header__links__container{
    display: flex;
    flex-flow: row;
    place-content: center flex-end;
}

.header__links__content{
    display: flex;
    flex-direction: row;
    place-content: center flex-end;
    gap: 20px;
}

.header__link p{
    margin: 0;
    padding: 0;

    font-family: var(--font-mainpage-title);
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
    line-height: 2em;
    text-align: start;
}

.header__link a{
    text-decoration: none;
    color: rgb(170,170,170);
}

.header__link a:hover{
    color: #000000;
}

.header__link.current a{
    color: #111111;
}

.wp__content__container{
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 0 80px;
}


/* WORK PAGE */

.work__page{
    background-color: rgb(249,249,249);
}

.work__page__content{
    display: flex;
    flex-direction: row;
    place-content: flex-start;
    align-items: flex-start;
    gap: 24px;
    height: min-content;
    width: 100%;
    padding-bottom: 2rem;
}

.wk__personal__info__container{
    display: flex;
    flex-flow: column;
    flex: 0.35 0 0px;
    gap: 40px;
    padding: 0px 0px 40px;
    position: sticky;
    top: 20px;
    z-index: 1;
    background-color: #ffffff;

    border-style: solid;
    border-width: 1px;
    border-color: rgba(34,34,34,0.05);
    border-radius: 16px;
}

.personal__info__background{
    height: 132px;
    width: 100%;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    flex: 0 0 auto;
    background: linear-gradient(126deg, rgb(195, 224, 212) -27.085%, rgb(255, 253, 230) 35.6929%, rgb(247, 235, 203) 75.0343%, rgb(250, 243, 230) 100%);
}

.personal__info__image__container{
    position: absolute;
    height: 64px;
    width: 64px;
    z-index: 1;
    left: 20px;
    top: 91px;
    transition: 0.3s;

    background-color: rgb(250,250,250);
    border-radius: 50%;
}

.personal__info__image__container:hover{
    transform: scale(0.8);
}

.personal__info__image__container a{
    display: flex;
    height: 100%;
    width: 100%;
}

.personal__info__image img{
    width: 100%;
    height: 100%;
}

.personal__info__content{
    display: flex;
    flex-flow: column;
    height: min-content;
    width: 100%;
    gap: 24px;
}

.personal__info__container{
    display: flex;
    flex-flow: column;
    gap: 16px;
    height: min-content;
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
}

.personal__info__description__header{
    display: flex;
    flex-flow: column;
    gap: 4px;
    width: 100%;
    height: min-content;
    padding: 0;
    justify-content: flex-start;
}

.personal__info__description__header h1{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-size: 24px;
    font-weight: 700;
    font-style: normal;
    color: rgb(51, 51, 51);
    letter-spacing: -1px;
    text-align: left;
    line-height: 1.2em;
}

.personal__info__description__header h2{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-size: 13px;
    font-weight: 500;
    font-style: normal;
    color: rgb(136, 136, 136);
    letter-spacing: -0.2px;
    text-align: left;
    line-height: 1.5em;
}

.personal__info__description__container{
    display: flex;
    flex-flow: column;
    gap: 10px;
    height: min-content;
    width: 100%;
    padding: 0;
    place-content: center flex-start;
    align-items: center;
}

.personal__info__description{
    display: flex;
    padding: 0;
    justify-content: flex-start;
}

.personal__info__description h2{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    color: rgb(136, 136, 136);
    letter-spacing: -0.2px;
    text-align: left;
    line-height: 1.5em;
}

.wp__personal__info__links__container{
    display: flex;
    flex-flow: row;
    gap: 10px;
    height: min-content;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    padding: 0 20px;
    box-sizing: border-box;
}

.wp__personal__info__link{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
}

.wp__personal__info__link a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: rgb(243, 243, 243);
    border-radius: 21px;
}

.wp__personal__info__link__image{ 
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    width: 24px;
}





.wk__selected__work__container{
    display: flex;
    flex-flow: column;
    flex: 0.65 0 0px;
    width: 100%;
    height: min-content;
    gap: 24px;
    padding: 0;

}


.yellow__default__frame{
    display: flex;
    flex-direction: column;
    border-style: solid;
    border-width: 1px;
    border-radius: 16px;
    border-color: rgba(156, 143, 109, 0.5);
    background-color: rgb(255,251,245);
    height: auto;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.yellow__default__frame__content{
    display: flex;
    flex-flow: column;
    gap: 8px;
}

.yellow__default__frame__content ul{
    display: table-cell;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;

    font-family: var(--font-mainpage-title);
    font-style: normal;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.2px;
    line-height: 1.5em;
    text-align: left;
    color: rgb(156, 143, 109);
}

.yellow__default__frame__content li::before{
    width: 2.25ch;
    box-sizing: border-box;
    padding-inline-end: 0.75ch;
    content: "•";
}

.selected__work__header{
    display: flex;
    flex-flow: column;
    gap: 16px;
}

.sel__work__header__title h1{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-style: normal;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -1px;
    line-height: 1.2em;
    text-align: left;
    color: rgb(51, 51, 51);
}



.wk__project__container{
    display: flex;
    flex-flow: column;
    flex: 0 0 auto;

    border-radius: 16px;

    background-color: rgb(255, 255, 255);
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
}

.wk__project__container a{
    text-decoration: none;
    display: flex;
    flex-flow: column;
    gap: 24px;
}

.wk__project__info__container{
    display: flex;
    flex-flow: column;
    flex: 0 0 auto;
    gap: 16px;
    height: min-content;
    width: 100%;
    padding: 0;
}

.wk__project__header__container{
    display: flex;
    flex-flow: column;
    gap: 10px;
    padding: 0;
    width: 100%;
}

.wk__project__titles{
    display: flex;
    flex-flow: column;
    gap: 4px;
    height: min-content;
    width: 100%;
    padding: 0;
    align-items: left;
}

.wk__project__titles h1{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-style: normal;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1.5em;
    text-align: left;
    color: rgb(51, 51, 51);
}

.wk__project__titles h2{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-style: normal;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 1.5em;
    text-align: left;
    color: rgb(136, 136, 136);
}

.wk__project__desc{
    display: flex;
    flex-flow: column;
    flex-shrink: 0;
    justify-content: flex-start;
}

.wk__project__desc p{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-style: normal;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 1.5em;
    text-align: left;
    color: rgb(136, 136, 136);
}



.wk__project__tags__container{
    display: flex;
    flex-flow: row;
    align-items: center;
    gap: 10px;
    height: min-content;
    width: 100%;
    padding: 0;
}

.wk__project__tag{
    display: flex;
    place-content: center;
    background-color: rgba(59, 204, 204, 0.1);
    border-radius: 8px;
    padding: 4px 12px;
}

.wk__project__tag h2{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-style: normal;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 1.5em;
    text-align: left;
    color: rgb(0, 117, 138);
}

#ocr-project-tag{
    background-color: rgba(59, 69, 204, 0.1);
}

#ocr-project-tag h2{
    color: rgb(0, 44, 138);
}

#project-tag__social-network{
    background-color: rgba(78, 204, 59, 0.1);
}

#project-tag__social-network h2{
    color: rgb(57, 138, 0);
}

#project-tag__energy-forecasting{
    background-color: rgba(59, 182, 204, 0.1);
}

#project-tag__energy-forecasting h2{
    color: rgb(0, 117, 138);
}


.wk__project__image__container{
    height: 284px;
    width: 100%;
    overflow: hidden;
    position: relative;

    border-style: solid;
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.05);
    border-radius: 24px;
}

.wk__project__image{
    /* aspect-ratio: 1.77778 / 1; */
    top: 0px;
    bottom: 0px;
    left: 50%;
    overflow: hidden;
    /* position: absolute; */
}

.wk__project__image img{
    width: 100%;
}




/* ABOUT ME PAGE */


.ap__page__content{
    display: flex;
    flex-flow:column;
}

.ap__content__container{
    display: flex;
    
    padding: 0 40px 80px;
}

.ap__page__frame1{
    display: flex;
    flex-flow: row;
    gap: 24px;
}

.ap__frame1__about__me{
    display: flex;
    flex-flow: column;
    flex: 0.5;
    gap: 24px;
}

.ap__frame1__work{
    display: flex;
    flex-flow: column;
    flex: 0.5;
    gap: 24px;
}

.contact__me__links__container{
    display: flex;
    flex-flow: row;
    gap: 4px;
    align-items: center;

    font-family: var(--font-mainpage-title);
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    color: rgb(136, 136, 136);
    letter-spacing: -0.2px;
    text-align: left;
    line-height: 1.2em;
}

.contact__me__links__container a{
    text-decoration: none;
}

.contact__me__links__container a:hover{
    text-decoration: underline currentColor;
}



.my__story__frame{
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 0;
    width: 100%;
    height: auto;
}

.my__story__header{
    display: flex;
    flex-flow: column;
    gap: 16px;
    padding: 0;
    width: 100%;
}

.my__story__header h1{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-size: 18px;
    font-weight: 700;
    font-style: normal;

    color: rgb(51, 51, 51);
    letter-spacing: -0.5px;
    text-align: left;
    line-height: 1.2em;
}

.my__story__image{
    display: flex;
    width: 64px;
    height: 64px;
    z-index: 1;
}

.my__story__image img{
    width: 100%;
    height: 100%;
}

.my__story__content{
    display: flex;
    flex-flow: column;
    gap: 10px;
    width: 100%;
    height: auto;
    padding: 0;
}

.my__story__content h2{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-size: 14px;
    font-weight: 400;
    font-style: normal;

    color: rgb(136, 136, 136);
    letter-spacing: -0.2px;
    text-align: left;
    line-height: 1.2em;
}


.my__stack__container{
    display: grid;
    gap: 0px;
    align-items: center;
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    grid-template-rows: repeat(2, min-content);
    grid-template-rows: auto;
    height: min-content;
    width: 100%;
    padding: 0;
}

.stack__tech__container{
    display: flex;
    flex-flow: row;
    gap: 24px;
    padding: 0 1rem 28px 0;
    width: 100%;
    height: auto;
    align-items: center;
    box-sizing: border-box;
}

.stack__tech__logo{
    display: flex;
    height: 40px;
    width: 40px;
}

.stack__tech__logo img{
    width: 100%;
    height: 100%;
}

.stack__tech__data{
    display: flex;
    flex-flow: column;
    gap: 4px;
}

.stack__tech__data h2{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    color: rgb(136, 136, 136);
    letter-spacing: -0.2px;
    text-align: left;
    line-height: 1.5em;
}

.stack__tech__data h3{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    color: rgb(44, 44, 44);
    letter-spacing: -0.25px;
    text-align: left;
    line-height: 1.2em;
}


/* OTHER PAGE */

.op__content__container{
    display: flex;
    width: 100%;
    height: auto;
    gap: 24px;
}

.other__page__content{
    display: flex;
    flex-flow: row;
    gap: 24px;
    padding: 0px 80px;
    width: 100%;
    height: min-content;
}

.other__page__container{
    display: flex;
    flex-flow: row;
    gap: 24;
    padding: 4;
}

.other__page__left__panel__container{
    display: flex;
    flex-flow: column;
    place-content: center flex-start;
    flex: 0.25 0 0px;
    padding: 24px 20px;
    position: sticky;
    top: 20px;
    gap: 16px;
    z-index: 1;
    height: min-content;
    background-color: rgb(255, 255, 255);

    border-style: solid;
    border-width: 1px;
    border-radius: 16px;
    border-color: rgba(34, 34, 34, 0.05);

}

.other__page__left__panel{
    display: flex;
    flex-flow: column;
    gap: 16px
}

.op__left__panel__header h1{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-size: 18px;
    font-weight: 700;
    font-style: normal;
    color: rgb(51, 51, 51);
    letter-spacing: -0.5px;
    text-align: left;
    line-height: 1.2em;
}

.op__left__panel__desc h2{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    color: rgb(136, 136, 136);
    letter-spacing: -0.2px;
    text-align: left;
    line-height: 1.5em;
}

.op__left__panel__line{
    width: 100%;
    flex: 0 0 auto;
    background-color: rgba(0, 0, 0, .06);
    height: 1px;

}

.op__left__panel__index{
    display: flex;
    flex-flow: column;
    gap: 10px;
    width: 100%;
    height: min-content;
}

.op__left__panel__index h2{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-size: 14px;
    font-weight: 600;
    font-style: normal;
    color: rgb(51, 51, 51);
    letter-spacing: -0.2px;
    text-align: left;
    line-height: 1.5em;
}

.op__left__panel__index a{
    text-decoration: none;
    color: inherit;
}

.other__projects__container{
    display: flex;
    flex-flow: column;
    flex: 0.75 0 0px;
    gap: 24px;
}

.op__project__container{
    display: flex;
    flex-flow: column;
    width: 100%;
    height: min-content;
    gap: 24px;
    padding: 20px;
    box-sizing: border-box;
}

.op__project__image__container{
    display: flex;
    align-items: center;
    height: auto;
    width: 100%;
    border-radius: inherit;
    overflow: hidden;
    aspect-ratio: 1.77778 / 1;

    border-style: solid;
    border-radius: 24px;
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.05);

}

.op__project__image{
    width: 100%;
    height: 100%;
}

.op__project__image img{
    height: 100%;
    width: 100%;
}

.op__project__header__container{
    display: flex;
    flex-flow: column;
    gap: 16px;
}

.op__project__titles{
    display: flex;
    flex-flow: column;
    gap: 4px;
}

.op__project__titles h1{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-size: 22px;
    font-weight: 700;
    font-style: normal;
    color: rgb(51, 51, 51);
    letter-spacing: -1px;
    text-align: left;
    line-height: 1.2em;
}

.op__project__titles h2{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-size: 13px;
    font-weight: 500;
    font-style: normal;
    color: rgb(136, 136, 136);
    letter-spacing: -0.3px;
    text-align: left;
    line-height: 1.5em;
}

.op__project__desc p{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    color: rgb(136, 136, 136);
    letter-spacing: -0.2px;
    text-align: left;
    line-height: 1.5em;
}

.op__project__tags__container{
    display: flex;
    flex-flow: row;
    gap: 10px;
    width: 100%;
    height: min-content;
    padding: 0;
    align-items: center;
}

.op__project__tag{
    display: flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 8px;
    background-color: rgba(51, 207, 255, 0.1);
}

.op__project__tag h2{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    color: rgb(0, 140, 255);
    letter-spacing: -0.2px;
    text-align: left;
    line-height: 1.5em;
}


/* PROJECT PAGE */

/* TEMPLATES */

.banner-image__project{
    display: flex;
    height: 272;
    width: 100%;
    overflow: hidden;

    border-style: solid;
    border-radius: 24px;
    border-color: rgba(0, 0, 0, 0.05);
    border-width: 1px;
}

.banner-image__project img{
    width: 100%;
    height: 100%;
}

.nav-index__project--container{
    display: flex;
    flex-flow: column;
    flex: 0.2 0 0px;
    gap: 16px;
    padding: 24px 20px;
    background-color: rgb(255, 255, 255);

    position: sticky;
    top:20px;
    z-index: 1;
    height: min-content;

    border-style: solid;
    border-width: 1px;
    border-radius: 16px;
    border-color: rgba(34, 34, 34, 0.05);
}

.nav-index__project--navbutton{
    display: flex;
    height: min-content;
    padding: 0;
    text-decoration: none;
}

.nav-index__project--navimagen{
    height: 24px;
    width: 16px;
}


.nav--index__project--titile h2{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    color: rgb(51, 51, 51);
    letter-spacing: -0.3px;
    text-align: left;
    line-height: 1.5em;
}

.nav--index__project--content{
    display: flex;
    flex-flow: column;
    gap: 10px;
    padding: 0px;
    height: min-content;
    width: 100%;
    align-items: left;
    justify-content: start;
}

.nav--index__project--content a{
    text-decoration: none;
    color: inherit;
}

.nav--index__project--content h2{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    color: rgb(136, 136, 136);
    letter-spacing: -0.3px;
    text-align: left;
    line-height: 1.5em;
}

.nav--index__project--content h2:hover{
    color: #000000;
}

.nav--index__project--line{
    display: flex;
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, .06);
}

.nav--index__project--nexttitle a{
    text-decoration: none;
    color: inherit;
}

.nav--index__project--nexttitle h2{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    color: rgb(51, 51, 51);
    letter-spacing: -0.3px;
    text-align: left;
    line-height: 1.5em;
}

.nav--index__project--nexttitle h2:hover{
    color: #000000;
}


.white-frame{
    display: flex;
    flex-flow: column;
    width: 100%;
    height: min-content;
    box-sizing: border-box;
    padding: 40px;
    gap: 40px;
    scroll-margin-top: 20px;
    background-color: rgb(255, 255, 255);

    border-style: solid;
    border-width: 1px;
    border-radius: 16px;
    border-color: rgba(34, 34, 34, 0.05);
}

.project-content--metadata__container{
    display: flex;
    flex-flow: row;
    gap: 0;
    height: 57px;
    width: 100%;
    padding: 0;
    align-items: center;
}

.project-content--metadata__content{
    display: flex;
    flex-flow: column;
    gap: 4px;
    height: 100%;
    width: 100%;
    align-items: flex-start;
}

.project-content--metadata__content h1{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
    color:rgb(51, 51, 51);
    letter-spacing: 0px;
    text-align: left;
    line-height: 1.5em;
}

.project-content--metadata__content h2{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    color:rgb(128, 128, 128);
    letter-spacing: 0px;
    text-align: left;
    line-height: 1.5em;
}

.project-content--metadata__links{
    display: flex;
    flex-flow: row;
}

.project-content--metadata__images{
    display: flex;
    flex-flow: row;
    height: 100%;
    gap: .5rem;
}

.project-content--metadata__images img{
    height: 30px;
}


.project-content--paragraph__1{
    display: flex;
    flex-flow: column;
    width: 100%;
    height: min-content;
    gap: 16px;
    padding: 0;
}

.project-content--paragraph__1 h1{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-size: 22px;
    font-weight: 700;
    font-style: normal;
    color: rgb(51, 51, 51);
    letter-spacing: -1px;
    text-align: left;
    line-height: 1.5em;
}

.project-content--paragraph__1 h2{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    color: rgb(136, 136, 136);
    letter-spacing: -0px;
    text-align: left;
    line-height: 1.5em;
}

.project-content--line{
    display: flex;
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, .06);
}

.project-content--paragraph__2{
    display: flex;
    flex-flow: column;
    width: 100%;
    height: min-content;
    gap: 16px;
    padding: 0;
}

.project-content--paragraph__2 h1{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-size: 18px;
    font-weight: 700;
    font-style: normal;
    color: rgb(51, 51, 51);
    letter-spacing: -0.5px;
    text-align: left;
    line-height: 1.5em;
}

.project-content--paragraph__2 h2{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    color: rgb(136, 136, 136);
    letter-spacing: -0px;
    text-align: left;
    line-height: 1.5em;
}

.image-frame__template1{
    height: 440px;
    display: flex;
}

.image-frame__template1 img{
    width: 100%;
    height: 100%;
}

.project-content--header__1{
    display: flex;
    flex-flow: column;
    width: 100%;
    height: min-content;
    gap: 4px;
    padding: 0;
}

.project-content--header__1 h1{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-size: 18px;
    font-weight: 700;
    font-style: normal;
    color: rgb(51, 51, 51);
    letter-spacing: -0.5px;
    text-align: left;
    line-height: 1.5em;
}

.project-content--header__1 h2{
    margin: 0;

    font-family: var(--font-mainpage-title);
    font-size: 13px;
    font-weight: 500;
    font-style: normal;
    color: rgb(136, 136, 136);
    letter-spacing: -0px;
    text-align: left;
    line-height: 1.5em;
}

.yellow-frame{
    display: flex;
    padding: 20px;
    align-items: left;
    box-sizing: border-box;
    width: 100%;
    height: min-content;
    background-color: rgba(250, 243, 230, 0.5);

    border-style: solid;
    border-width: 1px;
    border-radius: 16px;
    border-color: rgba(156, 143, 109, 0.1)
}

.yellow-frame ol{
    padding: 0;
    margin: 0;
    width: 100%;
    height: min-content;
    list-style-position: inside;

}

.yellow-frame li{
    font-family: var(--font-mainpage-title);
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    color: rgb(156, 143, 109);
    letter-spacing: 0px;
    text-align: left;
    line-height: 1.5em;
    width: 100%;
    box-sizing: border-box;
}

.black-frame--container{
    display: flex;
    flex-flow: row;
    gap: 10px;
    height: min-content;
    min-height: min-content;
    width: 100%;
    align-items: flex-start;
}



.black-frame{
    display: flex;
    flex-flow: column;
    min-height: inherit;
    height: 100%;
    width: 100%;
    padding: 20px;
    gap: 10px;
    background-color: rgb(17, 17, 17);
    box-sizing: border-box;

    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
    border-color: rgb(17, 17, 17);
}

.black-frame--content{
    display: flex;
    flex-flow: column;
    gap: 8px;
    place-content: center flex-start;
    width: 100%;
    height: 100%;
    padding: 0;
}

.black-frame--header{
    margin: 0;
    font-family: var(--font-mainpage-title);
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    color: rgb(255, 255, 255);
    letter-spacing: 0px;
    text-align: left;
    line-height: 1.5em;
}

.black-frame--header__2{
    margin: 0;
    font-family: var(--font-mainpage-title);
    font-size: 28px;
    font-weight: 600;
    font-style: normal;
    color: rgb(255, 255, 255);
    letter-spacing: 0px;
    text-align: left;
    line-height: 1.5em;
}

.black-frame--paragraph{
    margin: 0;
    font-family: var(--font-mainpage-title);
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    color: rgb(201, 201, 201);
    letter-spacing: 0px;
    text-align: left;
    line-height: 1.5em;
}

.black-frame--paragraph__2{
    margin: 0;
    font-family: var(--font-mainpage-title);
    font-size: 13px;
    font-weight: 400;
    font-style: normal;
    color: rgb(255,255,255);
    letter-spacing: 0px;
    text-align: left;
    line-height: 1.5em;
}


/* STYLING */

.project-page--container{
    display: flex;
    flex-flow: row;
    gap: 24px;

    padding: 0px 80px;
    width: 100%;
    height: min-content;
    box-sizing: border-box;
    padding-bottom: 3rem;
}

.project-page--content{
    display: flex;
    flex: 0.80 0 0px;
    flex-flow: column;
    gap: 24px;
    box-sizing: border-box;
    height: min-content;
    width: 100%;
    padding: 0;
}