/*main tags */

#stationIndex {margin-top:75px; width:375px; float:left;}
/*element tags */
body {background-color:	#FFAD5C;}
p{padding:0; margin:0; }
ul{padding:0; margin:0;}
li{margin-right:15px;}
div{padding:0; margin:0;}
form {float:left; padding:5px; border: 1px solid blue; background-color:white; margin-left:10px; margin-top:5px;}

h1 { font-size: 2.5rem; margin-bottom: 1rem; }
h2 { font-size: 2rem; margin-bottom: 1.5rem; }
h3 { font-size: 1.5rem; margin-bottom: 1rem; }

:root {
    --primary-text: #2c3e50;
    --secondary-text: #7f8c8d;
    --accent-color: #3498db;
    --background: #ffffff;
}

/* list and link tags */
ul{list-style-type:none; padding-left:5px; padding-right:5px;}
h1{color:white;}
a:link {color:#777733;}
a:visited {color:#31698a;}


#titleHead {text-decoration:none; color:#666666; a:visited:color:#666666;}
/* headline tags */


/*classes*/
#stationPar{color:#444444; font-size:1.125em; font-family:serif; margin-left:75px; width:375px;float:left;}
#testPtwo{color:#444444; font-size:1.125em; font-family:serif; margin-left:75px; width:375px ;float:left;}

/*paragraph classes */

/*.mainText{position: relative;color:#444444;font-size:1.125em;font-family:serif; margin-left:75px; width:375px; float:left; padding-bottom:35px;} */
/* Base styles for mobile */
.mainText {
    margin: 0 1rem;
    width: auto;
}

/* Tablet and up */
@media (min-width: 768px) {
    .mainText {
        margin-left: 75px;
        max-width: 600px;
    }
}

/* Replace multiple text classes with: */
.content-text {
    color: #444444;
    font-size: 1.125em;
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.book-description {
    /* Specific variations */
}
.secondText{position: relative;color:#444444;font-size:1.125em;font-family:serif; margin-left:75px; width:375px; float:left; padding-bottom:25px;}


.stationText {
color: #444444;
    font-size: 1.125em;
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.6;
    margin: 0 1rem;
    width: auto;
    max-width: 800px;
}

@media (min-width: 768px) {
    .stationText {
        margin-left: 75px;
        width: 475px;
    }
}


.behmenText{position:relative; right:25px;color:#444444;font-size:1.125em; font-family:serif;margin-left:75px; width:475px; text-align:justify; padding-right:25px; padding-bottom:15px;}
.blogText{position:relative;right:25px;color:#444444;font-size:1.125em;font-family:serif;margin-left:75px; width:475px; text-align:justify; padding-right:25px; padding-bottom:15px;}

/*pseduo headline classes */

.h2{font-size:2em;position:relative; text-align:left; padding-bottom:20px;}
.h3{font-size:1.5em; padding-bottom:25px;}
.h3Main{font-size:1.5em;float:left;margin-left:75px;width:375px;}

.blogLink{font-size:1.5em; margin-left:50px; width:475px; margin-bottom:10px;}
.blogDate{margin-left:50px; width:475px; margin-bottom:15px;}
.listPar{margin-left:50px;}
.listCreated{margin-left:50px;margin-bottom:10px;}
.blogTitle{margin-left:50px;margin-top:25px; width:475px;}

/* other classes */

.navClass {
          /* Space between items */
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.volume-navigation ul {
    display: flex;
    gap: 1.5rem;
    padding: 1rem 0;
    border-bottom: 2px solid #eee;
    margin-bottom: 2rem;
}

.volume-navigation a {
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.volume-navigation a:hover {
    background-color: #f0f0f0;
}
/* id's */

/*div id's */



/* content divs */
#mainDiv{min-height:300px; float:clear;}

#indexContent{max-width:800px; text-align:left;}
#indexContent2{
max-width:800px;
}
#stationContent{max-width:800px; text-align:left;float:clear;margin-top:50px;}

/* header and footer divs */

#footerDiv {min-height:50px;float:left;margin-top:175px; }




.formBook {float:left;}
#footerText {float:left;}
#footerCopy {float:left;}

/* graphics id's */

#bigLogo{color:#666666;font-size:3.75em; font-family:Times,serif;margin-left:25px; margin-right:12px;}
#glyph{position:relative;right:25px;float:right; border: 1px solid black; }
#facebookLink{float:right; margin-right:25px;}
#cover1 {position:relative;float:right;}
#cover1test {}
#cover2 {position:relative;float:right;padding-left:13px;}
#cover3 {position:relative;float:right;padding-left:13px;}
#cover4 {position:relative;float:right;padding-left:13px;}

#cover3test {margin-bottom:25px;}

#testHead1{position:relative; padding-bottom:20px;}
#testHead2{position:relative;}
#testPone{position:relative; color:#444444;}
#testPtwo {position:relative;}




.social-area { grid-area: social; }
.branding-area { grid-area: branding; }
.nav-area { grid-area: nav; }


/* text format id's */
#email{font-weight:bold;}

#navID {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: flex-end;  /* Align to right side of nav area */
}


/*button id's */
#payPal {float:clear; margin-top:25px;}
#fbLike {float:clear; margin-left:13px;}
/*#buttonDiv {float:right;width:195px;}
#buttonDivTest {position:relative;float:right;width:195px;}*/
#buttonDivTest {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 180px));
    gap: 1rem;
    justify-content: center;
}
#buttonDivTest img {
    width: 100%;
    height: auto;
    max-height: 280px;
    object-fit: contain;  /* Shows full image, may have white space */
    transition: transform 0.3s ease;
}

#buttonDivTest img:hover {
    transform: scale(1.05);  /* Nice hover effect */
}
#magitiansDiv {position:relative; float:right;width:195px;}
#otherDiv {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

#otherDiv img {
    max-width: 100%;
    height: auto;
    max-height: clamp(180px, 18vw, 260px);  /* Responsive between 180-260px */
    object-fit: contain;
    transition: transform 0.3s ease;
}

#otherDiv img:hover {
    transform: scale(1.05);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    #otherDiv {
        gap: 1rem;
    }
    
    #otherDiv img {
        max-height: clamp(150px, 25vw, 200px);
    }
}

#containerDiv {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}


#headerDiv {
    display: grid;
    grid-template-areas: 
        "social branding nav";
    grid-template-columns: 200px 1fr 400px;  /* Give nav more space */
    gap: 2rem;
    padding: 2rem 0;
    border-bottom: 2px solid #eee;
    align-items: center;
}
@media (max-width: 768px) {
    #headerDiv {
        grid-template-areas:
            "branding"
            "nav"
            "social"
        ;
        text-align: center;
    }
}