:root{
    --red: #CD001A;
    --blue: #002B4E;
    --light_gray: #CCCCCC;
    --dark_gray:rgb(128,128,128);
    --rad: .5em;
}

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

body {
    overflow-x: hidden;
}

a:link {
    text-decoration: none;
    color: var(--dark_gray);
}
a:visited {
    text-decoration: none;
    color: var(--dark_gray);
}
a:hover, a:active {
    text-decoration: none;
    color: var(--red);
}

.link_btn{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: var(--rad);
    background-color: var(--blue);
    color:#FFFFFF !important;
    padding:1em;
}

.link_btn:hover, .link_btn:active{
    background-color: var(--red);
}

.small{
    font-size:.85em;
}

.center{
    text-align: center;
}

.left{
    text-align: left;
}

.marquee {
    overflow: hidden;
    white-space: nowrap;
    animation: marquee 10s linear infinite;
  }
  
@keyframes marquee {
    0% { transform: translateX(100); }
    100% { transform: translateX(-100%); }
}

header{
    max-width: 100vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    #navTitle{
        width:min-content;
        min-width: 375px;
        display: flex;
        justify-content: center;
        align-items:flex-end;
        gap:0em;
        margin-top:1em;

        img{
            height: 2em;
        }

        h1{
            color:var(--blue);
            font-size:2em;
            font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            text-decoration: underline;
        }
    }

    nav{
        min-width:375px;
        display: flex;
        flex-direction: row;
        flex-grow: 1;
        align-items:center;
        justify-content:space-around;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin-top:1em;

        a {
            display: block;
            padding:.5em 1vw;
            cursor: pointer;
        }

        a:hover, a:active{
            color:#FFFFFF;
            background-color: var(--red);
            /* border-radius: var(--rad); */
        }

        a.currentPageLink{
            background-color: var(--red);
            color:#FFFFFF;
            /* border-radius: var(--rad); */
        }
    }

}


main{
    display: flex;
    container-type: inline-size;
    flex-direction: column;
    align-items:flex-start;
    gap:1em;
    padding:1em 10vw;
    margin-top:1em;

    img{
        max-width: 50vw;
        border-radius: var(--rad);
    }

    .editorsChoice{
        width:100%;
        border:1px solid var(--light_gray);
        padding:1em;
        border-radius: var(--rad);

        p{
            text-align: center;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size:1.5em;
        }

        button{
            cursor: pointer;
            padding:.25em;
            border-radius: var(--rad);
            border:none;
            border:1px solid #FFF;
            box-shadow: rgba(0,0,0,.5) 0 0 2px;
            background-color: var(--red);
            color:#FFF;
            font-size:1em;
        }
    }

    article{
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        justify-content: space-between;
        gap:1.5em;

        p{
            width:100%;
            text-indent: 4ch;
        }

        ol {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.5em;
            margin-left:2em;
            
            li::marker{
                font-size: 1.5em;
            }
        }

        ul{
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            width:100%;
            margin-left:10em;
            line-height: 1.5em;
        }

        dfn{
            font-size: 1em;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        reference{
            display:block;
            font-size: 1em;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            align-self: flex-start;
            margin:0em 0em 1em 2em ;
            text-indent: -2em;
            word-break: break-all;
        }
    }

    h1, h2, h3, h4, h5, h6{
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }

    h1{
        font-size: 3em;
    }

    p{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        line-height: 1.5em;
        font-size: 1em;
        text-align: left;
        width:100%;
        max-width: 98vw;
    }
    
    nav{
        padding: none;
        border:none !important;
        margin:none !important;

        ul{
            list-style-type: none;
            margin-left:0;
            
            li:first-child{
                font-weight: bold;
                margin-left: 0em;
            }
            
            a{
                cursor: pointer;
            }
            
            a.currentPageLink{
                background-color: var(--red);
                color:#FFFFFF;
                padding:.25em;
                /* border-radius: var(--rad); */
            }

            li{
                margin-left:1em;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                display: inline;
            
                a{
                    word-wrap:wrap;
                }
            }
        }
    }

    table{
        width:fit-content;
        border:1px solid black;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

        tr{
            border-bottom:1px;

            td{
                padding:1em;
            }
        }

        tr:nth-child(odd){
            background-color: var(--light_gray);
        }
    }

        
    .playlist{
        width:100%;
        overflow: auto;;
        border-bottom:1px solid var(--light_gray);


        table{
            width:100%;
            border-collapse: collapse;
            border:none;

            thead{

                th{
                    position: sticky;
                    top:0;
                    z-index: 2;
                    padding:1em 0em;
                    text-decoration: underline;
                    background-color: #FFF;
                }
            }
            
            tbody{

                tr{
                    background-color: #FFFFFF !important;
                    border-bottom:1px solid var(--light_gray);

                    td{
                        padding:.5em;
                    }
                    
                    td:first-child{
                        width:10%;
                        position: relative  ;

                        img{
                            width:100%;
                            height:100%;
                            object-fit: cover;
                            border:1px solid var(--light_gray);
                            padding:.25em;
                            background-color: #FFF;
                        }

                        button{
                            z-index: 1;
                            position: absolute;
                            top:50%;
                            left:50%;
                            transform: translate(-50%,-50%);
                            cursor: pointer;
                            padding:.25em;
                            border-radius: var(--rad);
                            border:none;
                            border:1px solid #FFF;
                            box-shadow: rgba(0,0,0,.5) 0 0 2px;
                            background-color: var(--red);
                            color:#FFF;
                        }
                    }
                }
            }

        }
    }


    .articlesHolderGrid{
        display: grid;
        max-width:90vw;
        grid-template-columns: repeat(auto-fill,minmax(350px,1fr));
        gap: 1em;
        
        article{
            width:350px;
            border: #CCCCCC 1px solid;
            border-radius: var(--rad);
            margin:1em 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            
            img{
                max-width:100%;
                border-top-left-radius: var(--rad);
                border-top-right-radius: var(--rad);
                border-bottom-right-radius: 0 !important;
                border-bottom-left-radius: 0 !important;
                margin-bottom:1em;
            }

            p {
                padding:1em;
                text-indent: 0 !important;
                flex-grow: 1;
            }

            h2 {
                padding:0 1em;
            }

            a.link_btn{
                display:block;
                width:100%;
                margin:1em 0 0 0;
                text-align: center;
                border-radius: 0 0 var(--rad) var(--rad) !important;
                cursor:pointer;
            }

        }
    }

    .articlesHolder{
        min-width:100%;
        columns: 300px;
        text-align: left;
        column-gap: 3em;

        article{
            width:100%;
            border: #CCCCCC 1px solid;
            border-radius: var(--rad);
            display: inline-block;
            margin:1em 0;
            
            img{
                max-width:100%;
                border-top-left-radius: var(--rad);
                border-top-right-radius: var(--rad);
                border-bottom-right-radius: 0 !important;
                border-bottom-left-radius: 0 !important;
                margin-bottom:1em;
            }

            p {
                padding:1em;
                text-indent: 0 !important;
            }

            h2 {
                padding:0 1em;
            }

            a.link_btn{
                display:block;
                width:100%;
                margin:1em 0 0 0;
                text-align: center;
                border-radius: 0 0 var(--rad) var(--rad) !important;
                cursor:pointer;
            }
        }
    }
}

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

        max-width: 100vw;
        padding:0 5vw;

        article{
            max-width: 90vw;

            img {
                max-width: 90vw;
            }

            p{
                max-width: 90vw;
            }

            ul{
                max-width: 90vw;
                margin-left:4em;
                word-wrap: wrap;
            }
        }
    }
    
}

@media screen and (min-width: 451px) {
    main {
        max-width: 100vw;
        padding:0 7vw;
    }
}

@media screen and (min-width: 1200px) {
    main {
        max-width: 100vw;
        padding:0 15vw;
    }
}

ul.authorList{
    list-style-type: none;
    margin-left:0;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap:1em;
        
    li{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        display: inline;
    }
}

#audio-player-container{
    width:100%;
    background-color: var(--red);
    color:#FFF;
    border:1px solid var(--light_gray);
    padding: 1em;
    margin: 1em auto;
    text-align: center;
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;

    img{
        object-fit: cover;
        height:100%;
        border-radius:var(--rad);
    }

    figcaption{
        width:100%;

        p {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size:1em;
            text-align: center;
            padding:1em;
            display: block;
            width:100%;
        }

        audio {
          background-color: var(--red); /* set the background color of the audio element */
          border: none; /* remove the border from the audio element */
          width:100%;
        }
        
        audio::-webkit-media-controls-panel {
          background-color: var(--red); /* set the background color of the controls panel */
        }
        
        audio::-webkit-media-controls-play-button {
          background-color: #FFF; /* set the background color of the play button */
          border: none; /* remove the border from the play button */
          border-radius: 50%; /* add a rounded corner to the play button */
        }
        
        audio::-webkit-media-controls-timeline {
          background-color: var(--red); /* set the background color of the timeline */
        }
        
        audio::-webkit-media-controls-current-time-display {
          color: #333; /* set the color of the current time display */
        }
        
        audio::-webkit-media-controls-time-remaining-display {
          color: #333; /* set the color of the time remaining display */
        }
    }
}

footer{
    width:100vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content:center;
    gap: 1ch;
    padding: 1em;
    position: relative;
    bottom: 0;
    border-top:1px solid #EFEFEF;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size:.8em;
}

.gridHolder{
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 10fr 200px 50px;
    height:100vh;
    width:100vw;
    overflow: hidden;

    main{
        overflow-y: scroll;    
    }
}