body {
margin : 0 2px;
background-size : cover;
font-family : Arial, Helvetica, sans-serif;
font-size : 18px;
line-height : 1.42857143;
color : #333;
}
h1, h2 {
color : rgb(6, 90, 205);
text-align : center;
font-weight : 500;
line-height : 1.1;
}
main p {
text-align : justify;
padding-left : 7%;
padding-right : 7%;
color : rgb(0, 51, 128);
}
footer p {
text-align : center;
}
article, footer, header, main, section {
display : block;
}
a {
background-color : transparent;
}
img {
border : 0;
}
* {
box-sizing : border-box;
}
:after, :before {
box-sizing : border-box;
}

a {
color : #337ab7;
text-decoration : none;
}
img {
vertical-align : middle;
}


.container {
padding-right : 15px;
padding-left : 15px;
margin-right : auto;
margin-left : auto;
}
.container:after, .container:before {
display : table;
content : " ";
}
.container:after {
clear : both;
}

.bor {
border : black solid 1px;
}
.home {
background-color : rgb(110, 207, 173);
}
.code {
background-color : rgb(227, 227, 227);
}
.cms {
background-color : rgb(255, 242, 185);
}
.site {
background-color : rgb(249, 252, 187);
}
.apps {
background-color : rgb(217, 252, 194);
}
.foto {
background-color : rgb(207, 252, 236);
}
.print {
background-color : rgb(178, 228, 255);
}
.dat {
background-color : rgb(176, 200, 227);
}
.dataact {
background-color : rgb(176, 200, 227);
border-width : 1px;
border-style : solid;
border-color : black black rgb(176, 200, 227) black;
}
.pub {
background-color : rgb(208, 200, 228);
}
.info {
background-color : rgb(240, 200, 240);
}
@media (max-width: 768px) {
.container {
padding-right : 0;
padding-left : 0;
margin-right : 0;
margin-left : 0;
}
.container > div {
flex-basis : 70px;
}

article {
margin : 5px;
}
section {
margin : 5px;
}
}
@media (min-width: 768px) {
.container {
width : 750px;
padding-right : 15px;
padding-left : 15px;
margin-right : auto;
margin-left : auto;
}
article {
margin : 20px;
}
section {
margin : 20px;
}
.container > div {
flex-basis : 100px;
}
}
@media (min-width: 992px) {
.container {
width : 970px;
padding-right : 15px;
padding-left : 15px;
margin-right : auto;
margin-left : auto;
}
article {
margin : 40px;
}
section {
margin : 40px;
}
.container > div {
flex-basis : 100px;
}
}
@media (min-width: 1200px) {
.container {
width : 1170px;
padding-right : 15px;
padding-left : 15px;
margin-right : auto;
margin-left : auto;
}
article {
margin : 80px;
}
section {
margin : 80px;
}
.container > div {
flex-basis : 100px;
}
}
.container {
padding : 0;
margin-left : auto;
margin-right : auto;
display : flex;
flex-wrap : wrap;
justify-content : center;
align-items : stretch;
}
.container > div {
color : #333;
text-align : center;
flex-grow : 1;
cursor : pointer;
border-radius : 4px 4px 0 0;
text-align : center;
line-height : 40px;
}
.container > div > a {
text-decoration : none;
color : black;
font-size : 14px;
}
.container > div:focus, .container > div:hover {
filter : saturate(140%);
filter : brightness(110%);
}
.container > div > a:focus, .container > div > a:hover {
text-decoration : none;
color : black;
}

@media only screen and (max-width: 768px) {
img {
margin-right : 0%;
margin-left : 0%;
}
}
@media only screen and (min-width: 768px) {
img {
margin-right : 5%;
margin-left : 5%;
}
}
img {
float : left;
max-width : 100%;
height : auto;
}
#matplotlib {
margin-left : 5%;
margin-right : 5%;
max-width : 90%;
}