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

html body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    font-family: 'CMU Typewriter Variable', monospace; /* Fallback to a generic serif font */
    font-size: 12pt;
    display: flex;
    flex-direction: column;
}

/* Main content styling */
main {
    margin: 0 auto;
    display: block;
    max-width: 900px;
    padding: 20px;
    flex-grow: 1;
}

/* Responsive design for tablets and mobile */
@media (max-width: 768px) {
    .main-content {
        padding: 10px;
    }

    nav li {
	margin: 0;
	padding: 5px 5px;
    }

    body {
        font-size: 11pt; /* Slightly smaller font size on mobile devices */
    }
}

/* make the navbar a navbar */

nav ul {
    text-align: center; /* Centers the list in the nav element */
    padding: 0; /* Removes padding around the list */
    margin: 0; /* Removes margin around the list */
    list-style: none; /* Removes default list styling */
}

nav li {
    display: inline-block; /* Displays list items in a line */
    padding: 10px 20px; /* Adds padding around each list item for spacing */
    margin-right: 10px; /* Optional: Adds spacing between items */
    cursor: pointer; /* Changes cursor to pointer on hover over items */
}


/* have a's be emphasised in the emacs sort of way */

a {
    border: 1px solid black; /* Sets a 1px solid black border around links */
    padding: 0; /* Ensures there's no padding inside the border */
    text-decoration: none; /* Removes the default underline */
    position: relative; /* Allows positioning of the pseudo-element */
    color: black;
}

a:active, a:visited {
    border-color: grey; /* Changes border color to grey after the link is clicked */
    color: black;
}

a:hover {
    border-color: black; /* Keeps border color black on hover */
    transform: translate(-1px, -1px); /* Moves the link left and up by 1px */
    box-shadow: 1px 1px 0 0 black; /* Adds a solid black drop shadow with no blur */
}

header {
    width: 100%;
    background-color: black;
}

header img {
    display: block;
    margin: auto;
    max-height: 40px;
    padding-top: 5px;
    padding-bottom: 5px;
}

header a {
    all: none;
    border: none;
}

/* sticky footer */

nav, header, footer {
    flex-grow: 0;
    flex-shrink: 0;
}

/* css features */

.box {
    display: block;
    border-color: black;
    border: 1px solid;
    box-shadow: 1px 1px 0 0 black;
    padding: 5px;
    margin: 5px 0 5px 0;
    width: 100%;
}

.contactBox {
    text-align: center;
    padding-top: 15px;
}


/* make the footer a footer */

footer {
    color: grey;
    text-align: center;
    padding-top: 10px;
}

footer a {
    color: grey !important;
    border-color: grey;
}

footer a:hover {
    box-shadow: 1px 1px 0 0 grey !important;
    border-color: grey;
}