/* GENERAL STYLE */

    * {
        margin: 0;
        padding: 0;
    }

    /* TAGS */
    /* website sections */
    body {
        background: #a9a9a9;
        font-family: courier;
        color: white;
    }

    header {
        background: #3a3a3a;
        padding: 3%;
        font-size: 3vw;
    }

    nav {
        background: #999999;
        padding: 1% 3%;
        line-height: 2em;
    }

    nav li {
        list-style-type: none;
        display: inline;
        background-color: #101010;
        border: solid 0.5px white;
        border-radius: 0px;
        padding: 0.5% 0.6%;
        font-weight: bold;
    }

    nav li:hover {
        background-color: #606060;
    }

    main {
        padding: 1%;
        min-height: 30vh;
        font-size: medium;
    }

    section {
        float: left;
        width: 60%;
    }

    aside {
        float: right;
        width: 30%;
    }

    article {
        margin-bottom: 1.5%;
    }

    footer {
        padding: 1% 3%;
        background: #999999;
        clear: both;
    }

    /* general tags */
    a {
        text-decoration: underline;
        color: white;
    }

    ul {
        margin-left: 15px;
    }

    /* IDs */
    #wrapper {
        background: #3a3a3a;
        margin: 3% auto 3%;
        max-width: 70%;
        border: solid 0.5px black;
    }

    /*CLASSES*/
    .active {
        background-color: #909090;
    }

    .nodecoration {
        text-decoration: none;
    }

    /* MEDIA-QUERIES */
    @media only screen and (max-width: 620px),
    screen and (max-height: 620px) {
        #wrapper {
            max-width: 100%;
            margin: 0;
        }

        header {
            font-size: 100%;
        }

        main {
            min-height: 100%;
            font-size: small;
        }

        section,
        aside {
            float: none;
            width: 100%;
            margin-bottom: 3%;
        }

    }