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

body {
  font-family: Arial, sans-serif;
  background-color: #202020;
  color: white;
}

A:ACTIVE, A:LINK, A:VISITED {
	Color: #FFFFFF;
	Text-Decoration: none;
}
A:HOVER {
	Color: #6FA4FF;
	Background-Color: #323232;
	Text-Decoration: none;
}

pre {
    tab-size: 2;              /* Sets tab width to 2 spaces */
    -moz-tab-size: 2;         /* For Firefox compatibility */
    -o-tab-size: 2;           /* For Opera compatibility */
    background-color: #151515;
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #ddd;
    font-family: monospace;
    font-size: 14px;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}



.big-flags {
    font-size: 2em; /* Adjust size here: 2em = 2x the default size */
}





@font-face {
    font-family: 'Komika Display';
    src: url('/static/fonts/Komika_display.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Komika Display Bold';
    src: url('/static/fonts/Komika_display_bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}



.navbar {
    background-color: #333;
    padding: 10px;
    display: flex; /* Flexbox for horizontal alignment */
    align-items: center; /* Vertically center items */
    position: relative;
    z-index: 1000;
}

.hamburger {
    font-size: 30px;
    color: white;
    cursor: pointer;
    display: none; /* Hidden on desktop by default */
    padding: 10px;
}

.menu {
    list-style: none;
    display: flex; /* Horizontal menu items */
    background-color: #333;
    margin: 0; /* Remove default margin */
}

.menu li {
    position: relative;
}

.menu a {
    color: white;
    text-decoration: none;
    padding: 15px 20px;
    display: block;
}

.menu a:hover {
    background-color: #555;
}

/* Submenu styling */
.submenu {
    display: none;
    position: absolute;
    background-color: #444;
    min-width: 150px;
    top: 100%;
    left: 0;
}

.menu li:hover .submenu {
    display: block; /* Show on hover (desktop) */
}

/* Main content */
main {
    padding: 20px;
}



/* Media Query for very small screens (max-width: 400px) */
@media (max-width: 400px) {
	main {
			padding: 0px;
	}
}



/* Mobile styles */
@media (max-width: 768px) {
    .hamburger {
        display: block; /* Show hamburger on mobile */
    }

    .menu {
        display: none; /* Hidden by default on mobile */
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 999;
    }

    .menu.active {
        display: flex; /* Show when toggled */
    }

    .submenu {
        position: static;
        display: none;
    }

    .submenu.active {
        display: block;
    }



}

/* Desktop collapse behavior */
@media (min-width: 769px) {
    .hamburger {
        display: block; /* Show hamburger for collapse */
    }

    .navbar {
        justify-content: flex-start; /* Align items to the left */
    }

    .menu {
        position: static; /* Inline with hamburger */
        flex: 1; /* Take up remaining space */
    }

    .menu.collapsed {
        display: none; /* Collapse when toggled */
    }

    /* When collapsed and re-expanded, overlay the page */
    .menu:not(.collapsed) {
        display: flex; /* Keep it inline unless collapsed */
    }
}


.section {
		background: #333333;
		padding: 5px;
		margin: 10px 0;
		border-radius: 8px;
		box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}