@font-face {
	font-family: 'gypsy curse';
	src: url('Gypsy Curse.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	}
	
@font-face {
	font-family: 'imperator';
	src: url('Imperator.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	}

body {
    font-family: 'imperator', Georgia, serif;
	font-size: 20px;
	line-height: 1.6;
    background-color: #000;
    color: #ffd;
	padding: 1em;
	margin: auto;
	width: 90%;
	max-width: 70rem;
	box-sizing: border-box;
}

b {
	color: #fff;
}

code {
	color: #afe;
}

h1,h2,h3,h4,h5 {
	font-family: 'gypsy curse', sans-serif;
	font-size: 2.5em;
	color: #f22;
}

h1 {
	font-size: 3em;
	text-align: center;
	margin-top: 0;
}

a {
    color: #f11;
    transition: all 0.3s ease-in-out;
}

a:hover, a:focus {
    text-shadow: 0 0 6px #f00, 0 0 16px #f00;
    color: #fff; 
}

/* Tables */

.table-wrapper {
    width: 100%;
    overflow-x: auto; /* horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

table {	
    width: 100%;
    border-collapse: collapse;
    margin: 12px auto;
	font-size: 1em;
	min-width: 600px;
}

tr { 
    margin-bottom: 10px; 
}

tr:nth-child(odd) {
        background-color: #222; /* Light gray for odd rows */
}

tr:hover {
    background-color: #444; 
}

th, td {
    padding: 10px;
    border: 0px solid #000;
	text-align: left; 
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

th {
    background-color: #444;
    text-align: center;
	font-size: 1.1em;
}

.container {
    max-width: 800px; 
    margin: auto;
    padding: 12px;
}

@media screen and (max-width: 600px) {
	
	body {
		width: 100%;
	}
	
	.table-wrapper {
        -webkit-overflow-scrolling: touch; /* smooth scrolling */
    }
	
    table {
        font-size: 0.9em;
    }
	
	th, td {
        white-space: normal; /* Allow text to wrap */
    }
	
	tr {
        display: block; /* Display rows as block for better stacking */
        margin-bottom: 10px;
    }
	
	td, th {
        display: block; /* Display cells as block */
        padding: 4px;
        text-align: left; /* Align text to the left */
    }

    th, td {
        border-bottom: 1px solid #444; /* divider between rows */
    }
}


.highlight {
	background-color: #f00;
}

@keyframes wobble {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(3deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-3deg); }
    100% { transform: rotate(0deg); }
}

img {
    display: inline-block; 
	z-index: -99;
    animation: wobble 2s infinite;
}

.fog-container {
    position: fixed; 
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('./fog.jpg') repeat; 
    animation: moveFog 120s linear infinite;
    pointer-events: none; 
    z-index: -1000; 
    opacity: 0.2;
}

.fog-container::before {
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 50%);
}

@keyframes moveFog {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 0 100%;
    }
}


.ghost-container {
    position: fixed; 
    bottom: 0;
    left: 0;
    width: 100%;
    height: 66%; 
    background: url('./ghostbg.jpg') repeat; 
    animation: moveGhost 90s linear infinite; 
    pointer-events: none; 
    z-index: -500; 
    opacity: 0.2; 
}

.ghost-container::before {
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at bottom center, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 100%);
}

@keyframes moveGhost {
    0% {
        background-position: 0 1000%;
    }
    100% {
        background-position: -100% 0;
    }
}

.hidden-text {
	visibility: hidden;
}

.hidden-text:hover {
	visibility: visible;
}