/* Aesthetic toggles */
:root {
    --bg: #ffecd6; /* Background color (light orange) */
    --text: #001b4d; /* Main text (dark blue) */
    --text-light: #00308a; /* Secondary text (lighter blue) */
    --accent: #cc5500; /* Links/buttons (burnt orange) */
}

/* kill simple css grid */ 
body {
    display: block !important; 
}

body, main, #content {
    
    max-width: 80rem !important; 
    
    margin-left: 1rem !important; 
    margin-right: auto !important;

    padding-left: 1rem !important; 
    padding-right: 1rem !important;

    font-family: "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Set column layout based on margins in headshot png image */
.l-layout {
    position: relative;
    margin-bottom: 2rem;
    min-height: 300px;
}

.l-image, .l-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 1000px !important; 
    max-width: none !important;
    height: auto;
    display: block;
}

.l-text-column {
    padding-top: 250px;
    margin-left: 320px;
    max-width: 30rem;
}

/* Column configuration adjustment for mobile views */
@media (max-width: 768px) {

    .l-layout {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: left;
    }

    .l-image {
	position: relative;
	width: 100%;
	max-width: 250px;
	margin-bottom: 2rem;
    }

    .l-text-column {
	padding-top: 0;
	margin-left: 0;
	max-width: none;
    }
}