body {
    background-color: #F5F5DC;
  }
  
.main {
    margin: auto;
    width: 60%;
    padding: 10px;
    
}
  
.kasten {
    padding-bottom: 50;
}

.coverphoto{
    padding-right: 50px; 
}

@font-face{
    font-family: Myfont-Regular; /* Define the custom font name */
    src: url(/assets/Myfont-Regular.ttf); /* Define where the font can be downloaded */
    font-display: fallback; /* Define how the browser behaves during download */

}



.ueberschrift{
    font-family: monospace;
    font-size: 20px;
    padding-left: 10px;
    color: darkgreen;
    padding-bottom: 0px;
}

.handwriting-title{
    font-family: Myfont-Regular !important;
    font-size: 60px;
    padding-left: 10px;
    color: darkgreen;
    
}

.monospace{
    font-family: monospace;
    padding-top: 0px;
    padding-left: 10px;
    color: darkgreen;
}

a:link {
  color: darkgreen;
  background-color: none;
  text-decoration: none;
}

a:visited {
    color: darkgreen;
}

a:hover, a:active {
  color: red;
}

a.logo{
    outline-width: 1px;
    outline-style: solid;
    padding-left: 6px;
    border-radius: 10px;
    padding-top: -10px;
    width: 113; 
    font-family: monospace;
    color: darkgreen;
    float: left;
    margin: 10px;  
    text-decoration: none; 
}


.parent-section{
    display: flex;
    /*this section is allowed to have to covers in php file*/
}

.center{
  display: flex;
  justify-content: center;
}

.center2{
    margin-left: 270px;
}

/*links im footer:*/

a.maillink{
    outline-width: 1px;
    outline-style: solid;
    padding-left: 6px;
    border-radius: 10px;
    width: 133px; 
    font-family: monospace;
    color: darkgreen;
    float: left;
    margin: 10px; 
    margin-left: 0px;
    text-decoration: none; 
}

a.maillink-highlight{
    outline-width: 1px;
    outline-style: solid;
    padding-left: 6px;
    border-radius: 10px;
    width: 106px; 
    font-family: monospace;
    color: white;
    float: left;
    margin: 10px; 
    margin-left: 10px;
    text-decoration: none; 
    background-color: red;
}


a.instalink{
    outline-width: 1px;
    outline-style: solid;
    padding-left: 6px;
    border-radius: 10px;
    width: 47px; 
    font-family: monospace;
    color: darkgreen;
    float: left;
    margin: 10px; 
    text-decoration: none; 
}

a.linkedinlink{
    outline-width: 1px;
    outline-style: solid;
    padding-left: 6px;
    border-radius: 10px;
    width: 70px; 
    font-family: monospace;
    color: darkgreen;
    float: left;
    margin: 10px; 
    text-decoration: none; 
}

.year{
    outline-width: 1px;
    padding-left: 6px;
    border-radius: 10px;
    width: 150px; 
    font-family: monospace;
    color: darkgreen;
    float: left;
    margin: 10px; 
    text-decoration: none; 

}

/*categories auf den Unterseiten:*/

p.outline-year {
    outline-style: solid;
    outline-width: 1px;
    padding-left: 6px;
    border-radius: 10px;
    width: 39px; 
    font-family: monospace;
    color: darkgreen;
    float: left;
    margin: 10px; 
}

p.outline-years {
    outline-style: solid;
    outline-width: 1px;
    padding-left: 6px;
    border-radius: 10px;
    width: 91px; 
    font-family: monospace;
    color: darkgreen;
    float: left;
    margin: 10px; 
}

p.outline-category {
    outline-style: solid;
    outline-width: 1px;
    padding-left: 6px;
    border-radius: 10px;
    width: 75px; 
    font-family: monospace;
    color: darkgreen;
    float: left;
    margin: 10px; 
}

p.outline-categoryeditorial {
    outline-style: solid;
    outline-width: 1px;
    padding-left: 6px;
    border-radius: 10px;
    width: 77px; 
    font-family: monospace;
    color: darkgreen;
    float: left;
    margin: 10px; 
}

p.outline-categoryspacedesign {
    outline-style: solid;
    outline-width: 1px;
    padding-left: 6px;
    border-radius: 10px;
    width: 100; 
    font-family: monospace;
    color: darkgreen;
    float: left;
    margin: 10px; 
}

p.outline-categorykünstlerischeforschung {
    outline-style: solid;
    outline-width: 1px;
    padding-left: 6px;
    border-radius: 10px;
    width: 186; 
    font-family: monospace;
    color: darkgreen;
    float: left;
    margin: 10px; 
}

p.outline-categorycorporatedesign {
    outline-style: solid;
    outline-width: 1px;
    padding-left: 6px;
    border-radius: 10px;
    width: 130px; 
    font-family: monospace;
    color: darkgreen;
    float: left;
    margin: 10px; 
}


p.outline-categoryprinting{
    outline-style: solid;
    outline-width: 1px;
    padding-left: 6px;
    border-radius: 10px;
    width: 68px; 
    font-family: monospace;
    color: darkgreen;
    float: left;
    margin: 10px; 
}

p.outline-categorywebdesign{
    outline-style: solid;
    outline-width: 1px;
    padding-left: 6px;
    border-radius: 10px;
    width: 83px; 
    font-family: monospace;
    color: darkgreen;
    float: left;
    margin: 10px; 
}

p.outline-collabhochschule {
    outline-style: solid;
    outline-width: 1px;
    padding-left: 6px;
    border-radius: 10px;
    width: 155px; 
    font-family: monospace;
    color: darkgreen;
    float: left;
    margin: 10px; 
}

p.outline-collabhochschulefakd {
    outline-style: solid;
    outline-width: 1px;
    padding-left: 6px;
    border-radius: 10px;
    width: 318px; 
    font-family: monospace;
    color: darkgreen;
    float: left;
    margin: 10px; 
}

p.outline-collabhsmafakm {
    outline-style: solid;
    outline-width: 1px;
    padding-left: 6px;
    border-radius: 10px;
    width: 335px; 
    font-family: monospace;
    color: darkgreen;
    float: left;
    margin: 10px; 
}

p.outline-collabwerkbund {
    outline-style: solid;
    outline-width: 1px;
    padding-left: 6px;
    border-radius: 10px;
    width: 246px; 
    font-family: monospace;
    color: darkgreen;
    float: left;
    margin: 10px; 
}

p.outline-collabkunsthalle {
    outline-style: solid;
    outline-width: 1px;
    padding-left: 6px;
    border-radius: 10px;
    width: 155px; 
    font-family: monospace;
    color: darkgreen;
    float: left;
    margin: 10px; 
}

p.outline-collabk4b{
    outline-style: solid;
    outline-width: 1px;
    padding-left: 6px;
    border-radius: 10px;
    width: 75px; 
    font-family: monospace;
    color: darkgreen;
    float: left;
    margin: 10px; 
}

p.outline-collabDWDS{
    outline-style: solid;
    outline-width: 1px;
    padding-left: 6px;
    border-radius: 10px;
    width: 208px; 
    font-family: monospace;
    color: darkgreen;
    float: left;
    margin: 10px; 
}

p.outline-collabLAGI{
    outline-style: solid;
    outline-width: 1px;
    padding-left: 6px;
    border-radius: 10px;
    width: 53px; 
    font-family: monospace;
    color: darkgreen;
    float: left;
    margin: 10px; 
}

p.outline-categoryuxuidesign{
    outline-style: solid;
    outline-width: 1px;
    padding-left: 6px;
    border-radius: 10px;
    width: 114.5px; 
    font-family: monospace;
    color: darkgreen;
    float: left;
    margin: 10px; 
}

p.outline-collabjohndeere{
    outline-style: solid;
    outline-width: 1px;
    padding-left: 6px;
    border-radius: 10px;
    width: 84px; 
    font-family: monospace;
    color: darkgreen;
    float: left;
    margin: 10px; 
}

p.outline-categoryfilm{
    outline-style: solid;
    outline-width: 1px;
    padding-left: 6px;
    border-radius: 10px;
    width: 36px; 
    font-family: monospace;
    color: darkgreen;
    float: left;
    margin: 10px; 
}


p.outline-categoryphoto{
    outline-style: solid;
    outline-width: 1px;
    padding-left: 6px;
    border-radius: 10px;
    width: 90px; 
    font-family: monospace;
    color: darkgreen;
    float: left;
    margin: 10px; 
}


p.outline-categorybrand{
    outline-style: solid;
    outline-width: 1px;
    padding-left: 6px;
    border-radius: 10px;
    width: 100px; 
    font-family: monospace;
    color: darkgreen;
    float: left;
    margin: 10px; 
}

p.outline-collabsunova{
    outline-style: solid;
    outline-width: 1px;
    padding-left: 6px;
    border-radius: 10px;
    width: 52px;
    font-family: monospace;
    color: darkgreen;
    float: left;
    margin: 10px; 
}

p.outline-collabsuns{
    outline-style: solid;
    outline-width: 1px;
    padding-left: 6px;
    border-radius: 10px;
    width: 37px;
    font-family: monospace;
    color: darkgreen;
    float: left;
    margin: 10px; 
}

.outline-nextproject{
    outline-style: solid;
    outline-width: 1px;
    padding-left: 6px;
    border-radius: 10px;
    width: 102px;
    font-family: monospace;
    color: darkgreen;
    float: left;
    margin: 10px; 
}


/*Bilder auf Unterseiten*/

.bigpicture{
    padding: 10px; 
    display: block; /*so that I can use margin, make block element first bc margin doesnt work on inline element (img ist inline)*/
    margin: auto; /*center image horizontally*/
}

.image-onecolumn{
    width: 840px;
}



#left{
  float: left;
  border: 1px dotted black;
  margin: 0px 0px 15px 20px;}

#right{
    display: flex;
    float: right;
    margin-left: 15px; 
    margin-top: 15px;
}

#middle{
    text-align: center;
    margin-right: 150px;
}

#width560{
    width:560px;
    display: inline-block;
    vertical-align: top;
}

#width420{
    width: 420px;
    display: inline-block;
    vertical-align: top;
}

#width280{
    width:280px;
    display: inline-block;
    vertical-align: top;
}

.highlight{
    background-color: orange; 
}

.marginleft{
    margin-left:15px;
}

/*Bild und Text nebeneinander*/
.imageflex { display: flex; }
#imageflexcontent { margin-left: 5px; margin-top: 0; }