html {
    scroll-behavior: smooth;
}

body {
    background-color: #2a5298; /* Deep blue background */
    color: #1a1a1a; /* Almost-black gray text */
    font-family: 'Courier New', Courier, monospace; /* Retro feel */
    line-height: 1.5;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
}

a {
    color: #2a5298;
    text-decoration: underline;
    font-weight: bold;
}

a:hover {
    background-color: #1a1a1a;
    color: #fcfcfc;
}


h1 {
	padding: 0px;
	margin: 0px 0px 10px 0px;	
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-top: 15px;
    border: 2px solid #1a1a1a;
}


#background {
    width: 100%;
    max-width: 900px;
}

#blogtitle {
	padding-top: 10px;
	padding-bottom: 0px;
    background-color: #1a1a1a; 
    color: #fcfcfc;            
    text-align: center;
}

#blogtitle h1 {
    color: #00ff00;           
    text-shadow: 2px 2px 0px #2a5298; /
}

#blogtitle h2 {
	font-size: 1.2em;
    margin: 0px;
}

#blogtitle p {
    margin: 0;
    font-size: 0.9rem;
    font-style: italic;
    opacity: 0.8;
}

#container {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between the "boxes" */
}

#footer {
    padding: 5px 5px 5px 30px;
}

#footer p {
	margin: 0px;
	line-height: 1.5em;
}

#mainAbout h2 {
    margin-bottom: 5px;
}

#mainAbout p {
    margin-top: 0;
}

#mainAbout .imagewrap {
    width: 225px;
    height: auto;
}

#mainTitle {
    padding: 5px 5px 5px 30px;
	text-align: center;
}

#navbar {
    display: flex;
    flex-wrap: wrap;       
    justify-content: center;
    gap: 10px 20px;       
    margin-top: 15px;
    padding: 0 10px;      
}

#navbar a, #navbar span {
    margin: 0;            
    text-decoration: underline;
    font-weight: bold;
    white-space: nowrap;
}

#navbar span {
    color: #666;          
    text-decoration: none;
}

#recentPost h2 {
    margin-top: 0px;
	margin-bottom: 0px;
    font-size: 1.4rem;
    color: #2a5298;
}
#underConstruction h2 {
    font-size: 0.9rem; 
    margin: 0; 
    text-align: center;
}



.counter-label {
	color: #00ff00;
}

.counter-number {
    background-color: #1a1a1a;
    color: #00ff00; 
    padding: 2px 8px;
    border: 2px solid #fcfcfc;
    letter-spacing: 2px;
    font-weight: bold;
}

.dog-bio {
    clear: left; 
    overflow: hidden; 
    margin-bottom: 5px; 
    min-height: 150px;
}

.gray-em {
    font-size: 0.8rem;
    color: #D3D3D3;
}


.imagewrap {
    float: left;
    margin-right: 15px;
    margin-bottom: 5px; 
    margin-top: 5px;    
}

.imagewrap-stack {
    float: left; 
    margin-right: 15px; 
    margin-bottom: 5px;
	margin-top: 5px;
    width: 250px;
    height: auto;
    border: 2px solid #1a1a1a;
    display: block;
}

.mobile-break {
    display: none;
}

.module-box {
    background-color: #fcfcfc; /* Off-white / Nearly white */
    border: 4px solid #1a1a1a; /* Thick dark borders for that boxy look */
    padding: 30px;
    box-shadow: 10px 10px 0px #1a1a1a; /* Retro hard shadow */
}

.blog-pagination {
	background-color: #1a1a1a;         
	padding-top: 5px;
	padding-bottom: 5px;
	margin-bottom: 20px;
	text-align: center; 
	margin-top:-10px;
	color: #00ff00;           
}

.blog-pagecount {
	font-size: 0.9rem; 
	color: #666;	
}

.navtop {
	margin-top: 30px;
}

.no-bottom {
	margin-bottom: 0px;
}

.no-top {
	margin-top: 0px;
}

.no-wrap {
	white-space: nowrap;
}'


.smaller-text {
	font-size: 0.9rem;
}

.smallest-text {
	font-size: 0.9rem;
}

.spaceafter {
	padding-bottom: 15px
}

.visitor-counter {
    text-align: center;
    margin-top: 20px;
    font-family: 'Courier New', Courier, monospace;
}


/* Header dropdowns */
.dropdown {
    display: inline-block;
    position: relative;
}

.dropbtn {
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
    color: #2a5298;
}

.dropdown-content {
	display: none !important; 
    position: absolute;
	background-color: #1a1a1a; 
    min-width: 180px;
    box-shadow: 10px 10px 0px #1a1a1a; 
    border: 2px solid #fcfcfc;       
    z-index: 100;
    text-align: left;
}

.dropdown-content a {
    color: #00ff00 !important; 
    padding: 12px 16px;
    display: block;
    text-decoration: none;
    font-size: 0.9rem;
    border-bottom: 1px solid #333; 
}

.dropdown-content a:hover {
    background-color: #00ff00; 
    color: #1a1a1a !important; 
    text-decoration: none;
}

.dropdown:hover .dropdown-content {
    display: block !important;
}

.dropdown-content a:last-child {
    border-bottom: none;
}

.droppause {
	display: none;
}




/* Tablet View */
@media screen and (max-width: 825px) {
	#dachshunds .imagewrap-stack {
		width: 175px;
	}

	.mobile-break {
        display: inline;
    }

	.mobile-title {
		display:none;
	}
	
	
	#navbar {
        gap: 5px 15px;  
		margin-bottom: 5px;
        margin-top: 5px;
        line-height: 1.2; 
    }
}


/* Mobile View */
@media screen and (max-width: 675px) {
	.module-box h1 {
        font-size: 1.5rem;
    }
	
	.no-mobile {
		display: none;
	}	
	
	
	#blogtitle h1 {
		margin-bottom: 0px;
		padding: 0px;
	}
	
	#blogtitle h2 {
		padding: 0px;
		margin: 0px;
	}

	#underConstruction h2 {
		font-size: 0.75rem;
	}
	
	#mainAbout .imagewrap {
        width: 100px;
        margin-right: 15px;
    }

    #dachshunds .imagewrap-stack {
		margin-bottom: 0px;
        width: 125px;
    }

    #nicholas .imagewrap {
        width: 120px;
        float: left; 
        margin-right: 15px;
    }

	#nicholas p {
        margin-top: 0;
        clear: none !important;
        hyphens: auto;
        word-break: break-word;
        overflow-wrap: break-word;
    }

	.droppause {
		display: inline;
	}

}