* {
    box-sizing: border-box;
  }  

body
{
    font-family: 'Courier', 'FreeMono', monospace;
    background-color:#FFFFFF;
}

div.outer
{
    margin: 0px;
    padding: 0px;
}
a
{
    font-size: 1em;
}

@media (orientation: landscape) {
    div.outer
    {
        max-width: 1024px;
    }
}

@media (orientation: portrait) {
    div.outer
    {
        width: 100%;
    }
}


div.content
{
    margin: 0px;
    padding: 0px;
}

h1.title
{
    font-size: 2.8em;
    margin-top: 28px;
    margin-bottom: 0px;
    text-decoration: underline red 2px;
}

h2
{
    margin-top: 1em;
    font-size: 1.5em;
    text-decoration: underline red 2px;
}

h3
{
    text-decoration: underline red 1px;
}

div.two_cols
{
    display: flex;
    justify-content: space-between;
    min-width: 100%;
    flex-wrap: wrap;
}

div.image
{
    overflow: hidden;
    background-size: cover;
}

div.two_cols div
{
    height: auto;
    display: inline-block;
    vertical-align: middle;
}

@media (orientation: landscape) {
    div.two_cols div
    {
        width: 48%;
        min-width: 380px;
    }
    div.image
    {
        height: 100%;
    }
}
@media (orientation: portrait) {
    div.two_cols div
    {
        max-width: 100%;
        height: auto;
    }
    div.image
    {
        width: 100%;
        min-height: 350px;
    }
}

#julian {
    background-image: url("img/portrait.png");
    background-position: bottom left;
}

#decoration {
    background-image: url("img/pcba_.jpg");
    background-position: top right;
}

@media (orientation: landscape) {
    div.one_col
    {
        max-width: 80%;
    }
}

@media (orientation: portrait) {
    div.one_col
    {
        width: 100%;
    }
}

div.text
{
    text-align: left;
    vertical-align: top;
}

#navi_and_links
{
    display: flex;
    justify-content: space-between;
    min-width: 100%;
    border-bottom: dashed grey 2px;
    padding-top: 10px;
    margin-bottom: 10px;
    align-content: space-between;
}

div.navi_and_links_elem div
{
    display: inline-block;
}

#links
{
    text-align: right;
}

#navi a:has(+a)
{
    padding-right: 10px;
}



a:link, a:visited {
    color:black;
    text-decoration:none;
    display:inline-block;
    padding:0px;
    margin:0px;
    outline:none;
    border:none;
}
a:hover, a:active, a:focus {
    color:black;
    background: linear-gradient(transparent,transparent 50%,#FF0000 0,#FF0000 85%,transparent 0);
}

a.big{
    font-size: 1.1em;
}

p a:link, a:visited{
    text-decoration: underline red solid 1px;
}


p a:hover{
    text-decoration: none;
}


#footer
{
    min-width: 100%;
    border-top: dashed grey 2px;
    text-align: right;
}

table
{
    text-align: left;
}