body{
    margin:0;
}


h1 {
    font-family: VT323 ;
    color: orangered;
    text-align: center;
    font-size: 120px;
    font-weight: 500;
    margin-bottom: 20px;
    margin-top: 20px;
    border-top:2px solid orangered;
    border-left:2px solid orangered;
    border-right:2px solid orangered;
    border-radius: 50%;
}

.hero{
    background-image: url("Bilder/background.jpg")
}

.ueberschrift {
    display: flex;
    color: orangered;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding-top: 30px;
}

.firstwebsite {
    color: orangered;
    font-family: Cormorant;
    font-size: 33px;
    align-items: center;
    justify-content: center;
    gap:20px;
    padding-bottom:30px;
    display:flex;
}

.firstwebsite::before,
.firstwebsite::after {
    content:"";
    border-top: 2px solid orangered;
    width:57px;
}

.ueberschrift::before,
.ueberschrift::after {
    content:"";
    border-top: 2px solid orangered;
    flex:1;
}

.Arbeiten {
    font-family: Cormorant;
    font-size: 33px;
    color: black;
    align-items: center;
    justify-content: center;
    gap:20px;
    margin-bottom: 30px; 
    display:flex;
}

.Arbeiten::before,
.Arbeiten::after{
    content:"";
    border-top: 2px solid black;
   width:57px;
}



.Navigation {
    font-family: Cormorant;
    font-weight: 550;
    font-size: 18px;
    display:flex;
    justify-content: center;
    border-bottom: 2px solid orangered;
    border-top: 2px solid orangered;
    padding:10px;
    gap: 35px;
    letter-spacing: 2px;
}

.Navigation a {
    color: orangered;
}


.profilbereich img{
    border-radius: 50%;
    border: 2px solid black;
    padding: 5px;
}

.profilbereich{
    display:flex;
    flex-wrap: wrap;
    justify-content: center; 
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid black;
    border-top:2px solid black;
    background-color: orange;
    gap:1px;
}

.bild-container{
    position: relative;
    width: 312px;
    height:312x;
    
}

.bild-container svg {
    position: absolute;
    inset: 0;
    width: 312px;
    height:312x;
    overflow: visible;
}

textPath{
    font-family:VT323;
    font-size: 30px;
}


.intro{
    font-family: VT323;
    margin-left: 16px;
    margin-top: 20px;
    font-size: 22px;
    max-width: 306px;
}   


.welcomeblog{
    font-size: 32px;
}

.Arbeiten{
    margin-top: 50px;
}


.Titelbilder-container{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40px;
    gap:20px;
    justify-content: center;
    align-items: center;
}

.Titelbilder{
    border-radius: 20% ;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.text{
    text-align: center;
    font-family: VT323;
    font-size: 20px;
}

.contact{
    font-family:Cormorant;
    padding-top: 10px;
    border-top: 2px solid black;
    text-align: center;
}

.contact p {
    margin-top: 2px;
    margin-bottom: 2px;
}


/*Extras für verlinkte html Dateien*/

.intro2{
    font-family: VT323;
    margin-left: 16px;
    margin-top: 7px;
    font-size: 22px;
    max-width: 306px;
}   

.illusobdachlose{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap:20px;
    padding-top: 30px; 
    padding-bottom: 30px;
    background-color: black;
}

.illusobdachlose img {
    border-radius: 10%
}

.oueberschrift{
    text-align: center;
    font-family:  Cormorant;
    font-size: 30px;
    max-width:600px;
    margin: 0 auto;
    padding-bottom: 10px;
    padding-top: 10px;
    margin-top: 30px;
    margin-bottom: 10px;
    border-bottom: 2px solid black;
    border-top: 2px solid black;
}

.oerklaerung{ 
    text-align: center;
    max-width:600px;
    margin: 0 auto;
    font-family:VT323;
    font-size: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    margin-top: 10px;
    margin-bottom: 20px;
}

.Titelbilder-container2{
    display: flex;
    justify-content: flex-end;
    gap:30px;
    padding-bottom: 10px;
    text-align: center;
    padding-right: 20px;
    padding-top: 10px;
    margin-bottom: 20px;
    margin-top: 10px;
    border-top: 2px solid black;
    border-bottom:2px solid black;
    font-family: VT323;
    font-size: 19px;
    background-color: orange;
}

.text3{
    max-width: 100px;
}

.Titelbilder-container3{
    display: flex;
    gap:30px;
    padding-bottom: 10px;
    text-align: center;
    padding-right: 20px;
    padding-left:20px;
    padding-top: 10px;
    margin-bottom: 20px;
    margin-top: 10px;
    border-top: 2px solid black;
    border-bottom:2px solid black;
    font-family: VT323;
    font-size: 19px;
    background-color: orange;
}

.text22{
    max-width:100px;
}

.TB333{
    margin-left:auto;
}

.Titelbilder-container4{
    display: flex;
    gap:30px;
    padding-bottom: 10px;
    text-align: center;
    padding-right: 20px;
    padding-left:20px;
    padding-top: 10px;
    margin-bottom: 20px;
    margin-top: 10px;
    border-top: 2px solid black;
    border-bottom:2px solid black;
    font-family: VT323;
    font-size: 19px;
    background-color: orange;
}