body, html {
  background-color: lightblue;
  height: 100%;
  display: flex;
  flex-direction: column;
}

body {
  background-image: url('images/background.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

header {
  background-color: lightgreen;
  opacity: 0.7;
  min-height: 8%;
  margin: 2px;
  border: 3px solid green;
  padding:3px;

  .logo {
    float: left;
    opacity: 1.0;
  }

  nav {
    float: right;
    min-height: 40%;
    min-width: 50%;
    background-color: lightgrey;
    opacity: 100;
    margin: 2px;
    border: 3px solid green;
    padding:3px;
  
    div {
      float: left;
      background-color: gray;
      opacity: 0.9;
      margin-left: 2px;
      border: 3px solid green;
      padding:3px;
    }
  }
}

main {
  background-color: lightyellow;
  min-height: 83%; 
  margin: 2px;
  border: 3px solid green;
  padding:3px;
}

footer{
  background-color: grey;
  opacity: 0.6;
  min-height: 4%;
  margin-top: auto;
  margin: 2px;
  border: 3px solid green;
  padding:3px;
}



section {
  min-height: 100%;
  display: none;

  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;

  &:target {
    display: block;
  }

}

#f1 {
  background-image: url("images/flowers001.jpg");
}
#f2 {
  background-image: url("images/flowers002.jpg");
}
#f3 {
  background-image: url("images/flowers003.jpg");
}
#f4 {
  background-image: url("images/flowers004.jpg");
}
#f5 {
  background-image: url("images/flowers005.jpg");
}
#f6 {
  background-image: url("images/flowers006.jpg");
}
#f7 {
  background-image: url("images/background.jpg");
}