@font-face {font-family: OpenSans-Regular; src: url('Font/OpenSans-Regular.ttf');}

html {
            font-size: 18px;
            color: black;
            font-family: open-sans;
            
        }

        body {
            background-color: white;
            font-family: OpenSans-Regular, sans-serif;
            margin: 0px;
        }

        /* NAV */       
    
        #menu img {            
            float: left;
            height: 3.7rem;
            width: 4.5rem;
        }

       #menu {
            text-align: center;
            background-color: #0174ad;
            width: 100%;           
            top: 0;
            left: 0;
            position: fixed;
            z-index: 1;
        }
        
        #menu ul {
            width: auto;
            margin-right: 3rem;
            padding: 0;
            float: right;
            
            }
        
        #menu ul li a{
            
            display: block;    
            text-decoration: none;
            color:black;
            font-size: large;
            font-weight: bold;            
            width: auto;
            margin-left: 1rem;
        }
        
        #menu ul li {
            list-style: none;
            display: inline-block;
        }

        a {
            text-decoration: none;
            color: blue;
        }

        #channelID {
           margin-top: 5rem;
           margin-left: 0.5rem; 
        }

        #top_container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
            align-items: center;
            margin: 0.5rem; 
        }

        #mainVideo {
            overflow: hidden;
            position: relative;
            width:100%;
           
        }

        #mainVideo::after {
            padding-top: 56.25%;
            display: block;
            content: '';
        }

        iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;           
        }

        #mid_container {            
            padding: 1rem 1.5rem;
        }

        #divider {
            background-color: #0174ad;
            height: 0.1rem;
            width: 100%;
            border: none;
            margin-top: 3rem;
        }

        #channel_container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
        }

        #channel_image {
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;        
            /*border: white solid 1px;*/
        }

        #slob {
            margin: auto;            
            width: 55%;
            height: auto;
            border-radius: 25%;           
        }

        #vidArchive {            
            
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(275px,1fr));
            row-gap: 0.5rem;
        }

        img {
            cursor: pointer;
            width: 250px;
            height: 125px;
        }

        article {
            border: thick double grey;
            margin: auto;
            padding: 0.75rem 0.25rem;           
        }

        

        /*footer styling*/

        #footer_container {
            background-color: rgb(31, 31, 31);
            width:100%;
            height: auto;                      
            color: white;
            display: flex;            
            justify-content: space-between;
                      
        }

        #social {            
            text-align: left;
            font-size: .75rem;
        }

        #address {           
            text-align: center;
            padding-left: 5rem;
            font-size: .75rem;
            
        }

        #links {            
            text-align: left;
            padding-right: 1.4rem;
        }

        ul {
            list-style: none;           
        }

        li {
            padding-top: .28rem;
        }

        li a {
            text-decoration: none;
            color: white;
            font-size: .75rem;
        }

        @media screen and (max-width: 300px) {
            #address {
                display: none;
            }
        }