@font-face {
    font-family: ProximaNovaRegular;
    src: url("https://assets.jveweb.net/css/fonts/proxima/ProximaNova-Regular.otf") format("opentype");
}
body {
    font-family: ProximaNovaRegular, sans-serif;
}
code {
    font-family: monospace;
}
.clear {
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}
footer {
}

@media screen and (max-width: 420px) {
    section {
        width: 100%;
        background-color: #CCCCCC;
    }
    article {
        width: 100%;
        background-color: #F8F8F8;
        border-bottom: 2px solid darkgray;
    }
    aside {
        width: 100%;
    }
    .content:after { 
       content: " ";
       display: block; 
       height: 0; 
       clear: both;
    }
    .codeholder {
        background-color: #EEEEEE;
        border-left: 0.3em solid #CCCCCC;
        padding-top: 0.3em;
        padding-bottom: 0.3em;
        padding-left: 0.3em;
    }
    .articleContainer {
        width: 98%;
        margin-left: auto;
        margin-right: auto;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* Style the navigation menu */
    .topnav {
      overflow: hidden;
      background-color: #333;
      position: relative;
    }

    /* Hide the links inside the navigation menu (except for logo/home) */
    .topnav #myLinks {
      display: none;
    }

    /* Style navigation menu links */
    .topnav a {
      color: white;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
      display: block;
    }

    /* Style the hamburger menu */
    .topnav a.icon {
      background: black;
      display: block;
      position: absolute;
      right: 0;
      top: 0;
    }

    /* Add a grey background color on mouse-over */
    .topnav a:hover {
      background-color: #ddd;
      color: black;
    }

    /* Style the active link (or home/logo) */
    .active {
      background-color: #265b79;
      color: white;
    }
    .langVersions {
        font-size: small;
    }
}

@media screen and (min-width: 768px) {
    section {
        width: 69%;
        float: left;
        background-color: #CCCCCC;
    }
    article {
        100%;
        background-color: #F8F8F8;
        border-bottom: 2px solid darkgray;
    }
    aside {
        width: 29%;
        float: right;
    }
    .content:after { 
       content: " ";
       display: block; 
       height: 0; 
       clear: both;
    }
    .codeholder {
        background-color: #EEEEEE;
        border-left: 0.3em solid #CCCCCC;
        padding-top: 0.3em;
        padding-bottom: 0.3em;
        padding-left: 0.3em;
    }
    .articleContainer {
        width: 98%;
        margin-left: auto;
        margin-right: auto;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* Style the navigation menu */
    .topnav {
      overflow: hidden;
      background-color: #333;
      position: relative;
    }

    /* Hide the links inside the navigation menu (except for logo/home) */
    .topnav #myLinks {
      display: none;
    }

    /* Style navigation menu links */
    .topnav a {
      color: white;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
      display: block;
    }

    /* Style the hamburger menu */
    .topnav a.icon {
      background: black;
      display: block;
      position: absolute;
      right: 0;
      top: 0;
    }

    /* Add a grey background color on mouse-over */
    .topnav a:hover {
      background-color: #ddd;
      color: black;
    }

    /* Style the active link (or home/logo) */
    .active {
      background-color: #265b79;
      color: white;
    }
    .langVersions {
        font-size: x-small;
    }
}

@media screen and (min-width: 1040px) {
    section {
        width: 79%;
        float: left;
        background-color: #CCCCCC;
    }
    article {
        width: 100%;
        background-color: #F8F8F8;
        border-bottom: 2px solid darkgray;
    }
    aside {
        width: 19%;
        float: right;
    }
    .content:after { 
       content: " ";
       display: block; 
       height: 0; 
       clear: both;
    }
    .codeholder {
        background-color: #EEEEEE;
        border-left: 0.3em solid #CCCCCC;
        padding-top: 0.3em;
        padding-bottom: 0.3em;
        padding-left: 0.3em;
    }
    .articleContainer {
        width: 98%;
        margin-left: auto;
        margin-right: auto;
        padding-top: 10px;
        padding-bottom: 10px;
    }


    /* Style the navigation menu */
    .topnav {
      overflow: hidden;
      background-color: #333;
      position: relative;
    }

    /* Hide the links inside the navigation menu (except for logo/home) */
    .topnav #myLinks {
      display: none;
    }

    /* Style navigation menu links */
    .topnav a {
      color: white;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
      display: block;
    }

    /* Style the hamburger menu */
    .topnav a.icon {
      background: black;
      display: block;
      position: absolute;
      right: 0;
      top: 0;
    }

    /* Add a grey background color on mouse-over */
    .topnav a:hover {
      background-color: #ddd;
      color: black;
    }

    /* Style the active link (or home/logo) */
    .active {
      background-color: #265b79;
      color: white;
    }
    .langVersions {
        font-size: x-small;
    }
}

@media print {
    #content aside {
        display: none;
    }
    body header {
        display: none;
    }
    .codeholder {
        border: 2px dotted #999999;
        padding-top: 0.3em;
        padding-bottom: 0.3em;
        padding-left: 0.3em;
    }
    .langVersions {
        display: none;
    }
}