* {
    box-sizing: border-box;
}

body {
    /*font-family: Arial;*/
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    padding: 10px;
    background: #f1f1f1;
}

/* Header/Blog Title */
.header {
    background-color:  #000000;  /* #60607d;#1A648F;  #005299;  #f1f1f1;*/
    background-repeat: no-repeat;
    background-position: left; 
    padding: 15px;
    text-align: left;
    font-size: 28px;
    color: #ffffff;
    background-color:  #000000;
    text-shadow: 0 0 5px #38c4fe;
}

topnav {
    background-color: #000;
    padding: 10px 0; /* Vertical padding for the bar */
    width: 100%;
    position: sticky; /* Keeps it at the top while scrolling */
    top: 0;
    z-index: 1000;
}

.topnav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;          /* This aligns items in a row */
    justify-content: center; /* Centers the boxes across the top */
    gap: 10px;              /* Adds space between the boxes */
}

/* Style the links as individual boxes */
.topnav a {
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 12px 24px;
    text-decoration: none;
    transition: 0.3s;
    
    /* Box Styling */
    border: 1px solid #444;    /* Subtle border */
    border-radius: 4px;        /* Slightly rounded corners */
    background-color: #222;    /* Dark box fill */
}

/* Hover effect for the boxes */
.topnav a:hover {
    background-color: #555;    /* Lighter gray on hover */
    color: #fff;
    border-color: #ecc;        /* Matches your slider's accent color */
}

/* Active/Current page box */
.topnav a.active {
    background-color: #dc3545; /* Red highlight to match your Play button */
    border-color: #dc3545;
}


.active {
    background-color: #445555; /*#60607d;*/
}


.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}



/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {   
    float: left;
    width: 70%;
    font-size: 17px;
}

/* Right column */
.rightcolumn {
    float: left;
    width: 30%;
    background-color: #f1f1f1;
    padding-left: 20px;
    font-size: 17px;
}

.leftcolumn a:link {
    text-decoration: none;
    color: #504071;
}

.leftcolumn a:visited {
    text-decoration: none;
    color: #504071;
}

.leftcolumn a:hover {
    text-decoration: none;
    color: #7F64AB;
}

.rightcolumn a:link {
    text-decoration: none;
    color: #504071;
}

.rightcolumn a:visited {
    text-decoration: none;
    color: #504071;
}

.rightcolumn a:hover {
    text-decoration: none;
    color: #7F64AB;
}

/* Fake image */
.fakeimg {
    background-color: #aaa;
    width: 100%;
    padding: 20px;
}

/* Add a card effect for articles */
.card {
    background-color: white;
    padding: 20px;
    margin-top: 20px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Footer */
.footer {
    padding: 10px;
    text-align: center;
    background: #ddd;
    margin-top: 20px;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: center; 

}



.imgholder, .imgl, .imgr{padding:4px; border:1px solid #D6D6D6; text-align:center;}
.imgl{float:left; margin:0 15px 15px 0; clear:left;}
.imgr{float:right; margin:0 0 15px 15px; clear:right; width:65%;}



figcaption{font-size:10px}

table#team {
    width:100%;
}
table#team th, td {
    border: 0px solid black;
    border-collapse: collapse;
    padding: 8x;
    text-align: left;
    font-size: 13px;
}
table#team th {
    background-color: #eee;
}



/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 750px) {
    p{font-size: 10px}
       
        .leftcolumn, .rightcolumn {   
        width: 100%;
        padding: 0;
        font-size: 10px;
    }

    .topnav {padding-left: 12px;}

    .topnav a {
        font-size: 12px;
        padding: 3px 7px;
    }

   .imgr{float:right; margin:0 0 15px 15px; clear:right; width:100%; font-size: 10px;}

   figcaption{font-size:10px}
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
    .topnav {padding-left: 10px;}

    .topnav a {
        font-size: 10px;
        padding: 3px 6px;
    }

   .imgr{float:right; margin:0 0 15px 15px; clear:right; width:100%; font-size: 10px;}

   figcaption{font-size:10px}
}