header,nav{display:block;}
h1{font-size:2em;margin:.67em 0;}
svg:not(:root){overflow:hidden;}
hr{box-sizing:content-box;height:0;overflow:visible;}
*{box-sizing:border-box;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";font-size:var(--body-font-size, 18px);line-height:1.5;color:var(--color-fg-default);background-color:var(--color-canvas-default);}
h1,h2,h3{margin-top:0;margin-bottom:0;}
h1{font-size:var(--h1-size, 40px);font-weight:var(--base-text-weight-semibold, 600);line-height:0.8em;line-height:1em;margin-bottom:0.5em;}
h2{font-size:var(--h2-size, 24px);font-weight:var(--base-text-weight-semibold, 600);margin-top:2em;color:#36454F;font-size: 22px; font weight: 400;}
h3{font-size:var(--h3-size, 20px);font-weight:var(--base-text-weight-semibold, 600);}
p{margin-top:0;margin-bottom:10px;}
body{margin: 10px,40px,80px,40px;}

/* Link Styles */
a:link,a:active,a:hover,a:visited{color:#0000EE;text-decoration:underline solid 1px;}
a:visited{color:#551A8B;text-decoration:underline solid 1px;}
a:hover{color:#000;background:#ff0;text-decoration:underline solid 1px black;}

.topnav{margin-top:1.5em;margin-bottom:1em; border-bottom: 1px solid #1F3546; font-size: 0.8em; text-align:center;} 
.topnav a:link{color:black;text-decoration:none;padding:3px;}
.topnav a:active{color:black;text-decoration:none;padding:3px;}
.topnav a:visited{color:black;text-decoration:none;padding:3px}
.topnav a:hover{color:#fff;background:#1F3546;text-decoration:none;padding:3px}

/* Image Styles */
.responsive{width:100%;height:auto;}
.responsivewide {
    width: 100vw; /* Full viewport width */
    margin-left: calc(-50vw + 50%); /* Center align by negative margins */
    height: auto;
}

body {margin-bottom: 3em;}
body {
            width: 80%; /* Set default width */
            max-width: 1000px; /* Maximum width */
            margin: 0 auto; /* Center content horizontally */
            padding: 0 20px; /* Add some padding to the sides for better readability */
        }

        /* Media queries for different screen widths */
        @media only screen and (max-width: 768px) {
            /* Styles for screens up to 768px wide */
            body {
                width: 80%; /* Adjust width for smaller screens */
                padding: 0 15px; /* Adjust padding for smaller screens */
            }
        }
        @media only screen and (max-width: 480px) {
            /* Styles for screens up to 480px wide */
            body {
                width: 90%; /* Adjust width for even smaller screens */
                padding: 0 10px; /* Adjust padding for even smaller screens */
            }
        }
						
/* Line Styles */						
		hr.footerdivider {
		  border: 0.5px solid #DCDCDC;
		  width:100%;
		}
		
		hr.content {
		  border: 0.5px solid black;
		}
		
/* YouTube Styles */	
		lite-youtube{background-color:#000;position:relative;display:block;contain:content;background-position:center center;background-size:cover;cursor:pointer;max-width:720px}lite-youtube::before{content:'';display:block;position:absolute;top:0;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);background-position:top;background-repeat:repeat-x;height:60px;padding-bottom:50px;width:100%;transition:.2s cubic-bezier(0, 0, .2, 1)}lite-youtube::after{content:"";display:block;padding-bottom:calc(100% / (16 / 9))}lite-youtube>iframe{width:100%;height:100%;position:absolute;top:0;left:0;border:0}lite-youtube>.lty-playbtn{display:block;width:68px;height:48px;position:absolute;cursor:pointer;transform:translate3d(-50%,-50%,0);top:50%;left:50%;z-index:1;background-color:transparent;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');filter:grayscale(100%);transition:filter .1s cubic-bezier(0, 0, .2, 1);border:none}lite-youtube .lty-playbtn:focus,lite-youtube:hover>.lty-playbtn{filter:none}lite-youtube.lyt-activated{cursor:unset}lite-youtube.lyt-activated::before,lite-youtube.lyt-activated>.lty-playbtn{opacity:0;pointer-events:none}.lyt-visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}
		
/* Text Styles */	   
		.finalsent{margin-bottom: 6em;}
		.footerp3 {margin-top: 1em;text-align: center;}
		.footerp1 {margin-top: 3em;font-family:courier; font-size: 15px;text-align: center;}
		.footerp2 {margin-top: 1em;font-family:courier; font-size: 15px;text-align: center;}
		.imagep{text-align:right; color:#033E3E;font-size:0.8em;}
		.theader {margin: 0;}
		.iheader {margin: 0 0 1em; font-size: 22px; font weight: 200; line-height:1em; text-align:center;}
		.mantra {font-weight:bold;font-size:1.5em;line-height:90%;} 
		.tleader {color:#0C090A;font-weight:bold;}
		.tcolor {font-weight:bold;color:#E42217; text-align:center;}
		.greydash {color:#C0C0C0;}
		.phlarge {color:white;padding:4px;background-color:#123456;font-size:2em;font-weight:bold;display:inline;}
		.tldr {background:#F5F5F5;padding: 6px; margin-bottom:1em;}
		.comphr {background:#eeeeee;padding: 6px; margin-bottom:1em;}
		.prevnext {padding: 6px; margin-bottom:1em; border: solid 1px black;}
		.ultldr { list-style-type: square; }
		.pred{color: red;}
		.detailsp {text-align:center; color:#033E3E;font-size:0.7em;}

/* Input Box Styling for Articles page */		
#myInput{font-size:1.5em;width:100%;padding:12px 20px 12px 12px;border:1px solid #111;margin-bottom:12px}


ul.artlist li a{
    background: none;
    padding-right: 0px;
}

ul.artlist li a:hover{
    background-color: #ff0;
    color: #000;
    text-decoration: underline solid 2px black;
}

/* Rules for SVG icons */	
a[href^="/"] {
    background: url("/img/svg/internal-link.svg") no-repeat 100% 0;
    background-size: 10px 10px;
    padding-right: 12px;
}

a:hover[href^="/"] {
    background-color: #ff0;
    color: #000;
    text-decoration: underline solid 2px black;
}


a[href^="https:"] {
    background: url("/img/svg/external-link.svg") no-repeat 100% 0;
    background-size: 11px 11px;
    padding-right: 12px;
}

a:hover[href^="https:"] {
    background-color: #ff0;
    color: #000;
    text-decoration: underline solid 2px black;
}
a.noextlink[href^="https:"] {
    background: none;
	padding-right: 0px;
}

a.noextlink:hover[href^="https:"] {
    background-color: #ff0;
    color: #000;
    text-decoration: underline solid 2px black;
}  
a[href^="https://en.wikipedia"] {
    background: url("/img/svg/wikipedia-link.svg") no-repeat 100% 0;
    background-size: 11px 11px;
    padding-right: 12px;
}

a:hover[href^="https://en.wikipedia"] {
    background-color: #ff0;
    color: #000;
    text-decoration: underline solid 2px black;
}

a[href^="https://youtu"] {
    background: url("/img/svg/youtube-link.svg") no-repeat 100% 0;
    background-size: 11px 11px;
    padding-right: 12px;
}

a:hover[href^="https://youtu"] {
    background-color: #ff0;
    color: #000;
    text-decoration: underline solid 2px black;
}

a[href^="/randomvideo.html"] {
    background: url("/img/svg/youtube-link.svg") no-repeat 100% 0;
    background-size: 11px 11px;
    padding-right: 12px;
}

a:hover[href^="/randomvideo.html"] {
    background-color: #ff0;
    color: #000;
    text-decoration: underline solid 2px black;
}

a[href^="https://wikipedia"] {
    background: url("/img/svg/wikipedia-link.svg") no-repeat 100% 0;
    background-size: 11px 11px;
    padding-right: 12px;
}

a:hover[href^="https://wikipedia"] {
    background-color: #ff0;
    color: #000;
    text-decoration: underline solid 2px black;
}

a[href^="https://instagram"] {
    background: url("/img/svg/instagram-link.svg") no-repeat 100% 0;
    background-size: 10px 10px;
    padding-right: 12px;
}

a:hover[href^="https://instagram"] {
    background-color: #ff0;
    color: #000;
    text-decoration: underline solid 2px black;
}

a[href^="https://www.instagram"] {
    background: url("/img/svg/instagram-link.svg") no-repeat 100% 0;
    background-size: 10px 10px;
    padding-right: 12px;
}

a:hover[href^="https://www.instagram"] {
    background-color: #ff0;
    color: #000;
    text-decoration: underline solid 2px black;
}

a[href^="https://reddit.com"] {
    background: url("/img/svg/reddit-link.svg") no-repeat 100% 0;
    background-size: 10px 10px;
    padding-right: 12px;
}

a:hover[href^="https://reddit.com"] {
    background-color: #ff0;
    color: #000;
    text-decoration: underline solid 2px black;
}

a[href^="https://flickr.com"] {
    background: url("/img/svg/flickr-link.svg") no-repeat 100% 0;
    background-size: 10px 10px;
    padding-right: 12px;
}

a:hover[href^="https://flickr.com"] {
    background-color: #ff0;
    color: #000;
    text-decoration: underline solid 2px black;
}

a.nointlink[href^="/"] {
    background: none;
    padding-right: 0px;
}

a.nointlink:hover[href^="/"] {
    background-color: #ff0;
    color: #000;
    text-decoration: underline solid 2px black;
}	
a.nointlink[href^=""] {
    background: none;
    background-size: 10px 10px;
    padding-right: 12px;
}

a.nointlink:hover[href^=""] {
    background-color: #ff0;
    color: #000;
    text-decoration: underline solid 2px black;
}

a.tnl[href^="/"] {
    background: none;
	margin-right: 12px;
}

a.tnl:hover[href^="/"] {
	color:#fff;background:#123456;text-decoration:none;padding:3px
}

a.tnl[href^="https"] {
    background: none;
}

a.tnl:hover[href^="https"] {
	color:#fff;background:#123456;text-decoration:none;padding:3px
}

a[href^="/bettersquash_feed.xml"] {
    background: url("/img/svg/feed-link.svg") no-repeat 100% 0;
    background-size: 10px 10px;
    padding-right: 12px;
}

a:hover[href^="/bettersquash_feed.xml"] {
    background-color: #ff0;
    color: #000;
    text-decoration: underline solid 2px black;
}

a[href^="/articles.html#features"] {
    background: url("/img/svg/gallery-link.svg") no-repeat 100% 0;
    background-size: 10px 10px;
    padding-right: 12px;
}

a:hover[href^="/articles.html#features"] {
    background-color: #ff0;
    color: #000;
    text-decoration: underline solid 2px black;
}

.cxm-nav-container {
   position: relative;
   background-color: transparent;
   padding: 15px 20px;
 }
 
 .cxm-menu {
   list-style: none;
   display: block;
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.5s ease;
   background-color: white;
   position: absolute;
   top: 55px;
   right: 20px;
   width: auto;
   min-width: 200px;
   box-shadow: 0 4px 6px rgba(0,0,0,0.1);
   z-index: 100;
 }
 
 .cxm-menu-item {
   padding: 10px 15px;
   border-bottom: 1px solid #f0f0f0;
   white-space: nowrap;
 }
 
 .cxm-menu-link {
   text-decoration: none;
   color: #0000EE;
   font-weight: 400;
   display: inline-block;
   width: 100%;
   position: relative;
 }
 
 .cxm-menu-link:visited {
   color: #551A8B;
 }
 
 /* Match the site's hover style */
 .cxm-menu-link:hover {
   color: #000;
   background-color: #ff0;
   text-decoration: underline solid 2px black;
 }
 
 /* Custom YouTube icon positioning */
 .cxm-menu-link[href^="https://youtu"] {
   background: url("/img/svg/youtube-link.svg") no-repeat right center;
   background-size: 11px 11px;
   background-position: left;
   padding-left: 16px;
 }
 
 .cxm-menu-link[href^="https://youtu"]:hover {
   background-color: #ff0;
   color: #000;
   text-decoration: underline solid 2px black;
 }
 
 /* Burger menu checkbox and label */
 .cxm-burger-input {
   display: none;
 }
 
 .cxm-burger-label {
   display: block;
   cursor: pointer;
   position: absolute;
   top: 15px;
   right: 20px;
   z-index: 101;
 }
 
 /* Burger icon */
 .cxm-burger-icon {
   display: block;
   position: relative;
   width: 30px;
   height: 24px;
 }
 
 .cxm-burger-icon::before,
 .cxm-burger-icon::after,
 .cxm-burger-icon span {
   background-color: #333;
   content: '';
   display: block;
   height: 4px;
   border-radius: 2px;
   position: absolute;
   width: 100%;
   transition: all 0.3s ease;
 }
 
 .cxm-burger-icon::before {
   top: 0;
 }
 
 .cxm-burger-icon span {
   top: 10px;
 }
 
 .cxm-burger-icon::after {
   bottom: 0;
 }
 
 /* Show menu when checkbox is checked */
 .cxm-burger-input:checked ~ .cxm-menu {
   max-height: 1000px;
 }
 
 /* Add margin below the navigation for content separation */
 .cxm-content-container {
   margin-top: 40px;
   padding: 20px;
 }
 
 /* Active/current page highlight */
 .cxm-menu-item.active {
   background-color: #F5F5F5;
 }
 
 .cxm-menu-item.active .cxm-menu-link {
   font-weight: bold;
 }