* {
    box-sizing: border-box;

}
@font-face {
  font-family: myFirstFont;
  src: url(roboto/Roboto-Bold.ttf);
  font-weight: bold;
}
html{
  scroll-behavior: smooth;
}
body {
    margin: 1em;
    font: 1.2em/1.3em 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Roboto-Light', 'Roboto Light', 'Roboto', 'Segoe UI Web Light', 'Segoe UI Light', 'Segoe UI Web Regular', 'Segoe UI', Helvetica, Arial, sans-serif;
    color: #000;


}

a:link {
  color: white;
  text-decoration: none;
  font-size: 100%;
  font-weight: bold

}


a:visited {
  color: white;
  text-decoration: bold;
  font size: 30px;
}


a:hover {
  color: red;
  text-decoration: none;
}


a:active {
  color: blue;
  text-decoration: underline;
}


h2 {
    /*text-align: center;*/
    color:white;
}
p {
    margin: 0 0 1em 0;
}

#main {
   margin: 0;
   padding: 0;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: row;
   flex-flow: row;

}

header{
  position:sticky;
  padding:3px;
  z-index: 99;
  height:160px;
  top: 0;
  background: #FFFFFF;
  background-image: url(4_3.jpg);
  /*  height: 70px;*/
}

#main > nav,
#main >article {
   margin: 4px;
   padding: 1em;
}

#main > nav {
   background:#EBF4FA;
   -webkit-flex: 5 3 0;
  /*         flex: 5 3 0;*/
  flex:auto;
   -webkit-order: 2;
           order: 2;
  min-height: 550px;
}

#main > article {
   background: #EBF4FA;
   -webkit-flex: 1 6 0;
      /*     flex: 1 6 0;*/
      flex:auto;
   min-width: 400px;
   font-size:15px;
   font-weight: bold;
}

#main > article {
   -webkit-order: 1;
           order: 1;
}

footer {
   min-height: 40px;

   color:white;
  padding: 0.5em;
  text-align: center;
  /*position :absolute;
  width:100%*/
}
.footer-content{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

footer {
  background:#151B54;
}


/* Too narrow to support three columns */
  @media all and (max-width: 800px) {

   #main, #page {
    -webkit-flex-flow: column;
            flex-flow: column;
}

   #main > article, #main > nav, #main > aside {
    /* Return them to document order */
    -webkit-order: 0;
            order: 0;
   }

   #main > nav, #main > aside, header, footer {
    min-height: 30px;

   }

}