h1{
color:#003399;
}
h2{
color:#003399;
}
h3{
color:#003399;
text-align:center;
}
figcaption {
color:#003399;
text-align:center;
}
body{
	font-size:1.2em;
	color:#003399;
}
IMG.myimageclass {
text-align:center;
width:95%;
border-radius: 10%;
}
.pics{
text-align:center;
display:flex;
display:-webkit-flex;
flex-direction:row;
-webkit-flex-direction:row;
		}
@media (max-width:50em){
.pics{
display:block;
}
}
                            /*grid styles*/
.grid3 {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  justify-content: center;
}
.grid2 {
  display: grid;
  grid-template-columns: 50% 5%;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  justify-content: center;
}
@media (max-width:50em){
.grid3{
grid-template-columns:100%;
}
.grid2{
grid-template-columns:100%;
}
}

 /* style for tabs when wanted*/
#Tabs 
.tabs{
	display:block;
}
.tabs ul 
{
display:block;
margin:0;
padding:0;
list-style-type:none;
overflow:hidden;
}

ul.tabs li {
display:inline-block;
margin:0;
padding:0;
clear:none;
float:left;
}

ul.tabs li a {
display:block;
margin-left:6px;
padding:4px;
background:#003399;
border-bottom:5px solid #F0F0F0;
-moz-border-radius-topleft:4px;
border-top-left-radius:4px;
-moz-border-radius-topright:4px;
border-top-right-radius:4px;
/* end of rounded borders
*/
color:white;
text-decoration:none;
font-weight:bold;
font-size:1.2em;
}

ul.tabs li a:hover {
text-decoration:underline; /* a very simple effect when hovering the mouse on tab*/
}

ul.tabs li a[aria-current="page"] {
      text-decoration: underline;
}

@media (max-width:50em){
 ul.tabs li{
		width:95%;
	}	
}

        #stuff{
                height:100%;
                overflow:scroll;
        }
        /* The modal's background */
        .modal {
          display: none;
          position: fixed;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          overflow: auto;
          background-color: rgb(0, 0, 0);
          background-color: rgba(0, 0, 0, 0.4);
        }

        /* Display the modal when targeted */
        .modal:target {
          display: table;
          position: absolute;
        }

        /* The modal box */
        .modal-dialog {
          display: table-cell;
          vertical-align: middle;
        }

        /* The modal's content */
        .modal-dialog .modal-content {
          margin: auto;
          background-color: #f3f3f3;
          position: relative;
          padding: 0;
          outline: 0;
          border: 1px #777 solid;
          text-align: center;
          width: 80%;
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

        /* The button used to close the modal */
        .closebtn {
          text-decoration: none;
          float: right;
          font-size: 20px;
          color: #000;
        }

        .closebtn:hover,
        .closebtn:focus {
          color: #000;
          text-decoration: none;
          cursor: pointer;
        }

        .container {
          padding: 2px 16px;
        }

        header {
          /*background-color: #5cb85c;*/
          font-size: 12px;
          /*color: white;*/
        }

        footer {
          background-color: #5cb85c;
          font-size: 20px;
          color: white;
        }