@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@200;300;400&display=swap');
/* text format definition */

p {
    text-align: left;
    width: 120%;
    font-size: 140%;
}

a {
    text-align: left;
    width: 120%;
    font-size: 100%;
}

code {
    color: #ffffff;
    background: #171717;
    border-radius: 0.2vw;
    font-size: 110%;
    padding: 3px 4px;
}

/* body definition */

body {
    /*font-family: "Arial", Helvetica, sans-serif;*/
    font-family: 'Heebo', serif;
    font-weight: 400;
    margin: 0;
    /*! background: #171717; */
    background: url("/source/images/bg1.png") no-repeat center center fixed;
    color: #e8e6da;
    background-size: 100vw 100vh;
}

body .link {
    color: #ffd857;
}

body .link:hover {
    color: #ffffff;
}

body .link:active {
    color: #6a8cd6;
}

/*body .link:visited {
    color: #ffd857;
}*/

/* header definition */

header {
    background: #e8e6da;
}

.page_header {
    display: flex;
    justify-content: space-between;
    height: 70px;
}

header h1 {
    color: #171717;
    /*font-size: 2.4vw;*/
    margin-left: 15vw;
    text-align: center;
}

div .log {
    display: flex;
}

header .first {
    color: #171717;
    width: 70px;
    background-color: red;
}

header .second {
    color: #171717;
    width: 70px;
    background-color: yellow;
}

.buttonl {
    font-size: 100%;
    text-decoration: underline;
    background-color: #D9DB64;
    /* Green */
    border: none;
    color: white;
    text-decoration: none;
    cursor: pointer;
    height: 70px;
    /*Takes all available height*/
    width: 70px;
    /*Takes all available width*/
}

.buttonr {
    font-size: 100%;
    text-decoration: underline;
    background-color: #6664DB;
    /* Green */
    border: none;
    color: white;
    text-decoration: none;
    cursor: pointer;
    height: 70px;
    /*Takes all available height*/
    width: 70px;
    /*Takes all available width*/
}

header .log center {
    text-decoration: underline;
}

/* .navigation (class) definitions */

.navigation {
    float: left;
    width: 15vw;
    height: 30vw;
    margin-top: 2vw;
    margin-left: 1vw;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
}

.navigation a {
    font-size: 130%;
    text-decoration: none;
    text-align: left;
    background-color: rgba(0, 0, 0, 0.5);
    margin-left: 2vw;
    width: 12vw;
    height: 30px;
    display: block;
}

.navigation a:hover {
    margin-left: 2vw;
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.150);
    color: #ffd857;
}

.navigation h1 {
    font-size: 180%;
    margin-left: 2vw;
}

.navigation br {
    display: block;
}

/* section and article (element) definitions */

#article {
    background: rgba(110, 110, 110, 0.5);
    border-radius: 10px;
    margin-left: 17%;
    margin-bottom: 2vw;
    width: 80%;
}

section {
    margin-left: 1%;
}

#article h1 {
    margin-top: 2vw;
    font-size: 200%;
    text-align: center;
    text-decoration: underline;
}

#article p {
    width: 90%;
    margin: 10px auto 10px auto;
}

#article .wiki {
    font-family: sans-serif;
    margin: auto;
    color: black;
    width: 90%;
    background-color: white;
    padding: 5px 5px 10px 10px;
    border-radius: 0.2vw;
}

#article .wiki a {
    font-size: 90%;
    color: #000000;
}

#article .wiki a:hover {
    color: #5f5656;
}

#article .wiki a:active {
    color: #d6d46a;
}

/* footer definitions */

footer {
    width: 100%;
    background: #333333;
    color: white;
    text-align: center;
    padding: 15px 0;
}

footer a {
    margin-top: 20px;
}

footer .link {
    color: #c7c7c7;
}

footer .link:hover {
    color: #ffffff;
}

footer .link:visited {
    color: #ffd857;
}

/* class definitions */

.logo {
    width: 4vw;
    filter: invert(80%)
}

.logo:hover {
    filter: invert(100%);
}

.image {
    margin: 20px;
    /*width: 900px;*/
    width: 60%;
    border: 3px solid #9e9e9e;
    border-radius: 5px;
}

.imglink {
    margin: 4%;
    /*width: 900px;*/
    width: 30%;
    /*border: 3px solid #9e9e9e;*/
    border-radius: 15px;
    image-rendering: crisp-edges;
}

/* element id definitions */

#logopiggy {
    /*width: 5vw;*/
    margin: 3px;
}

#logopig {
    width: 64px;
}

#pink {
    font-family: sans-serif;
    color: #e86bd3;
    text-decoration: none;
}

#pink:hover {
    color: #f35f5f;
    text-decoration: none;
}

/* MEDIA definitions */

@media screen (pointer:none),
(pointer:coarse) {
    .navigation {
        width: 95vw;
        height: 70vw;
    }

    .navigation a {
        width: 90vw;
        font-size: 200%;
        height: 50px;
    }

    #article {
        width: 94vw;
        margin-left: 2vw;
        margin-top: 85vw;
        margin-bottom: 5vw;
    }

    body {
        background-size: 400vh;
        /*background: whitesmoke;*/
    }

    #logopiggy {
        /*width: 20vw;*/
        margin: 3px;
    }

    header h1 {
        font-size: 120%;
    }

    .logo {
        width: 15vw;
    }
}