body {
	margin: 0; 
	padding: 0;
	background: url(img/winterBackground.jpg) repeat;
	padding: 0;
	margin: 0;
	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
	color: #416c9c;
}

a {
	color: #0349d2;
}

img {
	max-width: 100%;
	height: auto;
}

canvas {
	position:absolute; 
	top:0;
	left:0;
	z-index: 0;
}

#container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(img/bluegrade.png) repeat-x 0 top;
	z-index: 1;
}

#title {
	text-align: center;
}

#innerContainer {
    min-width: 600px;
    max-width: 800px;
    min-height: 500px;
    margin: 0 auto;
    padding: 0 20px; /* optional: adds breathing room on mobile */
}

#innerContainerGrid {
    min-width: 600px;
    min-height: 500px;
    display: grid;
    grid-template-columns: 300px minmax(auto, 600px);
    justify-content: center; /* if you want to center the grid */
}

#lefty {
    min-height: 500px;
    text-align: center;
    display: flex;
    align-items: center; /* for vertical centering */
    justify-content: center;
}

#righty {
    /* max-width is now handled by grid-template-columns */
}


.whitebox {
	background: url(img/transpWhite.png) repeat;
    padding: 20px;
}

.texty {
	padding: 10px;
}

.alignRt {
	text-align: right;
}

#lyrics {
	width: 600px;
	margin-right: auto;
	margin-left: auto;
	
	line-height:22px;
}

#songList li {
	margin: 0 0 7px 0;
}

.sectitle {
	font-weight: bold;
	font-size: 13pt;
}

#footer {
	margin-bottom: 10px;
}

.small {
	font-size: small;
	line-height: 100%;
}

/* mobile version: */

#right_iphone {
	margin: 0 10px 10px;
}

.cell {
	text-align: center;
	vertical-align: middle;
}

.tbl {
	display: table;
	text-align: center;
	width: 100%;
}

.tcell {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

.mobile {
    display: none;
}

.desktop {
    display: block;
}

#navfooter {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-wrap: wrap; 
    margin-bottom: 50px;
}

#mnavfooter {
    display: none;
}

.iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.22%; /* matches your 450x253 aspect ratio */
    height: 0;
    overflow: hidden;
}

/* Mobile tweaks */
@media (max-width: 600px) {

    #innerContainer {
        min-width: auto;
        margin: 0 auto;
        padding: 0 20px; /* optional: adds breathing room on mobile */
    }

    #innerContainerGrid {
        display: block;
        min-width: auto; /* or 100% */
    }
    
    #lefty {
        min-height: auto; /* optional - you might not need the fixed height on mobile */
    }
    
    #righty {
        margin: 0 10px 10px;
        width: auto; /* or just remove the width property */
    }

    .alignRt {
        text-align: center;
    }

    .mobile {
        display: block;
    }

    .desktop {
        display: none;
    }

    #lyrics {
        width:  90%;
    }

    #navfooter {
        display: none;
    }

    #mnavfooter {
        display: block;
    }
}