/* anchors */

a { color: #333; }
a:visited { color: #666; }

/* banner */

div#banner {
    grid-area: banner;
    background: rgb(72, 50, 121); color: #fff;
}

div#banner p {
    margin: 0.5em;
}

p#name {
    font-size: large;
    font-weight: bold;
}

p#lucediurna  {
    padding-right: 0.5em;
    text-align: right;
    font-size: small;
    font-style: italic;
}

/* projects */

div.project {
    position: relative;
    margin-bottom: 1em;
    border-top: solid  1px gray;
    border-left: solid  1px gray;
    /* min-width: 630px; */
}

div.project a {
    color: #fff;
}

div.project-descr {
    position: absolute;
    right: 0px;
    top: 1px;
    z-index: 1;
}

div.project-descr p {
    margin: 0px;
    text-align: right;
    line-height: 1.3;
    font-size: large;
}

div.project-descr span {
    background: #555;
    color: white;
}

div.project-descr a.ref {
    color: inherit;
    background: inherit;
    text-decoration: none;
}

div.project-descr a.ref:hover {
    color: inherit;
    background: inherit;
    text-decoration: underline;
}

div.project-descr.ubu span {
    background: #de4814;
}

div.project-descr.ubu a.ref {
    text-decoration: underline;
}

div.project-descr.eutaxia span {
    background: #8595ac;
}

div.project-descr.pypy span {
    background: #fff;
    color: rgb(51,153,187);
}

/* grid & margins */

div#left {
    grid-area: left;
    margin-left: 2ex;
    margin-right: 1ex;
    font-size: medium;
}

div#right {
    grid-area: right;
    margin-left: 2ex;
    font-size: medium;
}

div#page {
    display: grid;
    grid-template-areas:
        "banner banner"
        "left right";
    grid-template-columns: auto minmax(200px, 1fr);
}

@media (max-width: 799px) {
div#page {
    display: grid;
    grid-template-areas:
        "banner"
        "left"
        "footer";
    grid-template-columns: auto;
}

    div#right {
      grid-area: footer;
    }

    .small-remove {
        display: none;
    }
}