/* ==== allgemeine Regeln am Anfang ==== */ 

* {
    box-sizing: border-box;
}

@font-face {
    font-family: 'oracle';
    src: url(/f/Orc/ABCOracle-Bold-Trial.woff) format(woff);
    src: url(/f/Orc/ABCOracle-BoldItalic-Trial.woff) format(woff); 
    src: url(/f/Orc/ABCOracle-Book-Trial.woff) format(woff);
    src: url(/f/Orc/ABCOracle-BookItalic-Trial.woff);
    src: url(/f/Orc/ABCOracle-Light-Trial.woff2) format(woff);
    src: url(/f/Orc/ABCOracle-Regular-Trial.woff2) format(woff);
    src: url(/f/Orc/ABCOracle-RegularItalic-Trial.woff) format(woff); 
    src: url(/f/Orc/ABCOracle-Thin-Trial.woff2) format(woff); 

}

body { font-family: Helvetica, sans-serif;
    margin: 2px;
    padding: 2px;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: black; 
    padding: 10px 20px;
}
/* ==== H1 Regeln  ==== */  

h1 { font-family: Helvetica, sans-serif;
    font-size: 25px;
    text-shadow:  0 0 12px chartreuse;
    margin: 0;
}

h2 { font-size: 18px;
    margin-left: 20px; 
    margin-top: 12px;
}




 /* ==== Nav Regeln  ==== */  

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
}

nav ul li {
    display: inline;
    margin-left: 20px;
}

nav ul li:first-child {
    margin-left: 0;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
}

/* ==== a:link Regeln  ==== */  

a:link { color: black;
    text-decoration: none;
}
     
a:visited { color: black;
     }
     
a:hover,
a:active
a:focus { color: chartreuse;
            font-style: italic;
}

.content { flex: 1;
    font-size: 18px;
    margin-top: 12px;
    margin-left: 20px;
    margin-right: 20px;
    font-weight: bold;
}

.beschreibung { 
    font-size: 13px;
    grid-column-start: 2;
    grid-row: 5;
    margin-left: 20px;
    margin-top: 20px;
}

/* ==== Für Container  ==== */ 

.container { 
    margin-top: 2;
    margin-left: 0;
}

/* ==== Styling für Projektliste ==== */

.project-list {
    margin: 20px;
}

.project-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 5px;  /* Anpassung des Abstands innerhalb der Items */
    border-top: 0.3px solid rgb(0, 0, 0);
    border-bottom: 0.3px solid rgb(0, 0, 0);
    margin-bottom: 0px;  /* Anpassung des Abstands zwischen den Items */
    transition: transform 0.3s, background-color 0.3s, font-size 0.6s, height 0.3s;
    font-size: 20px;
}

.project-item:hover {
    background-color: chartreuse;
    font-weight: bold;
    height: 100px;  /* Erhöht die Höhe der Box beim Hover-Effekt */

}

.project-no {
    margin-right: 200px;  /* Anpassung des Abstands zwischen der Nummer und dem Titel */
}

.project-title {
    flex: 1;
    text-align: left;
}

.project-date {
    margin-left: 0;
    margin-right: 0;
}