@charset "utf-8";
/* CSS Document */

body{
overflow-x: hidden!important;
background-image:url(ulrike_von_der_osten_3.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
background-color:#eff401;
margin-left: 0px;
margin-top:0px;
font-family: "Roboto", sans-serif;
font-weight: 100;
font-style: thin;
line-height: 1.4;  
height:100%;
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}



main{
display: flex;
flex-wrap: row;
margin: 175px 120px;
font-family: "Roboto", sans-serif;
font-weight: 100;
font-style: thin;
line-height: 1.4;
width:800px;  
height:100%;
}


figure{
position:relative;
left:20px;
margin-left: 32px;
margin-top:0px;
font-family: "Roboto", sans-serif;
font-weight: 100;
font-style: thin;
line-height: 1.4;  
height:50px;
width:300px;
}


a.blink {
 font-family: "Roboto", sans-serif, italic;
  font-weight: 100;
font-style: italic;
font-size:36px;
line-height: 1.2;
text-decoration:none;
color:#ffff00;
background-color:#000;
    animation-name: animation_blink;
    animation-timing-function: ease-in;
    animation-duration: 3s; 
    animation-iteration-count: infinite;            
}

@keyframes animation_blink {
    50% { opacity: 0.07; }
    100% { opacity: 1; } 
    0% { opacity: 1; }
   
}

a.blink:hover {
font-size:36px;
font-style: normal;
line-height: 1.2;
color:#FFF;
text-decoration:none;
background-color:#000;
}


nav{
position:relative;
left:-70px;
text-align:right;
margin-left:0px;
margin-right:3px;
margin-top:3px;
font-family: "Roboto", sans-serif;
font-weight: 100;
font-style: thin;
line-height: 1.4;
width:340px;  
height:150%;
}

ul, li {
margin-top:0px;
display:block;
margin:3px;
list-style-type:none;
}

a.main{
 font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: thin;
font-size:36px;
line-height: 1.2;
text-decoration:none;
color:#000;
}

a.main:link {
text-decoration:none;
font-size:36px;
line-height: 1.2;
color:#000;
}

a.main:visited {
text-decoration:none;
font-size:36px;
line-height: 1.2;
color:#000; }

a.main:hover {
font-size:36px;
line-height: 1.2;
color:#FFFFFF;
text-decoration:none;
background-color:#800040;
}

h1{
font-size: 36px;
line-height: 1.2;
font-weight:300;
color:#000;
position:relative;
top: -20px;
}




@media all and (max-width:600px) {

body{
// overflow-x: hidden!important;
// overflow-y: hidden!important;  
background-image:url(ulrike_von_der_osten_3.png);
background-repeat: no-repeat;
background-size: 100% auto;
background-color:#eff401; 
margin-left: 0px;
margin-top:0px;
font-family: "Roboto", sans-serif;
font-weight: 100;
font-style: thin;
line-height: 1.4;  
height:100%;
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}


main{
// overflow-x: hidden!important;
// overflow-y: hidden!important;
margin: 40px auto;
width: 100%;
height: 100%
box-sizing: border-box;
padding: 0px;
border: 0px;
line-height: 1.4em;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}

ul, li {
position:relative;
top:13px;
display:block;
margin:2px;
list-style-type:none;
}


figure{
position: relative;
top:-13px;
left: 45px;
margin-left: 0px;
margin-top:10px;
font-family: "Roboto", sans-serif;
font-weight: 100;
font-style: thin;
line-height: 1.4; 
height:150px;
// min-width: 350px;
// flex-basis: 320px; 
// flex: 10;
}


nav{
background-color:#ccc;
position:relative;
left:20px;
top:0px;
font-family: "Roboto", sans-serif;
font-weight: 100;
font-style: thin;
line-height: 1.4;  
height:10px;
}


a.main{
font-family: "Roboto", sans-serif;
font-weight: 100;
font-style: thin;
font-size:36px;
line-height: 1.2;
text-decoration:none;
color:#000;
}

a.main:link {
text-decoration:none;
font-size:36px;
line-height: 1.2;
color:#000;
}

a.main:visited {
text-decoration:none;
font-size:36px;
line-height: 1.2;
color:#000; 
}

a.main:hover {
font-size:36px;
line-height:1.2;
color:#FFFFFF;
text-decoration:none;
background-color:#800040;
}

h1{
font-size:36px;
line-height:1.2;
font-weight:350;
color:#000;
position:relative;
top:5px;
}


.blink {
 font-family: "Roboto", sans-serif, italic;
  font-weight: 100;
font-style: italic;
font-size:36px;
line-height: 1.2;
text-decoration:none;
color:#ffff00;
background-color:#000;
    animation-name: animation_blink;
    animation-timing-function: ease-in;
    animation-duration: 3s; 
    animation-iteration-count: infinite;            
}

@keyframes animation_blink {
    50% { opacity: 0.07; }
    100% { opacity: 1; } 
    0% { opacity: 1; }
   
}

a.blink:hover {
font-size:36px;
font-style: normal;
line-height: 1.2;
color:#FFF;
text-decoration:none;
background-color:#000;
}