@font-face{
    font-family: Marker2;
    src: url("fonts/gomarice_marker2.ttf");
}
@font-face{
    font-family: "Permanent Marker";
    src: url("fonts/PermanentMarker.ttf");
}
@font-face{
    font-family: Satisfy;
    src: url("fonts/Satisfy-Regular.ttf");
}
.marker2 {
    font-family: Marker2;
}
.permanentmarker {
    font-family: "Permanent Marker";
}
.satisfy {
    font-family: Satisfy;
}
:root {
    /* screen sizes for responsive code
    --screen-size1: 114rem;
    --screen-size2: 96rem;
    --screen-size3: 48rem;
    --screen-size-phone: 28rem;
    */
    color-scheme: light dark;
    
    --fonts-sans-serif: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
    --fonts-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    --fonts-mono: Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace;
    
    --menu-bg: light-dark(#808080, #50d0f0);
    --main-menu-hover-bg: light-dark(#fcfcfd, #262626);
    --main-menu-mobile-bg: light-dark(#fcfcfd, #262626);
    --body-bg-color: light-dark(#eef0f3, #131313); /*alternative light: f4f5f7*/
    /*--accent-color: light-dark(#4caf7d, #40f048);*/
    /*--accent-color: light-dark(#5ebb6f, #40f048);*/
    /*--accent-color: light-dark(#3fb88a, #37d13d);*/
    --accent-color: light-dark(#22c58e, #37d13d);
    --cookie-banner-bg: light-dark(#c5ebdc, navy);
    --cookie-banner-button-bg: light-dark(#62dbab, #5a5a95);
    --cookie-banner-button-bg-hover: light-dark(#72cbbb, #6a6aa5);
    --textbox-bg: light-dark(#f6f7faa0, #000000a0);
    --font-color-dark: light-dark(#000000, #000000);
    --font-color-secondary: light-dark(#44516a, #c0c0c0);
    --font-color-primary: light-dark(#25324a, #f2f2f2);
    --home-intro-bg: light-dark(#ffffff20, #00000020);
    --article-header-bg: light-dark(#ffffff20, #00000020);
    --article-card-shadow: light-dark(#ced3dc, #101010);
    --header-shadow: light-dark(#00000050, #00000050);
    --menu-shadow: light-dark(#00000048, #000000a0);
	
	--main-menu-mobile-max-width: 18rem;
    --main-menu-mobile-hidden-right: calc(-1 * var(--main-menu-mobile-max-width) - 1rem);
	--header-height: 3.5rem;
	--header-height-reduced: 2.9rem;
	--header-transition-speed: 0.4s;
	--max-normal-text-width: 54rem;
	--home-article-preview-width: 62rem;



}

[data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
[data-theme="light"] .darkmode { display: none; }
[data-theme="dark"] .lightmode { display: none; }

body {
	margin: 0;
	display: flex; flex-direction: column;
	align-items: center;
	font-family: var(--fonts-sans-serif);
	background-color: var(--body-bg-color);
	max-width: 100vw;
	min-height: 100vh;
	overflow-x: hidden;
}
#main-wrapper {
	display: flex; flex-direction: column;  margin-bottom: 3rem;
}
main {
	display: flex; flex-direction: column;
	min-height: 75vh;
	color: var(--font-color-primary);
}

#content {
}
h1, h2, h3, h4 {
    font-weight: 600;
}
/*#content h1 {
	display: flex; flex-direction: row; width: fit-content; text-align: left;
	margin-left: auto; margin-right: auto;
	margin-top: 2rem;
	font-size: 2rem;
}
#content h2 {
	display: flex; flex-direction: row; width: fit-content; text-align: left;
	margin: 2rem auto; margin-bottom: 1.25rem; font-size: 1.5rem;
}
#content h3 {
	display: flex; flex-direction: row; width: fit-content; text-align: left;
	margin: 2rem auto; margin-bottom: 1.1rem; font-size: 1.25rem;
}
#content h4 {
	display: flex; flex-direction: row; width: fit-content; text-align: left;
	margin: 2rem auto; margin-bottom: 1rem; font-size: 1.2rem;
}*/
#content section {
    display: flex; flex-direction: column;
}
#content p {
	max-width: 54rem;
}
.limit-width {
	display: flex;
	max-width: 120rem;
	/*max-width: 120rem;*/ /* laptop 14 inch 1920 */
	/* max-width: 160rem; */ /* 27 inch 2560 */
	margin: 0 auto;
}
.accent{
    color: var(--accent-color);
}
.accent-animation{
    color: var(--accent-color); visibility: hidden;
    animation: accent-animation 1.5s linear infinite;
}

@keyframes accent-animation{
    50% {
            visibility: hidden;
    }
    51% {
            visibility: visible;
    }
}