/*PHP file core*/
/*default.css*/
/*V1.0.0*/
/*MSCRATCH*/
/*MMXXV*/

* {
box-sizing: border-box;
padding: 0;
margin: 0;
}

/*root*/

:root {
font-size: 62.5%; /*10PX*/

--body_bg_color: #202020;
--body_font_family: Inter, ui-sans-serif, system-ui, sans-serif;
--body_font_color: #9c9c9c;
--body_line_height: 1.65;

/*wrapper*/

--wrapper_border_color: #414141;
--wrapper_bg_color: #2b2b2b;

--wrapper_font_size: 1.3rem;
--wrapper_font_weight: 400;
--wrapper_font_color: #9c9c9c;

--wrapper_title_bg_color: #353535;
--wrapper_title_font_size: 1.3rem;
--wrapper_title_font_color: #d8d8d8;
--wrapper_title_font_weight: 600;

--wrapper_footer_bg_color: #353535;

/*wrapper*/

/*template*/

--template_wrapper_bg_color: #2b2b2b;
--template_wrapper_border_color: #414141;

--template_wrapper_font_size: 1.3rem;
--template_wrapper_font_color: #9c9c9c;
--template_wrapper_font_weight: 400;

--template_wrapper_title_bg_color: #353535;
--template_wrapper_title_font_size: 1.3rem;
--template_wrapper_title_font_color: #d8d8d8;
--template_wrapper_title_font_weight: 600;

--template_wrapper_footer_bg_color: #353535;

/*template*/

/*profile_widget*/

--profile_widget_title_font_size: 1.3rem;
--profile_widget_title_font_weight: 600;
--profile_widget_title_font_color: #d8d8d8;

--profile_widget_border_color: #414141;
--profile_widget_bg_color: #2b2b2b;

--profile_widget_meta_font_size: 1.3rem;
--profile_widget_meta_font_weight: 500;
--profile_widget_meta_font_color: #8a8a8a;

--profile_widget_offline_font_family: Inter, ui-sans-serif, system-ui, sans-serif;
--profile_widget_offline_font_size: 1.3rem;
--profile_widget_offline_font_weight: 600;
--profile_widget_offline_font_color: #FCA5A5;

--profile_widget_online_font_family: Inter, ui-sans-serif, system-ui, sans-serif;
--profile_widget_online_font_size: 1.3rem;
--profile_widget_online_font_weight: 600;
--profile_widget_online_font_color: #A2E3A4;

/*profile_widget*/

/*cards*/

--card_wrapper_bg_color: #353535;
--card_wrapper_border_color: #414141;

--card_wrapper_font_size: 1.5rem;
--card_wrapper_font_weight: 400;
--card_wrapper_hover_border_color: rgba(255,255,255,.14);
--card_wrapper_hover_bg_color: #3f3f3f;

--card_wrapper_font_color_link: #eeeeee;

--card_content_title_font_size: 1.3rem;
--card_content_title_font_color: #d8d8d8;
--card_content_title_font_weight: 600;
--card_content_font_color: #8a8a8a;
--card_content_font_weight: 500;

/*cards*/

/*view_file*/

--view_file_meta_font_size: 1.3rem;
--view_file_meta_label_font_color: #777777;
--view_file_meta_value_font_color: #c5c5c5;

--view_file_screenshot_border_color: #303030;

/*view_file*/

/*component_list*/

--component_list_item_bg_color: #2b2b2b;

--component_list_item_border_color: #414141;
--component_list_item_hover_bg_color: #333333;

--component_list_title_font_size: 1.3rem;
--component_list_title_font_weight: 600;
--component_list_title_font_color: #d8d8d8;

--component_list_name_font_size: 1.3rem;
--component_list_name_font_weight: 500;
--component_list_name_font_color: #d5d5d5;

--component_list_meta_font_color: #777777;
--component_list_meta_font_size: 1.2rem;
--component_list_meta_font_weight: 400;

/*component_list*/

/*comments*/

--comment_bg_color: #2b2b2b;

--comment_border_color: #414141;
--comment_hover_bg_color: #333333;

--comment_name_font_color: #d8d8d8;
--comment_name_font_size: 1.3rem;
--comment_name_font_weight: 600;

--comment_meta_font_color: #707070;
--comment_meta_font_size: 1.3rem;
--comment_meta_font_weight: 500;

--comment_text_font_color: #9c9c9c;
--comment_text_font_size: 1.3rem;
--comment_text_font_weight: 400;

--comment_badge_font_family: Inter, ui-sans-serif, system-ui, sans-serif;
--comment_badge_font_size: 1.3rem;
--comment_badge_font_weight: 600;
--comment_badge_font_color: #FCA5A5;

/*comments*/

/*content_entries*/

--content_entry_bg_color: #2b2b2b;

--content_entry_border_color: #414141;
--content_entry_hover_bg_color: #333333;

--content_entry_name_font_color: #d8d8d8;
--content_entry_name_font_size: 1.3rem;
--content_entry_name_font_weight: 600;

--content_entry_meta_font_color: #9c9c9c;
--content_entry_meta_font_size: 1.35rem;

--content_entry_text_font_color: #9c9c9c;
--content_entry_text_font_size: 1.3rem;

/*content_entries*/

/*footer*/

--footer_wrapper_border_color: #414141;
--footer_wrapper_bg_color: #272727;

--footer_title_font_family: Inter, ui-sans-serif, system-ui, sans-serif;
--footer_title_font_size: 2.2rem;
--footer_title_font_weight: 700;
--footer_title_font_color: #ececec;

--footer_nav_link_font_size: 1.3rem;
--footer_nav_link_font_weight: 500;
--footer_nav_link_font_color: #8a8a8a;
--footer_nav_link_hover_color: #ffffff;

--footer_text_font_size: 1.3rem;
--footer_text_font_weight: 500;
--footer_text_font_color: #9c9c9c;

--footer_stats_border_color: #414141;
--footer_stats_bg_color: #2b2b2b;

--footer_stats_title_bg_color: #353535;
--footer_stats_title_font_size: 1.3rem;
--footer_stats_title_font_weight: 600;
--footer_stats_title_font_color: #d8d8d8;

--footer_stats_label_font_size: 1.3rem;
--footer_stats_label_font_weight: 400;
--footer_stats_label_font_color: #9c9c9c;

--footer_stats_value_font_size: 1.3rem;
--footer_stats_value_font_weight: 500;
--footer_stats_value_font_color: #d8d8d8;

--footer_bottom_border_color:  #414141;
--footer_bottom_bg_color: #353535;

--footer_bottom_text_font_size: 1.3rem;
--footer_bottom_text_font_color: #9c9c9c;
--footer_bottom_text_font_weight: 500;

--footer_bottom_label_font_size: 1.3rem;
--footer_bottom_label_font_color: #9c9c9c;
--footer_bottom_label_font_weight: 500;

/*footer*/

/*forms*/

--form_default_bg_color: #272727;
--form_default_border_color: #3d3d3d;

--form_default_font_family: Inter, ui-sans-serif, system-ui, sans-serif;
--form_default_font_size: 1.35rem;
--form_default_font_weight: 400;
--form_default_font_color: #d0d0d0;

--form_default_focus: #353535;
--form_default_hover_border_color: #5a5a5a;

--label_default_font_size: 1.35rem;
--label_default_font_weight: 500;
--label_default_font_color: #858585;

--placeholder_font_family: Inter, ui-sans-serif, system-ui, sans-serif;
--placeholder_font_size: 1.35rem;
--placeholder_font_weight: 500;
--placeholder_font_color: #a9a9a9;

/*forms*/

/*buttons*/

--btn_body_font_family: Inter, ui-sans-serif, system-ui, sans-serif;
--btn_body_font_size: 1.3rem;
--btn_body_font_weight: 600;
--btn_body_font_color: #a9a9a9;
--btn_body_border_color: #3d3d3d;
--btn_body_bg_color: #272727;
--btn_body_hover_border_color: #5a5a5a;
--btn_body_hover_bg: #353535;
--btn_body_hover_font_color: #e0e0e0;

/*buttons*/

/*links*/

--default_link_color: #9c9c9c;
--default_link_hover_color: #ffffff;

--title_link_color: #d8d8d8;
--title_link_hover_color: #ffffff;

/*links*/

/*spans*/

--span_b_font_family: Inter, ui-sans-serif, system-ui, sans-serif;
--span_b_font_size: 1.3rem;
--span_b_font_weight: 500;
--span_b_font_color: #d8d8d8;

--span_muted_font_family: Inter, ui-sans-serif, system-ui, sans-serif;
--span_muted_font_size: 1.3rem;
--span_muted_font_weight: 500;
--span_muted_font_color: #8a8a8a;

/*spans*/

/*flash_message*/

--flash_message_bg_color: #262626;
--flash_message_border_color: #414141;

--flash_message_font_size: 1.3rem;
--flash_message_font_color: #c5c5c5;
--flash_message_font_weight: 400;

/*flash_message*/

/*value_box*/

--value_box_bg_color: #272727;
--value_box_border_color: #3d3d3d;
--value_box_font_family: Inter, ui-sans-serif, system-ui, sans-serif;
--value_box_font_size: 1.35rem;
--value_box_font_weight: 400;
--value_box_font_color: #d0d0d0;
--value_box_focus: #353535;

/*value_box*/

/*progress*/

--progress_bg_color: #303030;
--progress_border_color: #414141;

--progress_track_border_color: #414141;
--progress_track_bg_color: #242424;

--progress_fill_bg_color: linear-gradient(90deg, #777, #aaa);

/*progress*/

/*archive*/

--archive_info_font_color: #9c9c9c;
--archive_info_font_size: 1.3rem;

--archive_tree_font_size: 1.3rem;
--archive_tree_font_family: Inter, ui-sans-serif, system-ui, sans-serif;

--tree_row_font_color: #9c9c9c;
--tree_row_hover_bg_color: #333333;

--tree_icon_color: #666666;
--tree_error_color: #888888;

--tree_file_font_size: 1.3rem;
--tree_file_font_weight: 400;
--tree_file_font_color: #9c9c9c;

--tree_folder_font_size: 1.3rem;
--tree_folder_font_weight: 600;
--tree_folder_font_color: #d8d8d8;

/*archive*/

}

/*root*/

/*body*/

body {
display: flex;
flex-direction: column;
min-height: 100vh;
font-family: var(--body_font_family);
color: var(--body_font_color);
line-height: var(--body_line_height);
overflow-wrap: anywhere;
background-color: var(--body_bg_color);
background-image: url("../images/texture_background.png");
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

body::before {
content: "";
position: fixed;
inset: 0;
background: url("../images/noise_overlay.png") repeat;
background-size: 300px 300px;
pointer-events: none;
z-index: 1500;
}

/*body*/

/*wrapper*/

.wrapper {
width: 100%;
margin: 0 auto;
font-size: var(--wrapper_font_size);
font-weight: var(--wrapper_font_weight);
text-align: left;
color: var(--wrapper_font_color);
}

.wrapper_title {
margin-bottom: 1rem;
font-size: var(--wrapper_title_font_size);
font-weight: var(--wrapper_title_font_weight);
color: var(--wrapper_title_font_color);
}

.wrapper_sm {
max-width: 420px;
}

/*wrapper*/

/*main_wrappers*/

.main_wrapper {
display: flex;
flex-direction: column;
flex: 1;
width: 100%;
padding: 4.2rem 2.2rem 6.5rem;
gap: 2.5rem;
}

.primary_wrapper {
display: flex;
flex-direction: column;
flex: 1;
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 4.2rem 2.2rem 6.5rem;
gap: 2.5rem;
}

/*main_wrappers*/

/*template row*/

.template_row {
display: flex;
flex-direction: row;
flex: 1;
width: 100%;
max-width: 1550px;
margin: 0 auto;
padding: 4.2rem 2.2rem 6.5rem;
gap: 2.5rem;
}

.template_column_1 {
flex: 17;
display: flex;
flex-direction: column;
gap: 2.5rem;
min-width: 0;
}

.template_column_2 {
flex: 83;
display: flex;
flex-direction: column;
gap: 2.5rem;
min-width: 0;
}

.template_wrapper {
width: 100%;
border: 1px solid var(--template_wrapper_border_color);
background-color: var(--template_wrapper_bg_color);
font-size: var(--template_wrapper_font_size);
font-weight: var(--template_wrapper_font_weight);
text-align: left;
color: var(--template_wrapper_font_color);
}

.template_wrapper_title {
padding: 1.4rem 1.6rem;
border-bottom: 1px solid var(--template_wrapper_border_color);
background-color: var(--template_wrapper_title_bg_color);
font-size: var(--template_wrapper_title_font_size);
font-weight: var(--template_wrapper_title_font_weight);
color: var(--template_wrapper_title_font_color);
}

.template_wrapper_footer {
padding: 1rem;
border-top: 1px solid var(--template_wrapper_border_color);
background-color: var(--template_wrapper_footer_bg_color);
}

.template_wrapper_content {
padding: 1.5rem;
}

.template_wrapper_nbg {
width: 100%;
font-size: var(--template_wrapper_font_size);
font-weight: var(--template_wrapper_font_weight);
text-align: left;
color: var(--template_wrapper_font_color);
}

.template_wrapper_nbg_title {
margin-bottom: 1rem;
font-size: var(--template_wrapper_title_font_size);
font-weight: var(--template_wrapper_title_font_weight);
color: var(--template_wrapper_title_font_color);
}

.wrapper_row {
display: flex;
flex-direction: row;
width: 100%;
gap: 2rem;
}

.wrapper_column_1 {
flex: 35;
min-width: 0;
}

.wrapper_column_2 {
flex: 65;
min-width: 0;
}

/*template row*/

/*profile_widget*/

.profile_widget_wrapper {
width: 100%;
}

.profile_widget_title {
margin-bottom: 1rem;
font-size: var(--profile_widget_title_font_size);
font-weight: var(--profile_widget_title_font_weight);
color: var(--profile_widget_title_font_color);
}

.profile_widget {
border: 1px solid var(--profile_widget_border_color);
background-color: var(--profile_widget_bg_color);
}

.profile_widget_content {
padding: 1.5rem;
}

.profile_widget_meta {
font-size: var(--profile_widget_meta_font_size);
font-weight: var(--profile_widget_meta_font_weight);
text-align: left;
color: var(--profile_widget_meta_font_color);
}

.profile_widget_image {
display: block;
width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
border-bottom: 1px solid var(--profile_widget_border_color);
}

span.profile_widget_offline {
font-family: var(--profile_widget_offline_font_family);
font-size: var(--profile_widget_offline_font_size);
font-weight: var(--profile_widget_offline_font_weight);
text-decoration: none;
color: var(--profile_widget_offline_font_color);
}

span.profile_widget_online {
font-family: var(--profile_widget_online_font_family);
font-size: var(--profile_widget_online_font_size);
font-weight: var(--profile_widget_offline_font_weight);
text-decoration: none;
color: var(--profile_widget_online_font_color);
}

/*profile_widget*/

/* card group*/

.card_group_row_3, .card_group_row_4 {
display: grid;
align-items: stretch;
gap: 2.5rem;
}

.card_group_row_3 {
grid-template-columns: repeat(3, 1fr);
}

.card_group_row_4 {
grid-template-columns: repeat(4, 1fr);
}

.card_wrapper {
width: 100%;
height: 100%;
border: 1px solid var(--card_wrapper_border_color);
background-color: var(--card_wrapper_bg_color);
font-size: var(--card_wrapper_font_size);
font-weight: var(--card_wrapper_font_weight);
text-align: left;
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

a.card_wrapper_link {
color: var(--card_wrapper_link_font_color);
text-decoration: none;
}

.card_wrapper:hover {
border-color: var(--card_wrapper_hover_border_color);
background-color: var(--card_wrapper_hover_bg_color);
cursor: pointer;
}

.card_data_row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}

.card_data_row:last-child {
border-bottom: none;
}

.card_cover {
position: relative;
overflow: hidden;
aspect-ratio: 16/10;
}

.card_cover.cover_full .cover_main, .card_cover.cover_square .cover_main {
position: relative;
display: block;
width: 100%;
height: 100%;
border-bottom: 1px solid var(--card_wrapper_border_color);
transition: filter 0.2s ease-in-out;
z-index: 2;
}

.card_cover.cover_full .cover_main {
object-fit: cover;
}

.card_cover.cover_square {
background:
radial-gradient(
ellipse 50% 70% at 50% 50%,
rgba(150, 30, 30, 0.12) 0%,
rgba(110, 25, 25, 0.05) 45%,
transparent 75%
),
radial-gradient(
ellipse at 50% 45%,
rgba(100, 100, 100, 0.32) 0%,
rgba(65, 65, 65, 0.45) 35%,
rgba(38, 38, 38, 0.85) 65%,
rgba(20, 20, 20, 1) 100%
),
#181818;
}

.card_cover.cover_square .cover_main {
object-fit: contain;
}

.card_wrapper:hover .card_cover .cover_main {
filter: brightness(1.10);
}

.card_content {
padding: 1rem;
}

.card_content_title {
font-size: var(--card_content_title_font_size);
font-weight: var(--card_content_title_font_weight);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--card_content_title_font_color);
}

.card_content_data {
font-size: var(--card_content_title_font_size);
font-weight: var(--card_content_font_weight);
color: var(--card_content_font_color);
}

/*card_group*/

/*value_box*/

.value_box {
display: inline-flex;
justify-content: flex-start;
align-items: center;
height: 3.6rem;
width: 100%;
padding: 0rem 1.1rem;
border: 1px solid var(--value_box_border_color);
outline: none;
background-color: var(--value_box_bg_color);
font-family: var(--value_box_font_family);
font-size: var(--value_box_font_size);
font-weight: var(--value_box_font_weight);
text-align: left;
color: var(--value_box_font_color);
}

/*value_box*/

/*progress*/

.progress {
padding: 15px 16px;
border: 1px solid var(--progress_border_color);
background: var(--progress_bg_color);
}

.progress_track {
height: 0.7rem;
background: var(--progress_track_bg_color);
border: 1px solid var(--progress_track_border_color);
}

.progress_fill {
height: 100%;
width: 0;
background: var(--progress_fill_bg_color);
transition: width .3s ease;
}

/*progress*/

/*view_file*/

.view_file_row {
display: flex;
flex-direction: row;
gap: 1.5rem;
}

.view_file_column_1 {
flex: 25;
overflow: hidden;
min-width: 0;
}

.view_file_column_2 {
flex: 75;
min-width: 0;
}

.view_file_image {
display: block;
width: auto;
height: auto;
max-width: 100%;
}

.view_file_meta {
display: grid;
grid-template-columns: 11rem 1fr;
row-gap: 0.8rem;
font-size: var(--view_file_meta_font_size);
}

.view_file_meta_label {
color: var(--view_file_meta_label_font_color);
}

.view_file_meta_value {
color: var(--view_file_meta_value_font_color);
}

.view_file_screenshots {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1rem;
}

.view_file_screenshot {
display: block;
width: 100%;
aspect-ratio: 16/10;
object-fit: cover;
border: 1px solid var(--view_file_screenshot_border_color);
transition: opacity 0.2s ease-in-out;
}

.view_file_screenshot:hover {
opacity: .8;
}

/*view_file*/

/*component_list*/

.component_list {
display: flex;
flex-direction: column;
}

.component_list_link {
border-bottom: 1px solid var(--component_list_item_border_color);
text-decoration: none;
}

.component_list_link:last-child {
border-bottom: none;
}

.component_list_item {
display: block;
min-height: 6.2rem;
padding: 1rem 1.2rem;
background: var(--component_list_item_bg_color);
transition: background-color 0.2s ease-in-out;
}

.component_list_item:hover {
background: var(--component_list_item_hover_bg_color);
}

.component_list_title {
font-size: var(--component_list_title_font_size);
font-weight: var(--component_list_title_font_weight);
color: var(--component_list_title_font_color);
}

.component_list_name {
font-size: var(--component_list_name_font_size);
font-weight: var(--component_list_name_font_weight);
color: var(--component_list_name_font_color);
}

.component_list_meta {
font-size: var(--component_list_meta_font_size);
font-weight: var(--component_list_meta_font_weight);
color:  var(--component_list_meta_font_color);
}

/*component_list*/

/*comments*/

.comments {
display: flex;
flex-direction: column;
}

.comment {
display: flex;
flex-direction: row;
align-items: stretch;
min-height: 10rem;
padding: 1rem 1.2rem;
background-color: var(--comment_bg_color);
border-bottom: 1px solid var(--comment_border_color);
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.comment:last-child {
border-bottom: unset;
}

.comment:hover {
background-color: var(--comment_hover_bg_color);
}

.comment_column_1 {
flex: 0 0 17rem;
width: 17rem;
display:flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding-right: 1.2rem;
}

.comment_img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1/1;
object-fit: cover;
}

.comment_name {
margin-top: .6rem;
color: var(--comment_name_font_color);
font-size: var(--comment_name_font_size);
font-weight: var(--comment_name_font_weight);
text-align: left;
text-decoration: none;
}

.comment_column_2 {
flex: 1;
min-width: 0;
padding-left: 1.2rem;
}

.comment_meta {
color: var(--comment_meta_font_color);
font-size: var(--comment_meta_font_size);
font-weight: var(--comment_meta_font_weight);
}

.comment_text {
color: var(--comment_text_font_color);
font-size: var(--comment_text_font_size);
font-weight: var(--comment_text_font_weight);
overflow-wrap: anywhere;
}

span.comment_badge {
font-family: var(--comment_badge_font_family);
font-size: var(--comment_badge_font_size);
font-weight: var(--comment_badge_font_weight);
text-decoration: none;
color: var(--comment_badge_font_color);
}

/*comments*/

/*content_entries*/

.content_entries {
display: flex;
flex-direction: column;
}

.content_entry {
display: flex;
align-items: flex-start;
gap: 1.2rem;
min-height: 6.2rem;
padding: 1rem 1.2rem;
background: var(--content_entry_bg_color);
transition: background-color 0.2s ease-in-out;
}

.content_entry_link .content_entry:hover {
background-color: var(--content_entry_hover_bg_color);
}

.content_entry_img {
flex: 0 0 10rem;
width: 10rem;
height: auto;
object-fit: contain;
}

.content_entry_content {
flex: 1;
min-width: 0;
}

.content_entry_name {
font-size: var(--content_entry_name_font_size);
font-weight: var(--content_entry_name_font_weight);
color: var(--content_entry_name_font_color);
}

.content_entry_meta {
font-size: var(--content_entry_meta_font_size);
color: var(--content_entry_meta_font_color);
}

.content_entry_text {
font-size: var(--content_entry_text_font_size);
color: var(--content_entry_text_font_color);
}

.content_entry_link {
border-bottom: 1px solid var(--content_entry_border_color);
text-decoration: none;
}

.content_entry_link:last-child {
border-bottom: none;
}

/*content_entry*/

/*footer*/

.footer_wrapper {
border-top: 1px solid var(--footer_wrapper_border_color);
background-color: var(--footer_wrapper_bg_color);
}

.footer_row {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 3rem;
}

.footer_column_1 {
width: 75rem;
}

.footer_column_2 {
width: 50rem;
}

.footer_nav {
margin-top: 1rem;
}

.footer_nav ul {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
gap: 1rem;
}

.footer_nav li {
list-style: none;
}

.footer_nav a {
font-size: var(--footer_nav_link_font_size);
font-weight:var(--footer_nav_link_font_weight);
text-decoration: none;
color: var(--footer_nav_link_font_color);
}

.footer_nav a:hover {
color: var(--footer_nav_link_hover_color);
}

.footer_title {
font-family: var(--footer_title_font_family);
font-size: var(--footer_title_font_size);
font-weight: var(--footer_title_font_weight);
color: var(--footer_title_font_color);
}

.footer_text {
font-size: var(--footer_text_font_size);
font-weight: var(--footer_text_font_weight);
color: var(--footer_text_font_color);
}

.footer_stats {
border: 1px solid var(--footer_stats_border_color);
background-color: var(--footer_stats_bg_color);
}

.footer_stats_title {
padding: 0.5rem 1.6rem 0.5rem 1.6rem;
border-bottom: 1px solid var(--footer_stats_border_color);
background-color: var(--footer_stats_title_bg_color);
font-size: var(--footer_stats_title_font_size);
font-weight: var(--footer_stats_title_font_weight);
color: var(--footer_stats_title_font_color);
}

.footer_stats_row {
display: flex;
justify-content: space-between;
padding: 0.5rem 1.6rem 0.5rem 1.6rem;
border-bottom: 1px solid var(--footer_stats_border_color);
}

.footer_stats_row:last-child {
border-bottom: none;
}

.footer_stats_label {
font-size: var(--footer_stats_label_font_size);
font-weight: var(--footer_stats_label_font_weight);
color: var(--footer_stats_label_font_color);
}

.footer_stats_value {
font-size: var(--footer_stats_value_font_size);
font-weight: var(--footer_stats_value_font_weight);
color: var(--footer_stats_value_font_color);
}

.footer_bottom {
padding: 1rem 3rem 1rem 3rem;
border-top: 1px solid var(--footer_bottom_border_color);
background-color: var(--footer_bottom_bg_color);
}

.footer_bottom_row {
display: flex;
flex-direction: row;
justify-content: space-between;
}

.footer_bottom_text {
font-size: var(--footer_bottom_text_font_size);
font-weight: var(--footer_bottom_text_font_weight);
color: var(--footer_bottom_text_font_color);
}

.footer_bottom_label {
font-size: var(--footer_bottom_label_font_size);
font-weight: var(--footer_bottom_label_font_weight);
color: var(--footer_bottom_label_font_color);
}

/*footer*/

/*flash_message*/

.flash_message {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 30;
background-color: var(--flash_message_bg_color);
border-bottom: 1px solid var(--flash_message_border_color);
transform: translateY(-100%);
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.flash_message_content {
padding: 2rem;
font-size: var(--flash_message_font_size);
font-weight: var(--flash_message_font_weight);
text-align: left;
text-decoration: underline;
color: var(--flash_message_font_color);
}

.flash_message.show {
transform: translateY(0);
}

/*flash_message*/

/*forms*/

input[type="search"].form_search_default {
height: 3.6rem;
width: 100%;
padding: 0rem 1.1rem;
border: 1px solid var(--form_default_border_color);
outline: none;
background-color: var(--form_default_bg_color);
font-family: var(--form_default_font_family);
font-size: var(--form_default_font_size);
font-weight: var(--form_default_font_weight);
text-align: left;
color: var(--form_default_font_color);
-webkit-appearance: none;
transition: background-color 0.2s ease-in-out;
}

input[type="search"].form_search_default:focus {
background-color: var(--form_default_focus);
border-color: var(--form_default_hover_border_color);
}

input[type="text"].form_text_default {
height: 3.6rem;
width: 100%;
padding: 0rem 1.1rem;
border: 1px solid var(--form_default_border_color);
outline: none;
background-color: var(--form_default_bg_color);
font-family: var(--form_default_font_family);
font-size: var(--form_default_font_size);
font-weight: var(--form_default_font_weight);
text-align: left;
color: var(--form_default_font_color);
-webkit-appearance: none;
transition: background-color 0.2s ease-in-out;
}

input[type="text"].form_text_default:focus {
background-color: var(--form_default_focus);
border-color: var(--form_default_hover_border_color);
}

input[type="password"].form_password_default {
height: 3.6rem;
width: 100%;
padding: 0rem 1.1rem;
border: 1px solid var(--form_default_border_color);
outline: none;
background-color: var(--form_default_bg_color);
font-family: var(--form_default_font_family);
font-size: var(--form_default_font_size);
font-weight: var(--form_default_font_weight);
text-align: left;
color: var(--form_default_font_color);
-webkit-appearance: none;
transition: background-color 0.2s ease-in-out;
}

input[type="password"].form_password_default:focus {
background-color: var(--form_default_focus);
border-color: var(--form_default_hover_border_color);
}

textarea.textarea_default {
width: 100%;
min-height: 250px;
padding: 1.5rem;
resize: none;
outline: none;
border: none;
background-color: var(--form_default_bg_color);
font-family: var(--form_default_font_family);
font-size: var(--form_default_font_size);
font-weight: var(--form_default_font_weight);
text-align: left;
color: var(--form_default_font_color);
transition: background-color 0.2s ease-in-out;
}

textarea.textarea_default:focus {
background-color: var(--form_default_focus);
border-color: var(--form_default_hover_border_color);
}

.textarea_b {
border: 1px solid var(--form_default_border_color) !important;
}

label.label_default {
display: inline-block;
font-size:  var(--label_default_font_size);
font-weight: var(--label_default_font_weight);
text-decoration: none;
color: var(--label_default_font_color);
}

input::placeholder {
font-family: var(--placeholder_font_family);
font-size: var(--placeholder_font_size);
font-weight: var(--placeholder_font_weight);
text-align: left;
color: var(--placeholder_font_color);
}

.form_column {
display: flex;
flex-direction: column;
gap: 1rem;
}

.homepage {
display: none;
}

/*forms*/

/*buttons*/

.btn {
display: inline-flex;
align-items: center;
justify-content: flex-start;
min-height: 3.4rem;
padding: 0 1.3rem;
line-height: 1;
text-align: left;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.btn--btn_body {
border: 1px solid var(--btn_body_border_color);
background-color: var(--btn_body_bg_color);
font-family: var(--btn_body_font_family);
font-size: var(--btn_body_font_size);
font-weight: var(--btn_body_font_weight);
color: var(--btn_body_font_color);
}

.btn--btn_body:hover {
border: 1px solid var(--btn_body_hover_border_color);
background-color: var(--btn_body_hover_bg);
color: var(--btn_body_hover_font_color);
}

.btn_submit {
pointer-events: none;
}

.btn_submit.active {
pointer-events: auto;
}

#file_input {
display: none;
}

.btn_fw {
width: 100%;
}

.btn_column {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
}

.btn_nav_wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1rem;
}

.btn_nav_wrapper .btn {
flex: 0 0 auto;
width: auto;
}

/*buttons*/


/*global, affects all links*/

a.default_link {
text-decoration: none;
color: var(--default_link_color);
transition: color 0.2s ease-in-out;
}

a.default_link:hover {
color: var(--default_link_hover_color);
}

a.title_link {
text-decoration: none;
color: var(--title_link_color);
transition: color 0.2s ease-in-out;
}

a.title_link:hover {
color: var(--title_link_hover_color);
}


/*global, affects all links*/

/*global, affects all lists.*/

li.list_style_none {
list-style: none;
}

ul li, ol li {
list-style-position: inside;
}

/*global, affects all lists.*/

/*spans*/

span.span_b {
font-family: var(--span_b_font_family);
font-size: var(--span_b_font_size);
font-weight: var(--span_b_font_weight);
text-decoration: none;
color: var(--span_b_font_color);
}

span.span_muted {
font-family: var(--span_muted_font_family);
font-size: var(--span_muted_font_size);
font-weight: var(--span_muted_font_weight);
text-decoration: none;
color: var(--span_muted_font_color);
}

/*spans*/

/*margins*/

.mt {
margin-top: 2.5rem;
}

.mts {
margin-top: 1.5rem;
}

/*margins*/

/*paddings*/

.padding_default {
padding: 1.5rem;
}

/*paddings*/

/*archive*/

.archive_info {
font-size: var(--archive_info_font_size);
color: var(--archive_info_font_color);
}

.archive_tree {
font-family: var(--archive_tree_font_family);
font-size: var(--archive_tree_font_size);
overflow-x: auto;
}

.tree_row {
display: flex;
align-items: center;
min-height: 2.8rem;
padding: 0.5rem;
color: var(--tree_row_font_color);
}

.tree_row:hover {
background: var(--tree_row_hover_bg_color);
}

.tree_icon {
flex-shrink: 0;
width: 2.4rem;
color: var(--tree_icon_color);
}

.tree_folder {
font-size: var(--tree_folder_font_size);
font-weight: var(--tree_folder_font_weight);
color: var(--tree_folder_font_color);
}

.tree_file {
font-size: var(--tree_file_font_size);
font-weight: var(--tree_file_font_weight);
color: var(--tree_file_font_color);
}

.level_1 {
padding-left: 3.7rem;
}

.level_2 {
padding-left: 5.9rem;
}

.level_3 {
padding-left: 8.1rem;
}

.tree_error {
padding: 1.2rem 1.5rem;
color: var(--tree_error_color);
}

/*archive*/

/*responsive elements*/

@media only screen and (max-width: 800px) {

.main_wrapper, .primary_wrapper, .template_row {
padding: 2.5rem 2rem 4rem;
width: 100%;
}

.template_row {
flex-direction: column;
}

.template_column_1, .template_column_2 {
flex: none;
width: 100%;
}

.wrapper_row {
flex-direction: column;
}

.wrapper_column_1, .wrapper_column_2 {
flex: none;
width: 100%;
}

.card_group_row_3, .card_group_row_4 {
grid-template-columns: repeat(1, 1fr);
}

.profile_responsive {
display: none;
}

.view_file_row {
flex-direction: column;
}

.view_file_column_1, .view_file_column_2 {
flex: none;
width: 100%;
}

.view_file_image {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
}

.view_file_btn_row {
flex-direction: column;
}

.view_file_screenshots {
grid-template-columns: 1fr;
gap: 1rem;
}

.view_file_screenshot {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
}

.comment {
flex-direction: row;
align-items: flex-start;
gap: 1rem;
padding: 1rem;
}

.comment_column_1 {
flex: 0 0 10rem;
width: 10rem;
padding-right: 0;
align-items: flex-start;
}

.comment_img {
display: block;
width: 100%;
max-width: none;
height: auto;
aspect-ratio: 1/1;
object-fit: cover;
}

.comment_column_2 {
flex: 1;
min-width: 0;
width: auto;
padding-left: 0;
}

.comment_text {
padding-top: 0;
}

.content_entry_img {
flex: 0 0 auto;
width: 100%;
max-width: 10rem;
height: auto;
object-fit: contain;
}

.content_entry_content {
width: 100%;
}

.value_box {
height: 100%;
}

.footer_row {
flex-direction: column;
justify-content: flex-start;
padding-left: 2.5rem;
padding-right: 2.5rem;
}

.footer_column_1, .footer_column_2 {
width: 100%;
}

.footer_column_2 {
margin-top: 0rem;
}

.footer_nav ul {
flex-direction: column;
}

.footer_stats {
border: unset;
background-color: unset;
}

.footer_stats_title {
display: none;
}

.footer_stats_row {
padding: 0.2rem 0rem 0.2rem 0rem;
border-bottom: unset;
}

.footer_bottom {
padding-left: 2.5rem;
padding-right: 2.5rem;
}

.footer_bottom_row {
display: flex;
flex-direction: column;
justify-content: flex-start;
}

.btn {
width: 100%;
padding: 1rem;
}

.btn_row {
flex-direction: column;
justify-content: center;
gap: 1.5rem;
}

input[type="search"].form_search_default {
font-size: 1.6rem;
}

input[type="text"].form_text_default {
font-size: 1.6rem;
}

input[type="password"].form_password_default {
font-size: 1.6rem;
}

textarea.textarea_default {
font-size: 1.6rem;
}

}

/*responsive elements*/

/*fonts*/

/* inter-100 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Inter';
font-style: normal;
font-weight: 100;
src: url('../fonts/inter-v20-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-200 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Inter';
font-style: normal;
font-weight: 200;
src: url('../fonts/inter-v20-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-300 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Inter';
font-style: normal;
font-weight: 300;
src: url('../fonts/inter-v20-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Inter';
font-style: normal;
font-weight: 400;
src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-500 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Inter';
font-style: normal;
font-weight: 500;
src: url('../fonts/inter-v20-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-600 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Inter';
font-style: normal;
font-weight: 600;
src: url('../fonts/inter-v20-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-700 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Inter';
font-style: normal;
font-weight: 700;
src: url('../fonts/inter-v20-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/*fonts*/