/**/
/* default */
/**/
.default-html {
	height: 100%;
	margin: 0;
}

.default-body {
    height: 100%;
	margin: 0;
	/* margin-top:100px; */
	text-align: center;
    background: black;
	color: white;
	font-family: Georgia, 'Times New Roman', serif;
	
	padding-bottom: 50px;
}

.default-body h1 {
    font-size: 38px;
}

.default-body p {
    font-size: 24px;
}

.default-body a {
    font-size: 24px;
}

.default-body table {
    border: 4px solid white;
}

.default-body tr, td {
    border: 2px solid white;
}

.text-emoji {
    height: 1em;
    width: auto;
    vertical-align: -0.15em;
}

.menu-icon {
    text-decoration: none;
    font-size: 24px;
}



/**/
/* menubar */
/**/
.menubar {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9999; /* To show the menubar in front of everything else */
    
    height: 42px;
    width: 100%;
    
    display: flex;
    align-items: center;
    justify-content: space-between;

    background: #c0c0c0;

    border-top: 2px solid white;
    border-left: 2px solid white;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;

    padding-top: 4px;
    padding-bottom: 4px;

    font-family: "Tahoma", sans-serif;
}

.menubar-buttons {
    display: flex;
    gap: 4px;
    margin-left: 4px;
    margin-right: 4px;
    flex: 1;

    overflow-x: auto;
    white-space: nowrap;
}

.menubar-buttons a {
    font-size: 16px;
    background: #c0c0c0;
    color: black;
    text-decoration: none;

    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 12px;
    padding-left: 12px;

    border-top: 2px solid white;
    border-left: 2px solid white;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
}

.menubar-buttons a:active {
    border-top: 2px solid #404040;
    border-left: 2px solid #404040;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
}

@media (max-width: 600px) {
    .menubar {
        top: auto;
    }
    .menubar-buttons a {
        font-size: 16px;
    }
}



/**/
/* index */
/**/
.index-body {
    height: 100%;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
    background: black;
	color: white;
	font-family: Georgia, 'Times New Roman', serif;
	
	padding-bottom: 50px;
}

.poster-container {
	text-align: center;
	max-width: 900px;
	padding: 20px;
}

.poster-picture {
	display: inline-block;
	border: 3px solid white;
	padding: 6px;
	background: black;
}

.poster-picture img {
	display: block;
	max-width: 70vw;
	max-height: 60vh;
	width: auto;
	height: auto;
	object-fit: cover;
	background: black;
}

.poster-text {
    font-family: Georgia, 'Times New Roman', serif;
}

h1.poster-text {
    font-size: 38px;
	margin: 18px 0 6px 10px;
	letter-spacing: 6px;
}

p.poster-text {
    font-size: 24px;
	margin: 0;
}

@media (max-width:600px){
	.poster-container {
		max-width: 100%;
		padding: 10px;
	}
	.poster-picture {
		border-width: 2px;
		padding: 4px;
	}
	h1.poster-text {
		font-size: 30px;
	}
	p.poster-text {
		font-size: 16px;
	}
}



/**/
/* guestbook */
/**/
.guestbook-body {
    margin: 0;
    padding: 20px;
    background: #000; /* classic teal desktop */
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    color: black;
    
    padding-bottom: 50px;
}

/* Main window */
.guestbook-container * {
    box-sizing: border-box;
}

.guestbook-container {
    max-width: 850px;
    margin: auto;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    padding: 10px;
}

/* Title bar style */
.guestbook-header {
    background: #000080;
    color: white;
    padding: 6px;
    margin-bottom: 10px;
    border: 2px solid;
    border-color: #ffffff #404040 #404040 #ffffff;
}

.guestbook-header h1 {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
}

/* Sections */
.guestbook-form-box,
.guestbook-post-result,
.guestbook-posts-stats,
.guestbook-posts {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    padding: 10px;
    margin-bottom: 10px;
}

/* Inputs */
.guestbook-form-box input, .guestbook-form-box textarea {
    width: 100%;
    background: white;
    border: 2px inset #808080;
    color: black;
    padding: 6px;
    font-family: Tahoma, sans-serif;
    margin-bottom: 8px;
}

/* Buttons (classic Win98 3D) */
.guestbook-form-box button {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    padding: 6px 12px;
    cursor: pointer;
    font-weight: bold;
}

.guestbook-form-box button:active {
    border-color: #808080 #ffffff #ffffff #808080;
}

/* Posts */
.guestbook-post {
    background: #ffffff;
    border: 2px inset #808080;
    padding: 8px;
    margin-bottom: 8px;
}

/* Post header */
.guestbook-post-header {
    font-weight: bold;
    margin-bottom: 5px;
    color: #000080;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
}

.guestbook-post-header-mod {
    font-weight: bold;
    margin-bottom: 5px;
    color: #FF0000;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* message */
/*
.post-message {
    white-space: pre-wrap;
}
*/
.guestbook-post-message {
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Footer */
.guestbook-footer {
    text-align: center;
    font-size: 11px;
    margin-top: 10px;
    color: black;
}

.guestbook-emoji {
    height: 2em;
    width: auto;
    vertical-align: -0.15em;
}