@font-face {
    font-family: 'poppinsregular';
    src: url('assets/poppins-regular-webfont.woff2') format('woff2'),
        url('assets/poppins-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'dejavu_sansbook';
    src: url('assets/dejavusans-webfont.woff2') format('woff2'),
        url('assets/dejavusans-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    width: 99%;
    padding-bottom: 2px;
    margin: auto;
    background-color: #ccc;
    color: black;
    font-family: dejavu_sansbook;
    font-size: large;
}

h1,
footer {
    color: #eee;
}

.noborder {
    border-right: none;
}

.tip {
  position: relative;
}

.tip:before {
  visibility: hidden;
  transition-property: visibility;
  transition-delay: 0.25s;
  content: attr(aria-label);
  padding: 2px 8px;
  background: #1F4242;
  color: #eee;
  border-radius: 4px;
  white-space: nowrap;
  position: absolute;
  top: 110%;
  left: 70%;
  transform: translateX(0%);
}

.tip:hover:before,
.tip:focus:before{
    visibility: visible;
}

h1,
h2 {
    font-family: dejavu_sansbook;
}

section,
article,
aside,
footer,
header {
    padding: 0.7rem;
}

img,
video,
embed {
    max-width: 98%;
}

footer {
    position: relative;
}

/* default navigation values */

.logo {
    float: left;
    clear: both;
    height: auto;

}

.currentpage {
    background-color:#aaa;
}

h1 {
    margin: auto;

}

header,
footer {
    background-color: #1F4242;
    text-align: center;
    border-bottom: 1px solid white;
}
nav a {
    background-color: #1F4242;
}
nav ul {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
nav ul li {
  position: relative;
}
nav ul li a {
  display: flex;
  color: rgb(255, 255, 255);
  text-decoration: none;
  padding: 10px;
  border-bottom: solid 1px #000;
}

.dropdown > li > ul {
  display: none;
  position: absolute;
  right: 0;
  margin-top: 0;
  padding: 0;
  z-index: 2;
}
.dropdown li ul li {
  border-right: solid 1px #000;
}
.dropdown > li:hover > ul {
  display: block;
}

.clear {
    clear: both;
}

aside {
    background-color: #106C6C;
    float: Left;
    color: #eee;
}
    .logo {
     order: -1;

    }

    nav,
    header {
        order: -1;
    }

    nav {
        flex-direction: row;
    }

    nav a {
        flex: auto;
    }

    nav a:hover {
        background-color: white;
        color: black;
    }

    article {
        flex: 50%;
    }

    aside,
    section {
        flex: 100%;
    }



/* medium screen */
@media screen and (min-width: 768px) {
body {
        display: flex;
        flex-direction: column;
        max-width: 75rem;
    }
main {
        display: flex;
        flex-wrap: wrap;
        border-left: solid black 1px;
        border-right: solid black 1px;

    }
     
    nav ul {
    flex-direction: row;
  }
  nav ul li {
    flex: auto;
  }
  .dropdown > li > ul {
  left: 0;
}
}

/* large screen */
@media screen and (min-width: 1200px) {
    article {
        flex: 35%;
        border-right: solid black 1px;
        border-bottom: solid black 1px;
    }

    article:nth-child(2) {
        border-right: none;
    }

    aside {
        flex: 30%;
    }
}