/* Global Styles */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td 
	{
	background-color:#000000;
	color: white;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	}

/* I added code below to set the scaling properly for cell phones. Use actual device width with scaling factor of 1 */
@viewport {
  width: device-width ;
  zoom: 1.0 ;
} 



/* General Styles for p and a */
p, a, ol, ul, li {
  color: white;               /* Text color */
  font-size: 1em;             /* Font size */
  font-family: Arial, Helvetica, sans-serif; /* Font family */
  margin-right: 0;            /* Remove right margin */
  text-align: left;           /* Align text to the left */
  text-decoration: none;      /* Ensure links don't have underlines */
}

/* Reset list styles */

li {
  display: list-item;         /* Explicitly declare list vs block */
  width: auto;                /* Let content determine width */
  margin-bottom: 0.5em; /* Optional: Add spacing between items */
}

ul {
  padding-left: 2em;         /* Indent bullets */
  margin: 0;                  /* Remove margin */
  list-style-type: disc; /* Or 'square', 'circle' */
  }

ol {
  list-style-type: decimal;
  padding-left: 2em;   /* Slightly larger indent for better hierarchy */
}

h7	{
	text-align:justify;
	background-color:#000000;
	color:white;
	font-size:2em;
	font-family:Arial, Helvetica, sans-serif;
	font-variant:small-caps;
	font-weight:bold;
	padding-top:2px;
	padding-bottom:11px;
	}

h6	{
	text-align:right;
	background-color:#000000;
	color:white;
	font-size:2em;
	font-family:Arial, Helvetica, sans-serif;
	font-variant:small-caps;
	font-weight:bold;
	padding-top:2px;
	padding-bottom:11px;
	}

h1 	{
	color:white;
	font-size:1.5em;
	font-family:Arial, Helvetica, sans-serif;
	font-variant:small-caps;
	padding-top:10px;
	padding-bottom:5px;
	}

h2 	{
	color:white;
	font-size:1.4em;
	font-family:Arial, Helvetica, sans-serif;
	font-variant:small-caps;
	padding-top:30px;
	padding-bottom:5px;
	}

h3	{
	color:white;
	font-size:1.3em;
	font-family:Arial, Helvetica, sans-serif;
	font-style:italic;
	font-weight:normal;
	}
	
h4	{
	background-color:#000000;
	color:white;
	clear:both;
	font-size:1.3em;
	font-family:Arial, Helvetica, sans-serif;
	font-variant:small-caps;
	font-weight:normal;
	margin-bottom:5px;
	padding-top:2px;
	padding-bottom:3px;
	}

h5	{
	color:white;
	clear:both;
	font-size:1em;
	font-family:Arial, Helvetica, sans-serif;
	font-variant:small-caps;
	font-weight:normal;
	}


p.clear
	{
	clear:both;
	}	


img {
	vertical-align: text-top;
        margin: 0;
        margin:0px auto;
	}


a	{
	color: antiquewhite;
	text-decoration:underline;
	}

	
a:hover
	{
	color: #FF3300;
	text-decoration:none;
	}

	



/* ID Styles */


#bigcontainer
	{
	text-align: center;
        height:auto;
	width:auto;
	float:center;
	}
	

#maintitle
	{
	position: relative; /* Anchor for absolute positioning */
	max-width:100%;
	height:auto;
	border:none;
	padding-bottom:10px;
	margin:0px auto;
	}

#maintitle img
	{
	display: block;
	width: 100%;
	height: auto;
	}


#empomstage
	{
	
	width: 324px;
	height: 454px;
	border: 2px solid black;
	margin-bottom:80px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	}

#trailercontainer
	{
	display:block;
	width: 527px;
	height:164px;
	margin-top:3px;
	margin-bottom:5px;
	padding-bottom:0px;
	border:2px solid black;
	}
	
#picturecontainer
	{
	display:block;
	width: 600px;
	height:402px;
	margin-top:3px;
	margin-bottom:5px;
	padding-bottom:0px;
	border:2px solid black;
	}

#potatocontainer
	{
	clear:both;
	float:center;
	display:block;
	width: 199px;
	height:300px;
	margin-top:3px;
	margin-bottom:5px;
	padding-bottom:0px;
	border:2px solid black;
	}

#map_canvas 
	{
	width: 800px;
	height: 400px; 
	margin: auto; 
	border: 2px solid black;
	}

#obacontainer
	{
	height:60px;
	width:300px;
	float:left;
	}
	
#podcastcontainer {
    width: 100%; /* Make the container take up full width of its parent */
    max-width: 800px; /* Or any other width you want to limit the container to */
    margin: 0 auto; /* Centers the container horizontally */
    padding: 0 40px; /* Adds some space inside the container on both sides */
    box-sizing: border-box; /* Ensures padding is included in the width calculation */
    height: auto; /* Let the height adjust based on the content */
    overflow: hidden; /* Optional: Hide any content that overflows */
}

#youtubecontainer
	{
	height:auto;
	width:300px;
	margin-right: 40px;
	margin-bottom: 40px;
	float:left;
	}

#NiagaraMusicContainer
	{
	height:auto;
	width:auto;
	margin-top: 40px; 
        margin-right: 40px;
	margin-bottom: 40px;
	float:left;
	}

#smallpotatoe2container
	{
	float:center;
        height:auto;
	width:300px;
	margin-right: 40px;
	margin-bottom: 40px;
	}

#socialcontainer
	{
	height:auto;
	width:auto;
	margin-left: 40px;
	margin-right: 40px;
	margin-bottom: 40px;
	float:center;
	}

#endtagcontainer
	{
	height:auto;
	width:auto;
	float:left;
	}

#video1container
	{
	height:auto;
	width:auto;
	float:left;
	}

#navigation a {
	font:11px georgia;
	color: #99CCFF;
	font-weight:bold;
	text-decoration: none;
	letter-spacing:.1em;
	line-height:16px;
	display:block;
	padding:10px;
	border: 1pt solid rgb(20,40,95);
	border-right-width: 0px; 
	border-left-width: 0px; 
	}


#navigation a:hover {
	color:#ffffff;
	border: 1pt dotted red;
	border-right-width: 0px; 
	border-left-width: 0px; 
	}


#logo {
	font:18px georgia;
	color: #CC3300;
	line-height:24px;
	letter-spacing:.4em;
	}




/* Class Styles */

.thumbnail {
    width: 300px;  /* Adjust the size of the thumbnail */
    height: auto;  /* Maintain aspect ratio */
    float: left; /* Pins the image to the left */
    margin-right: 10px;  /* Space between the thumbnail and text */
    flex-shrink: 0; /* Ensures image never shrinks */
}

/* Make sure the text wraps properly */
.thumbnail-link {
  display: block; /* Ensure link takes full width */
  overflow: hidden; /* Prevents weird wrapping behavior */
  text-decoration: none; /* Removes underline */
  text-align: left; /* Ensures text is left-aligned */
  color: white; /* Keep text readable */
}



.button
	{
	color:#ffffff;
	display: block;
	width: 58px;
	height: 63px;
	float: left;
	margin: 0px;
	margin-right:8px;
	}

.tab
	{
	margin-left:40px;
	margin-right:40px;
	}


.bodyText 
	{
	font:1.5em arial;
	color:#ffffff;
	line-height:20px;
	letter-spacing:.1em;
	margin-top:0px;
	}
	
.pageName
	{
	font:22px georgia;
	color: #CC3300;
	line-height:20px;
	letter-spacing:.1em;
	}


/* all the above are used for all devices. everything used in the {} is for phones. all code after will again be all sizes */




/* Default: Hide both prompts */
.homescreen-prompt {
    padding: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    margin: 0;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    box-sizing: border-box;
}

/* clears so no message is sent to anything */
.mobile-only, .desktop-only {
    display: none;
}


@media only screen and (max-width: 800px) {
    .mobile-only {
        display: block !important;
    }
    .desktop-only {
        display: none !important;
    }
    /* Apply animation only in browser mode on mobile */
    @media (display-mode: browser) {
        .mobile-only {
            animation: hideAfterDelay 7s forwards; /* phone browser hide mssg delay */
        }
    }
}
/* Hide mobile prompt in PWA modes */
@media only screen and (display-mode: standalone), (display-mode: minimal-ui) {
    #mobile-prompt {
        display: none !important;
    }
}

/* Desktop screens >800px */
@media only screen and (min-width: 801px) {
    .mobile-only {
        display: none !important;
    }
    .desktop-only {
        display: block !important;
        animation: hideAfterDelay 7s forwards; /* 7s delay, then hide */
    }
}

/* this is the code to hide a mssg after a period of time */
@keyframes hideAfterDelay {
    0% {
        opacity: 1;
        visibility: visible; /* Start visible */
    }
    99% {
        opacity: 1;
        visibility: visible; /* Stay visible for 30s */
    }
    100% {
        opacity: 0;
        visibility: hidden; /* Hide fully at the end */
    }
}

/* Default state for animation. used for desktop and phone browsers that donʻt use my progressive web app PWA*/
.mobile-only, .desktop-only {
    opacity: 1;
    visibility: visible;
}





/* below comes into effect for screens <= 800 pixels. Can use range "(min-width: 321px) and (max-width: 480)" */

@media screen and (max-width: 800px)
{

#bigcontainer {
        width: 100%; /* Make the container take up full width of its parent */
        box-sizing: border-box; /* Ensures padding is included in the width calculation */
        height: auto; /* Let the height adjust based on the content */
        overflow: hidden; /* Optional: Hide any content that overflows */
    }

#maintitle
	{
	width: 100%; /* Make the container take up full width of its parent */
        box-sizing: border-box; /* Ensures padding is included in the width calculation */
        height: auto; /* Let the height adjust based on the content */
        overflow: hidden; /* Optional: Hide any content that overflows */
	}
	

 .thumbnail {
        width: 300px;  /* Smaller size for mobile */
        margin-right: 5px;  /* Less space between image and text */
    }


.bodyText 
	{
	font:5em arial;
	color:#ffffff;
	line-height:20px;
	letter-spacing:.1em;
	margin-top:0px;
	}    


#somethingorother 
	{
    	width: 120px ;
  	}

#podcastcontainer
        {
        margin-left: 5px; /* Ensure left margin is applied on mobile */
        margin-right: 5px;
        }
}