@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;
    */
    
    --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: #50d0f0;
    --main-menu-hover-bg: #242424;
    /*--main-menu-mobile-bg: #793888;*/
    --main-menu-mobile-bg: #242424;
    --main-menu-mobile-max-width: 18rem;
    --main-menu-mobile-hidden-right: calc(-1 * var(--main-menu-mobile-max-width) - 1rem);
    --body-bg-color: #131313;
    /*--accent-color: #37d13d;*/
    --accent-color: #40f048;
	--header-height: 3.5rem;
	--header-height-reduced: 2.9rem;
	--header-transition-speed: 0.4s;
	--textbox-bg: #000000a0;
	--max-normal-text-width: 54rem;
	--home-article-preview-width: 62rem;

    --font-color-dark: #000000;
    --font-color-light: #f2f2f2;

}
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-light);
}

#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;
}
.green{
    color: var(--accent-color);
}
.green-animation{
    color: var(--accent-color); visibility: hidden;
    animation: green-animation 1.5s linear infinite;
}

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