:root {
    --color1: #024b00;
    --color2: #1d9419;
    --color3: #64ff34;
    --color4: #c2fcb4;
    --extreme: #000000;
    --oposite: #ffffff;
    --contrast: #80ff80;
}

body  {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1em;
    color:var(--color4);
    background-color: var(--extreme);
}

h1 {
    font-size: 1.8em;
    font-weight: bold;
}
h2 {
    font-size: 1.4em;
    font-weight: bold;
}
h3 {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 0px;
}

a, a:visited {
    text-decoration: none;
    color: var(--color3);
}

a:hover {
    text-decoration: underline;
    color: var(--contrast);
}

.header-title {
    font-size: 2em;
    font-weight: bold;
    display: flex;
    flex-direction: row;
}

.header {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.links {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
}

#homepage, #repository {
    font-size:0.7em;
    background-color: var(--color1);
    border: var(--color3) 1px solid;
    padding: 5px;
    margin: 0 3px;
    height: 2em;
    width: 18em;
    text-align: center;
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
}

.description {
    text-align: justify;
}

.svgIconsDiv {
    margin-bottom: 10px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}
#watchers, #stars, #forks {
    border: var(--color3) 1px solid;
    color: var(--color3);
    background-color: var(--color1);
    padding: 5px;
    margin-right: 5px;
    font-size: 0.8em;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}
#watchers a, #stars a, #forks a {
    color: var(--color3);
}
.svgicons {
    color: var(--color3);
    fill: currentColor;
    margin-right:3px;
}

.ownedby img {
    vertical-align: middle;
    border: 0;
    border-radius: 50%;
}
.owner {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: smaller;
}
.footer {
    text-align: center;
    color: var(--extreme);
    background-color: var(--color2);
    padding: 10px;
    clear: both;
}
.actionmkt {
    font-size: x-small;
}
.lastupd {
    font-size: small;
}
#issues {
    border: dashed 2px var(--color3);
    background-color: var(--color1)
}
.issue {
    display: grid;
    grid-template-columns: 40% 20% 20% 20%;
    border-bottom: dashed 1px var(--color3);
    padding: 0px 5px 5px 5px;
    margin:10px 0px 5px 0px;
}

.issueIdSpan {
    grid-column: 1;
    grid-row: 1;
}
.issueCreatedAt {
    grid-column: 2;
    grid-row: 1;
}
.issueAuthor {
    grid-column: 3;
    grid-row: 1;
}
.issuesCommentsCount {
    grid-column: 4;
    grid-row: 1;
}

.container {
    border: dashed 2px var(--color3);
    padding: 0px 10px 10px 10px;
    margin-bottom: 10px;
}

#readme_inline {
    border: solid 1px var(--color1);
    margin-bottom: 10px;
}
.readme_title {
    text-align: center;
    color: var(--color4);
    background-color: var(--color1);
    padding: 5px 0px 5px 0px;
    /* top right bottom left */
    clear: both;
    width: 100%;
}
.readme_content {
    padding: 10px;
}

.container h1, .container h2, .container h3 {
    margin-top:10px;  
}

.languagesBar {
    display: flex;
    width: 100%;
    height: 8px;
}
.languageName {
    color: var(--color4);
    font-size: small;
}

.topics {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    gap: 5px;
}

.topics span {
    border: var(--color3) 1px solid;
    background-color: var(--color1);
    padding: 5px;
    font-size: 0.8em;
}

#license {
    background-color: var(--color1);
    margin-bottom:0px;
}

#smalldiv {
    width: 20%;
    float: left;
    clear: left;
    position: relative;
}

#bigdiv {
    width: 79%;
    float: right;
    clear: right;
}

/* Elements for the converted README.md */
table {
    border-collapse: collapse;
    border: 1px solid var(--color1);
    background-color: var(--extreme);
}

th {
    background-color: var(--color1);
}

td {
    padding: 5px;
    border: 1px solid var(--color1);
}

pre {
    background-color: var(--color1);
}
/* END: Elements for the converted README.md */

@media only screen and (max-width: 768px) { /* For mobile phones: */
    * {
        box-sizing: border-box;
    }

    body {
        margin: 0px;
    } 

    .linktext {
        display: none;
    }

    #homepage, #repository {
        height: 2rem;
        width: 5em;
    }
    
    /* The side navigation menu */
    #smalldiv {
        width: 100%;
        float: none;
    }
  
    #bigdiv {
        width: 100%;
        float: none;
    }

    .issue {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        border-bottom: solid 1px var(--color3);
        padding: 0px 5px 5px 5px;
        margin:10px 0px 5px 0px;
    }
    .issue span {
        margin: 0em 0em 0em 0.5em;
    }
}