/* ------------ ZENTRALES STYLESHEET -------------- */
/*                 ZUNAME VORNAME                   */
/* ------------------------------------------------ */
/*----------- Allgemeine Klassen-------*/
@import url(https://fonts.googleapis.com/css2?family=Kumar+One&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap);

.clearing{
  clear: both;
}
/* ------------ Allgemeine Formatierung -------------- */



*{
margin:0px;
padding:0px;
text-size-adjust: auto;

}


/* Schriften*/




/*----------- Allgemeine Klassen ------------------- */



/*-----------------Allgemeine Formatierung--------------*/

h3{
  font-weight: 900;
   font-size: 34px;
   color: #000;
   text-transform: uppercase;
   font-weight: normal;
   font-style: italic;
   transform: rotate(90deg);
   transform-origin: 0% 0%;
   white-space: nowrap; /* Verhindert Zeilenumbruch */
   text-align: center;
   vertical-align: center;
   margin: 0;
   padding: 0;
   position: relative;
   top:25px;
   left: 50px;}

h4{
    font-family: "Kumar One", serif;
    font-weight: 700;
    font-style: normal;;
    font-size: x-large;
    color:rgb(0, 0, 0);
    
}

  


/* ---------------------- BOXEN ----------------------- */
body{
  font-family: Arial,Calibri,sans-serif; 
  font-size:12px ;
  color: #585857;

  background-image:url(bali\ du\ aura.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;

  font-family: "Roboto", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}



header{
height: 50px;
display: flex;
justify-content: center;

}

#titel{
  height:700px ;
}

main{
padding:50px;
background-color:transparent;
display: flex;
 justify-content: space-between;
}


article img{
border-color: transparent;
width: 200px;
height: 150px;
box-shadow: #585857;
background-size: cover;


}
footer{
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 100px;
  margin-top: 500px;
  
}
article img:hover{
 /* rotate: 180deg;*/
  border-bottom: thick;
   
  
}
  #k{width: 250px;
  margin-right: 56%;}


  nav ul{
    margin-left: -25px;
    list-style-type: none;
    display:flex;
    float: right;
  }
nav a{
  display:block;
  background-color: #585857;
  color: #fff;
  margin: 5px;
  padding: 4px;
  border-left-width: 3.5px;
  text-decoration: none;
  text-transform: uppercase;
  
}


p{
  text-overflow: clip;
  text-decoration: solid;
  text-transform: uppercase;
  font-size: small;
  font-family: "Kumar One", serif;
  color:  rgb(29, 31, 33);
}
article{
 width: 250px;
 margin:20px;
 min-height: 200px;
 background-color: green;
}

#mia{
  margin:150px ;
  display: flex;
  margin-top: -10px;
  margin-bottom: -5px;
}

html{
  scrollbar-width: thin;
  scroll-behavior: smooth;
  scroll-snap-type: initial;
}

.image-container{
 border: 5px solid black; 
 padding: 10px; 
 display: inline-block;
 background-color: white; 
 text-align: center;
 background: rgba(245, 247, 245, 0.507);
 
}


.caption{
  margin-top: 10px;

  
}

.ueberschrift{
  width: 50px;
  position: relative;
}

.ueberschrift h3{
  font-weight: 900;
   font-size: 34px;
   color: #000;
   text-transform: uppercase;
   font-weight: normal;
   font-style: italic;
   transform: rotate(90deg);
   transform-origin: 0% 0%;
   white-space: nowrap; /* Verhindert Zeilenumbruch */
   text-align: center;
   vertical-align: center;
   margin: 0;
   padding: 0;
   position: relative;
   top:25px;
   left: 50px;
 }