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

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

/*root*/

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

/*pagination*/

--pagination_font_family: Inter, ui-sans-serif, system-ui, sans-serif;

--pagination_btn_border_color: #3d3d3d;
--pagination_btn_bg_color: #272727;
--pagination_btn_font_color: #a9a9a9;
--pagination_btn_font_size: 1.3rem;
--pagination_btn_font_weight: 600;
--pagination_btn_hover_bg_hover: #353535;
--pagination_btn_hover_border_color: #5a5a5a;
--pagination_btn_hover_font_color: #e0e0e0;

/*pagination*/

/*bb_code*/

--bb_code_headline_font_family: Inter, ui-sans-serif, system-ui, sans-serif;
--bb_code_headline_font_size: 1.35rem;
--bb_code_headline_font_weight: 600;
--bb_code_headline_font_color: #d8d8d8;

--bb_code_font_bold_font_family: Inter, ui-sans-serif, system-ui, sans-serif;
--bb_code_font_bold_font_size: 1.3rem;
--bb_code_font_bold_font_weight: 500;
--bb_code_font_bold_font_color: #d8d8d8;

--bb_code_span_bg_color: #272727;
--bb_code_span_border_color: #3d3d3d;
--bb_code_span_font_family: Inter, ui-sans-serif, system-ui, sans-serif;
--bb_code_span_font_size: 1.35rem;
--bb_code_span_font_weight: 400;
--bb_code_span_font_color: #d0d0d0;
--bb_code_span_focus: #353535;

/*bb_code*/

}

/*pagination*/

.pagination {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.2rem;
font-family: var(--pagination_font_family);
}

.pagination_p {
padding: 1rem;
}

.pagination_btn {
display: flex;
align-items: center;
justify-content: center;
min-height: 3.4rem;
min-width: 8rem;
padding: 0 1.3rem;
border: 1px solid var(--pagination_btn_border_color);
background: var(--pagination_btn_bg_color);
font-size: var(--pagination_btn_font_size);
font-weight: var(--pagination_btn_font_weight);
text-decoration: none;
color: var(--pagination_btn_font_color);
}

.pagination_btn:hover {
border: 1px solid var(--pagination_btn_hover_border_color);
background: var(--pagination_btn_hover_bg_hover);
color: var(--pagination_btn_hover_font_color);
transition: all 0.2s ease-in-out;
}

/*pagination*/

/*bb_code*/

h2.bb_code_headline {
font-family: var(--bb_code_headline_font_family);
font-size: var(--bb_code_headline_font_size);
font-weight: var(--bb_code_headline_font_weight);
color: var(--bb_code_headline_font_color);
}

.bb_code_font_bold {
font-family: var(--bb_code_font_bold_font_family);
font-size: var(--bb_code_font_bold_font_size);
font-weight: var(--bb_code_font_bold_font_weight);
color: var(--bb_code_font_bold_font_color);
}

.bb_code_font_underlined {
text-decoration: underline;
}

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

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

span.bb_code_span {
display: inline-flex;
justify-content: flex-start;
align-items: center;
height: 3.6rem;
padding: 0rem 1.1rem;
border: 1px solid var(--bb_code_span_border_color);
background-color: var(--bb_code_span_bg_color);
font-family: var(--bb_code_span_font_family);
font-size: var(--bb_code_span_font_size);
font-weight: var(--bb_code_span_font_weight);
text-align: left;
color: var(--bb_code_span_font_color);
}

/*bb_code*/

/*responsive elements*/

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

.pagination {
width: 100%;
gap: 1rem;
}

.pagination_btn {
flex: 1;
min-width: 0;
width: 100%;
white-space: nowrap;
}

}

/*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*/