/* PAGE LAYOUT STYLES */
/**********************************************************************************************************/
/* GENERAL LAYOUT */

html {
    background-color: var(--page-background-color);
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    box-sizing: border-box; /* Include padding and border in width and height calculation */
}

#whole_page_container_lv1 {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    flex-grow: 1; /* To take up all available space */
}

#whole_page_container_lv2 {
    /*margin: 12% 0 0 0;*/
    margin: 0% 0 0 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    display: grid; /*0.4fr*/
    grid-template-rows: 0.1fr 0.1fr auto auto auto 3vw;
    gap: 3vw;
    justify-items: center; /* Added to center items horizontally */
    flex-grow: 1; /* To take up all available space */
}

#about_blog_whole_page_container_lv2 {
    margin: 0;
    width: 100%;
    min-height: 100%;
    flex-grow: 1; /* To take up all available space */
    display: grid;
    grid-template-columns: 100%;
    /*margin-top: 12%;*/
    margin-top: 4%;
    margin-bottom: 0px;
    padding: 0px;
    
    grid-template-rows: auto auto auto auto auto 3vw;
    gap: 4vw;
    justify-items: center;
    flex-grow: 1;
}

#about_me_whole_page_container_lv2 {
    margin: 0;
    width: 100%;
    min-height: 100%;
    flex-grow: 1; /* To take up all available space */
    display: grid;
    grid-template-columns: 100%;
    /*margin-top: 12%;*/
    margin-top: 4%;
    margin-bottom: 0px;
    padding: 0px;
    grid-template-rows: auto auto auto auto 0.7fr 3vw;
    gap: 1vw;
    justify-items: center;
    flex-grow: 1;
}

#blogpost_list_whole_page_container_lv2 {
    margin: 0;
    /*margin-top: 12%;*/
    margin-top: 4%;
    box-sizing: border-box;
    grid-template-rows: auto 0.1fr auto auto auto 0.4fr 3vw;
    gap: 3vw;
    width: 100%;
    height: 100%;
    flex-grow: 1; /* To take up all available space */
    display: grid;
    grid-template-columns: 100%;
    justify-items: center;
}

/* Styles for blog post containers: */
#blogpost_contanier_lv1 {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: top;
    width: 100%;
    height: 100%;
    min-height: 100%;
    flex-grow: 1; /* To take up all available space */
}

#blogpost_contanier_lv2 {
    margin: 0;
    margin-top: 8%;
    padding: 0px;
    display: flex;
    flex-direction: column;
    top: 0%;
    align-items: center; /* Keeps content horizontally centered */
    width: 100%;
    height: 100%;
    min-height: 100%;
    gap: 3vw; /* Gap between elements */
}

/**********************************************************************************************************/
/**********************************************************************************************************/
/* WE WILL GROUP THE STYLES OF THE CELLS ACCORDING TO MARGINS AND PADDINGS, ALIGNMENT OF THEIR ELEMENTS (EITHER FLEX OR GRID), AND OTHER ATTRIBUTES */
/* STYLES FOR DIFFERENT TYPES OF CELLS */

/* MARGINS AND PADDINGS: */
.cell_margin_1 {
    margin: 0;
    padding: 0;
    width: 80%;
    height: 100%;
}

.cell_margin_2 {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.cell_margin_3 {
    margin: 2em 0;
}

/* ALIGNMENT OF ELEMENTS: */

.cell_align_1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cell_align_2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.cell_align_3 {
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-rows: 100%;
}

.cell_align_4 {
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Aligns the captions at the bottom */
}

/* BACKGROUND COLOR STYLES: */
.cell_dialoguebox {
    background: var(--dialogue-box-background);
    border-radius: 15px;
    box-shadow: 10px -10px 5px rgb(0, 0, 0); /* Shadow effect */
}

/**********************************************************************************************************/
/* UNIQUE OR SPECIAL CELL STYLES: */
#footer {
    width: 100%;
    height: 100%;
    margin: 0;
    margin-top: auto;
    padding: 0;
    background: var(--dialogue-box-background);
    box-shadow: 10px -10px 5px rgb(0, 0, 0); /* Shadow effect */
}

#blogpost_footer {
    width: 100%;
    height: 3vw;
    margin: 0;
    margin-top: auto;
    padding: 0;
    background: var(--dialogue-box-background);
    box-shadow: 10px -10px 5px rgb(0, 0, 0); /* Shadow effect */
}

/* Special layouts: */
.cell_special_1 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

/* Social media images and profile images: */
.socials_img_1_cointainer {
    padding:1vw;
    height: 100%;
}

.socials_img_1 {
    height: 70%;
}

.socials_img_2 {
    padding: 0px;
    height: 6vw;
    margin-left: 5vw;
}

#profile_image_1 {
    border-radius: 50%;
    height: 20vw;
    margin-bottom: 0vw;
    object-position: center;
}

@media (max-width: 350px) {
    .cell_special_1 {
        flex-direction: column;
    }
    .socials_img_1_cointainer {
        width: 100%;
        height: auto;
    }
    .socials_img_1 {
        width: 80%;
        height: auto;
    }
}
/**********************************************************************************************************/
/* SPECIAL INSTRUCTIONS: */

.overflow_x_hidden {
    overflow-x: hidden;
}

.overflow_y_hidden {
    overflow-y: hidden;
}

.overflow_x_scroll {
    overflow-x: scroll;
}

.overflow_y_scroll {
    overflow-y: scroll;
}

.flex_grow_instruction {
    flex-grow: 1; /* To take up all available space */
}

.blogpostlist_front_miniature_work_in_progress_svg {
    margin: 0;
    margin-bottom: 1vw;
    padding: 0px;
    width: 25%;
}


.blogpostlist_front_miniature_image_1 {
    margin: 0;
    margin-bottom: 1vw;
    padding: 0px;
    width: 50%;
}
/**********************************************************************************************************/
/* RESPONSIVE STYLES: */

@media (min-width: 1000px) and (max-width: 999999999px) {
    #profile_image_1{
        height: 25vw;
    }
}
@media (min-width: 700px) and (max-width: 999px) {
    #profile_image_1 {
        height: 30vw;
    }
    .socials_img_2 {
        height: 8vw;
    }
}
@media (min-width: 450px) and (max-width: 699px) {
    #profile_image_1 {
        height: 35vw;
    }
    .socials_img_2 {
        height: 10vw;
    }
}
@media (min-width: 120px) and (max-width: 449px) {
    #profile_image_1 {
        height: 40vw;
    }
    .socials_img_2 {
        height: 12vw;
    }
}

/**********************************************************************************************************/
/* STATIC LIGHT AND DARK THEMES: */

:root {
    --page-background-color: rgb(0,12,25);
    --dialogue-box-background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0.7));
    --submenu-link-background: linear-gradient(to top, rgba(255,255,255,0.7), rgba(255,255,255,1));
    --whithout-dialogue-box-text-color: white;
    --colored-letters: linear-gradient(to top, rgba(255, 126, 95, 1), rgba(254, 180, 123, 1));
    --toggle-circle-left-position: 0.5vw;
}

[data-theme="light"] {
    --page-background-color: white;
    --dialogue-box-background: linear-gradient(to top, rgba(128,128,128,1), rgba(179,179,179,0.7));
    --submenu-link-background:linear-gradient(to top, rgba(179,179,179,0.7), rgba(128,128,128,1));
    --whithout-dialogue-box-text-color: black;
    --colored-letters: linear-gradient(to top, rgba(0, 123, 255, 1), rgba(0, 255, 102, 1));
    --toggle-circle-left-position: 14.5vw;
}

/**********************************************************************************************************/
/**********************************************************************************************************/
/**********************************************************************************************************/
/* SPECIAL INSTRUCTIONS: */

.link_without_style {
    text-decoration: none;
    color: inherit;
}

.blogpost_abstract_width {
    width: 80%;
}

.blogpost_content_width {
    width: 90%;
}

.flex_gap_1 {
    gap: 2vw;
}

.flex_gap_2 {
    gap: 1vw;
}

/**********************************************************************************************************/
/* STYLES FOR POST TABLES: */

.blogpost_table_model_1 {
    border-top: 2px solid var(--whithout-dialogue-box-text-color);  /* Upper line */
    border-bottom: 2px solid var(--whithout-dialogue-box-text-color); /* Lower line */
    color: var(--whithout-dialogue-box-text-color);
    border-collapse: collapse;
    text-align: center;
    table-layout: fixed;  /* Fixed width cells */
}

.cell_padding_1 {
    padding: 1vw;
}

.horizontal_sep_underline_thin {
    border-bottom: 1px solid var(--whithout-dialogue-box-text-color); /* Horizontal line */
}

.horizontal_sep_underline_thick {
    border-bottom: 2px solid var(--whithout-dialogue-box-text-color); /* Horizontal line */
}

.table_caption_model_1 {
    caption-side: bottom;
}
  
figcaption {
    color: var(--whithout-dialogue-box-text-color);
    display: inline-block;
}

figcaption p {
    font-style: italic;
}

/**********************************************************************************************************/
/* FIGURE/IMAGE STYLES:*/

.flex_wrap {
    flex-wrap: wrap;
}

.justify_space_around {
    justify-content: space-around;   /* Evenly distribute images */
}

.fullwidth {
    width: 100%;
}

.fullheight {
    height: 100%;
}

.figure_single_1_width {
    width: 100%;
}

.gallery_img_width_1 {
    width: 100%;
}

/**********************************************************************************************************/
/* EQUATION STYLES:*/

.inline_block {
    display: inline-block;
}

.equation-with-number {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 20px; /* Increase space between equation and number */
}

.equation {
    font-size: 1.2em;
    margin: 0;
}

.equation-number {
    font-size: 1.5em;
    margin-top: 0.25em; /* Adjust top margin of the number */
}