* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --white: #FFFFFF;
    --black: #000000;
    --yellow: #EDDD2D;
    --darkYellow: #7D7518;
    --green: #52D461;
    --darkGreen: #2A6B31;
    --blue: #2DC6ED;
    --darkBlue: #196F85;
    --dark-gray: #383838;
    --md-gray: #828282;
    --light-gray: #D9D9D9;
    --hugeText: 3em;
    --lgText: 2em;
    --mdText: 1.25em;
    --baseText: clamp(16px, 1em, 1.25em);
    --smText: .85em;
    --tinyText: .75em;
    --rounded: .25em;
    --mobile: 500px;
    --desktop: 800px;
}

body{
    container-type: inline-size;
    container-name: body;
}

a{
    text-decoration: none;
    cursor: pointer;
}

a:hover{
    text-decoration: underline;
}


.tinyText{
    font-size:var(--tinyText);
}

.baseText{
    font-size: var(--baseText);
}

.lgText{
    font-size: var(--lgText);
}

.roundedRight{
    border-top-right-radius: var(--rounded);
    border-bottom-right-radius: var(--rounded);
}

.roundedLeft{
    border-top-left-radius: var(--rounded);
    border-bottom-left-radius: var(--rounded);
}

.roundedTop{
    border-top-left-radius:var(--rounded);
    border-top-right-radius:var(--rounded);
}

.roundedBottom{
    border-bottom-left-radius:var(--rounded);
    border-bottom-right-radius:var(--rounded);
}

.rounded{
    border-radius:var(--rounded);
}

.mdGrayBorder{
    border-color: var(--md-gray);
    border: 1px solid var(--md-gray);
}
.xCenter{
    text-align: center;
    align-self: center;
}

.yellowBtn{
    background-color: var(--yellow);
    border:1px solid var(--darkYellow);
    color:var(--black);
}

.yellowBtn:active{
    background-color: var(--darkYellow);
    border:1px solid var(--black);
    color:var(--white);
}

.blueBtn{
    background-color: var(--blue);
    border:1px solid var(--darkBlue);
    color:var(--black);
}

.blueBtn:active{
    background-color: var(--darkBlue);
    color:var(--white);
    border:1px solid var(--black);
}

.greenBtn{
    background-color: var(--green);
    border:1px solid var(--darkGreen);
    color:var(--black);
}  

.greenBtn:active{
    background-color: var(--darkGreen);
    color:var(--white);
    border:1px solid var(--black);
}

.whiteBtn{
    background-color:var(--white);
    border:1px solid var(--md-gray);
    color:var(--dark-gray)!important;

    a{
        color:var(--dark-gray);
    }
}

.whiteBtn:active{
    background-color:var(--md-gray);
    border:1px solid var(--dark-gray);
    color: var(--white);

    a{
        color:var(--white);
    }
}

.mdGrayBtn{
    background-color: var(--md-gray);
    border:1px solid var(--dark-gray);
    color:var(--white);
}

.mdGrayBtn:active{
    background-color: var(--dark-gray);
    border:1px solid var(--black);
}

.yellowBG{
    background-color: var(--yellow);
    color:var(--black);

    a{
        color:var(--black);
    }
}

.blueBG{
    background-color: var(--blue);
    color:var(--black);

    a{
        color:var(--black);
    }
}
.greenBG{
    background-color: var(--green);
    color:var(--black);

    a{
        color:var(--black);
    }
}

.darkGrayBG{
    background-color: var(--dark-gray);
    color:var(--white);

    a {
        color:var(--white);
    }
}

.mdGrayBG{
    background-color:var(--md-gray);
    color:var(--white);

    a{
        color: var(--white);
    }
}

.whiteBG{
    background-color: var(--white);
    color:var(--black);

    a{
        color:var(--black);
    }
}

.yellowBorder{
    border:1px solid var(--yellow);
}

.blueBorder{
    border:1px solid var(--blue);
}

.greenBorder{
    border:1px solid var(--green);
}

h1{
    font-size: var(--lgText);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 200;
}

h2{
    font-size: var(--lgText);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 200;
}

h3{
    font-family: var(--mdText);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-style: italic;
}

h4{
    font-size: var(--mdText);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-decoration: underline;
}

.pad1{
    padding:1em;
}

.pad2{
    padding:2em;
}

.fullWidth{
    min-width: 100vw;
    width:100vw;
    display:block;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.width100{
    min-width:100%;
    width:100%;
}

.logo{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.tabTitle{
    margin-top:-1em;
    padding:.5em;
    text-align: center;
    flex-grow: 1;
}

.pageTitle{
    text-align: center;
    font-size: var(--hugeText);
}

p{
    font-size: var(--baseText);
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

button{
    cursor: pointer;
    transition: all 0.1s ease-in-out;
    border:none;
    background-color: transparent;
}

button:hover{
    transform:scale(1.2);
}

button.play{
    border-top: .75em solid var(--white);
    border-bottom: .75em solid var(--white);
    border-left: 1.5em solid black;
    border-right:none;
    height: 0px;
    width:.75em
} 

button.pause{
    border-right:.25em solid black;
    border-left:.25em solid black;
    border-bottom:none;
    border-top:none;
    width:.75em;
    height:1.5em;
    background-color: var(--white);
}

nav ul{
    list-style: none;
}

header{
    padding:.5em 0;
    min-width:350px;

    h1{
        text-align: center;
        width:100%;
    }
    nav{
        width:100%;
        container-type: inline-size;
        container-name: header-nav;

        ul{
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: flex-start;
            flex-wrap: wrap;

            li{

                line-height: 2em;

                a{
                    color:var(--white);
                    font-size: var(--baseText);
                    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                    padding:1em 1em .5em 1em;
                    cursor: pointer;
                }

                a.underYellow:hover{
                    background-color: var(--black);
                    text-decoration: underline var(--yellow);
                    border-bottom-left-radius: var(--rounded);
                    border-bottom-right-radius: var(--rounded);
                }
                
                a.currentUnderYellow{
                    background-color: var(--black);
                    text-decoration: underline var(--yellow);
                    border-bottom-left-radius: var(--rounded);
                    border-bottom-right-radius: var(--rounded);
                }

                a.underGreen:hover{
                    background-color: var(--black);
                    text-decoration: underline var(--green);
                    border-bottom-left-radius: var(--rounded);
                    border-bottom-right-radius: var(--rounded);
                }
                
                a.currentUnderGreen{
                    background-color: var(--black);
                    text-decoration: underline var(--green);
                    border-bottom-left-radius: var(--rounded);
                    border-bottom-right-radius: var(--rounded);
                }
                
                a.underBlue:hover{
                    background-color: var(--black);
                    text-decoration: underline var(--blue);
                    border-bottom-left-radius: var(--rounded);
                    border-bottom-right-radius: var(--rounded);
                }
                a.currentUnderBlue{
                    background-color: var(--black);
                    text-decoration: underline var(--blue);
                    border-bottom-left-radius: var(--rounded);
                    border-bottom-right-radius: var(--rounded);
                }
                img{
                    height:200px;
                }
            }

            li:first-child{
                flex-grow: 1;
                
                a{
                    text-decoration: none;
                }
            }
        }
    }
}

main{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding:1em 20vw;
    width:100%;
    container-type: inline-size;
    container-name: main-area;
    gap:1em;
    min-height:90vh;

    .pageTitle{
        font-size:calc(var(--hugeText)*1.5);
        font-family: Georgia, 'Times New Roman', Times, serif;
    }

    article{
        display:flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width:100%;
        gap: 1em;
        max-width:800px;
        min-width:350px;
        container-type: inline-size;
        container-name: article;
        margin:1em 0;
        border-radius:var(--rounded);

        h1{
            text-align: center;
            width:100%;
        }

        p{
            font-size:var(--baseText);
            font-family: Georgia, Times, 'Times New Roman', serif;
            padding:0 1em;
            line-height: calc(var(--baseText) * 2);
            text-indent: 3ch;

        }
    }

    ul{
        list-style-position: inside;
        padding-left:20px;
        padding-top:0;
        margin:0;
        width:100%;
        
        li{
            padding:.25em;
        }
    }

    .grid{
        display:grid;
        grid-template-columns: repeat(auto-fit,minmax(200px, 1fr));
        width:100%;
        gap: 1em;;
        max-width:1000px;
        align-items: start;
    }

    .row{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    h2{
        align-self: flex-start;
        margin-left:-1em;
    }

    article.feature{
        height: max-content;

        div.preview{
            display:flex;
            flex-direction: column;
            justify-content: space-between;

            h1 {
                padding-top:.25em;
            }

        }

        div.hero{
            height: 100%;

            img{
                height:100%;
                width:100%;
                object-fit: cover;
            }
            
            p {
                position: absolute;
                bottom:0;
                right:0;
                font-size:var(--tinyText);
            
                mark{
                    background-color:rgba(0,0,0,.5);
                    color:var(--white);
                    padding:.25em;
                
                    a {
                        color:var(--white);
                    }
                }
            }
            p::first-letter{
                font-weight: normal;
                font-size: var(--tinyText);
            }

        }
    }

    card{
        display: flex;
        flex-direction: column;
        justify-content:flex-start;
        align-items: flex-start;
        gap:.25em;
        border-radius: var(--rounded);

        h1,h2,h3,h4{
            padding:1em;
        }

        p {
            padding:1em;
        }

        p.cardTitle{
            font-size: var(--mdText);
            text-align: center;
            width:100%;
            display: block;
            text-indent: 0ch;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: var(--mdText);

            button{
                transform: scale(1.5);
                transition: all 0.1s ease-in-out;
            }

            button:hover{
                transform: scale(1.75);
            }
        }

        p.cardTitle::first-letter{
            font-size: var(--mdText);
        }

        p.cardBody{
            font-size: var(--baseText);
            text-align: left;
            width:100%;
            line-height: 1.5em;
            text-indent: 0ch;

            a{
                color:var(--black);
                text-decoration: none;
            }

            a:hover{
                text-decoration: underline;
            }
        }

        p.cardFooter{
            font-size: var(--smText);
            text-align: center;
            display: block;
            width: 100%;
            text-indent: 0ch;
            position:absolute;
            bottom: 0;
        }

        img{
            width:100%;
            display: block;
        }

        img.cardHero{
            border-top-left-radius:var(--rounded);
            border-top-right-radius:var(--rounded);
        }

        p.cardCaption{
            text-align: center;
            width:100%;
            font-size:var(--tinyText);
            padding:0 1em 1em 1em;
            text-indent: 0ch;
        }

        p.cardCommenter{
            text-align: left;
            width:100%;
            font-size:var(--tinyText);
            padding:0 1em 1em 1em;
            text-indent: 0ch;
            font-style: italic;
        }
    }

    card.videoPreview{
        min-height: max-content;

        img{
            width:32vw;
            height:18vw;
        }
    }

    card.video{
        width: 100%;
        padding-bottom: 56.25%; /* Calculate the padding-bottom to maintain 16:9 ratio */
        position: relative;

        img{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.1s ease-in-out;
        }

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

        p{
            position: absolute;
            bottom:0;
            right:0;
            font-size:var(--baseText);
            background-color:rgba(0,0,0,.5);
            color:var(--white);
            padding:.25em;
            text-align: center;

            a{
                color:var(--white);
                text-decoration: none;
            }

            a:hover{
                text-decoration: underline;
            }
        }
    }

    card.podPreview{
        padding:1em;
        display: flex;
        flex-direction: column;
        width:100%;

        .podHolder{
            width:100%;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            gap:1em;
        }

        button{
            cursor: pointer;
            transition: all 0.1s ease-in-out;
            
        }

        button:hover{
            transform:scale(1.2);
        }

        button.play{
            border-top: .75em solid var(--white);
            border-bottom: .75em solid var(--white);
            border-left: 1.5em solid black;
            border-right:none;
            height: 0px;
            width:.75em
            
        }

        button.pause{
            border-right:.25em solid black;
            border-left:.25em solid black;
            border-bottom:none;
            border-top:none;
            width:.75em;
            height:1.5em;
            background-color: var(--white);
        }

        .track{
            flex-grow: 4;
            height:5px;
            background-color: var(--black);

            .tracker{
                height:16px;
                width:5px;
                background-color: var(--blue);
                position: relative;
                left:31%;
                transform: translateY(-25%);
                cursor: pointer;
            }
        }
        
        .volume{
            flex-grow: 1;
            height:5px;
            background-color: var(--black);

            .level{
                height:16px;
                width:5px;
                background-color: var(--blue);
                position: relative;
                left:50%;
                transform: translateY(-25%);
                cursor: pointer;
            }
        }

        .podOptions{
            width:100%;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            gap:1em;
            font-size:var(--tinyText);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
    }

    @container article (width > 800px){
        .half{
            width:47%;
        }
        .third{
            width:30%;
        }
        .fourth{
            width:22%;
        }
        .full{
            width:100%;}
    }

    @container article (width < 500px){
        .half, .third, .fourth, .full{
            width:100%;
        }
    }

    a.linkButton{
        display: block;
        padding:1em;
        margin:1em;
        border-radius: var(--rounded);
        cursor: pointer;
        width:max-content;
        text-decoration: none;
        text-align: center;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
}

@container body (width < 800px){
    main{
        padding:1em 5vw;
    }
}

@container body (width < 1000px){ 
    main{
        padding:1em 10vw;
    }
}
.breadcrumb{
    align-self: flex-start;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    a:hover{
        cursor: pointer;
    }
}

.byLine{
    font-size:var(--smText);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-indent: 0ch;
    width:100%;
    text-align: center;
}

.tags{
    width:100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap:.5em;
}

.tag{
    display: span;
    padding:.5em;
    border-radius:var(--rounded);
    font-size:var(--tinyText);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 200;

    a {
        color:var(--black);
    }
}

footer{
    display: flex;
    flex-direction: row;
    justify-content:space-around;
    align-items: flex-start;
    width:100%;
    padding:1em;
    position: relative;
    bottom:0;
}

.welcomeHero{
    background-image:url('../img/startToday_Hero.jpg');
    background-size:cover;
    background-position: center;
    min-height: 300px;
    border-radius:var(--rounded);

    p {
        position: absolute;
        bottom:0;
        right:0;
        font-size:var(--tinyText);

        mark{
            background-color:rgba(0,0,0,.5);
            color:var(--white);
            padding:.25em;

            a {
                color:var(--white);
            }
        }
    }

    p::first-letter{
        font-weight: normal;
        font-size: var(--tinyText);
    }
}

aside.articleOptions{
    display: block;
    position:sticky;
    top: 50%;
    left:0;
}


a.linkButton{
    display: block;
    padding:1em;
    margin:1em;
    border-radius: var(--rounded);
    cursor: pointer;
    width:max-content;
    text-decoration: none;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: all 0.1s ease-in-out;
}

a.linkButton:hover{
    transform:scale(1.05);
}

a.blueTransBG{
    transition: all 0.1s ease-in-out;
}

a.blueTransBG:hover{
    background-color:var(--blue);
}

a.greenTransBG{
    transition: all 0.1s ease-in-out;
}

a.greenTransBG:hover{
    background-color:var(--green);
}

a.yellowTransBG{
    transition: all 0.1s ease-in-out;
}

a.yellowTransBG:hover{
    background-color:var(--yellow);
}

article.comments{
    border-top:1px solid rgba(0,0,0,.5);
    border-radius: 0;

    h2 {
        margin-left:0;
    }
}

.comment{
    border-bottom:1px solid var(--light-gray);
    border-radius: 0;
}

.commentReply{
    border-bottom: 1px solid var(--light-gray);
    border-radius: 0;
    width:90%;
    margin-left:10%;
}

.commentOptions{
    display: flex;
    width:100%;
    flex-direction: row;
    justify-content:flex-end;
    align-items:center;
    gap:1em;
    font-size:var(--tinyText);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    a {
        color:var(--black);
        padding:.5em;
    }

    a:hover{
        text-decoration: underline var(--blue);
        background-color: var(--light-gray);
        border-top-left-radius: var(--rounded);
        border-top-right-radius: var(--rounded);
    }

}