* {
    box-sizing: border-box;
}

body {
margin: 0 auto; 
    padding: 10px;
    background: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}

/* Style the top navigation bar */
.topnav {
    overflow: hidden;
    background-color: #353b55;;
}

/* Style the topnav links */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}


/* Header/Blog Title */
.header {
    padding: 20px;

    background: white;
}

.header h1 {
    font-size: 40px;
}



/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {   

   width: 100%;
   padding: 10px;

}

/* ----- for Meet Bacteria vido ----*/
.video{
 position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
}
.video iframe{
  position: absolute;
  width: 100%;
  height: 100%;1
}


/* 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: 20px;
    text-align: center;
    background: #ddd;
    margin-top: 20px;
}

/* 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: 800px) {
    .leftcolumn, .rightcolumn {   
        width: 100%;
        padding: 0;
    }
}


/* Responsive layout - makes the three columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */
@media screen and (max-width: 600px) {
    .column {
        width: 100%;
    }

/* 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 a {
        float: none;
        width: 100%;
    }
}


/*----------------------accesibility---------------------------*/

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}


.disclaimer {
        color: #757575; /*Color of Disclaimer Text*/
        font-size:12px; /*Font Size of Disclaimer Text*/
        font-family:  Arial, Helvetica, sans-serif; /*Web Safe Font Family of Disclaimer Text*/
}
    
/

/*------shows desktop version and hides mobile version----------*/

.desktop-version {
display: inline;
}
.mobile-version {
display: none;
}