amontourdeprogrammer.css

@font-face {
  font-family: "Ubuntu Light Italic";
  src: url("Ubuntu-L.ttf");
}

body { font-family:"Ubuntu Light Italic"; margin-left: 5%; margin-right: 5%; margin-bottom: 100px; }

figure {max-width: 80%; text-align:center; }
figcaption {max-width: 100%; }

section, .header { max-width:70em; margin:auto; }
section { margin-bottom: 3em; }

dt {font-weight:bolder;margin-top:2em}

.header { text-align:center; }
.main-title {font-style:italic; text-align:center;font-size:2.5em; }
.main-title:before {content:"«"; }
.main-title:after {content:"»"; }
.portrait {max-width:10em; max-height:10em; }
.inspiration {list-style:none; }
.inspiration li {float:left; max-width:10em;margin:2em ; }

@media (max-width: 700px) {
  body {font-size: 150%; }
  img {max-width: 100%; }
  small {font-size: 50% ; }
  button {font-size: 100% ; }
}

.header-nav{
  text-align: center;
  width: 100%;
  top: 0;
  left: 0;
  border-bottom: 1px solid #ffdd00;
}

.header-nav ul li:hover{
  background-color: #ffdd00;
}

@media (max-width: 700px) {
  body {font-size: 150%; }
  img {max-width: 100%; }
  small {font-size: 50% ; }
  button {font-size: 100% ; }
}

@media screen and (min-width: 900px) {

  .header-nav {
    background-color:#fff;
    position: sticky;
    padding:25px 10px;
  }

  .header-nav ul{
    display:inline-flex;
    list-style-type:none;
    margin:0px;
    padding:0px;
    float:right;
  }

  .header-nav ul li{
    margin-left:50px;
  }

  .header-nav ul li a {
    color:#000;
    text-decoration:none;
  }

}

@media screen and (max-width: 900px) {

  .header-nav {
    padding: 10px 0px;
  }

  .header-nav ul{
    margin: 10px auto;
    padding: 0px;
    list-style-type: none;
  }

  .header-nav ul li {
    background-color: #e1ff00;
    border-bottom: 2px solid white;
    padding: .3em 0;
  }

  .header-nav ul li:hover{
    color:#ffffff;
    cursor:pointer;
  }

  .header-nav:hover ul{
    visibility: visible;
    opacity: 1;
  }

  .header-nav ul li a {
    color:#000;
    text-decoration:none;
  }
}