body
{
margin: 0;
padding: 0;
background-color: black;
font-family: Arial;
}

.nav
{
    display: flex;
    height: 100px;
    width: 100%;
    background: black;
    border-bottom: white solid 0.5px;
}


 ul li
{
    display: inline-block;
    margin: 15px 10px 15px 30px ;
}


 ul li a
 {
   color: white;
   text-decoration: none;
   font-size: 30px;
   font-weight: 900;
   
}

 ul li a:hover
{
    color: GreenYellow;
    transform: scale(1.1);
    transition: all 0.5s;
    padding: 30px 15px;
}

 ul li a.active
{
    font-weight: 500;
    font-style: italic;
}


.hallo
{
 font-size: 40px;
 color: GreenYellow;
 margin: 250px 0px 0 100px;
}

span
{
font-size: 60px;
font-weight: bolder;
color: white;
}

.name
{
font-size: 60px;
font-weight: bolder;
color: greenYellow;
margin: 10px 0px 0 100px;
}

.free
{
font-size: 30px;
font-weight: bolder;
color: white;
margin: 10px 0px 0 100px;
display: inline-block;
}
.content2
{
 display: inline-block;
}
img
{
width: 400px;
height: 480px;
margin: 100px 100px ;
position: absolute;
border: 0.5px solid black;
border-radius: 25px;
}

footer
{
    color: greenyellow;
    font-size: 20px;
    letter-spacing: 1px;
    text-align: center;
    margin: 220px 0 0;

    
}

@media (max-width: 500px)
{
    .nav
    {
        border-bottom: solid 0.5px white;  
    }
    
    .logo
     {
        font-size: 20px;
        margin-right:  120px;
     }
    
     
     ul
    {
        position: fixed; 
        top: 80px;
        left: -200%; 
        background: black ;
        height: 200vh;
        width: 100%;
        text-align: center;
        display: block;
        transition: all 0.3s ease;
    }
    #click:checked~ul
    {
        left: 0;
    }
    ul li
    {
        width: 100%;
        margin: 45px 0 0;
    }
     ul li a
     {
        width: 100%;
        margin-left: -100%;
        display: block;
        font-size: 32px;
        transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
     }
    #click:checked~ul li a
    {
        margin-left: 0px;
    }
     ul li a.active
    {
        background: none;
        color: greenyellow;
        font-size: 50px;
        font-weight: 600;
    }
    ul li a:hover
    {
        background: none;
        color: greenyellow;
        font-size: 40px;
        transition: 0.3s;
        transition-timing-function: ease-in-out;
    }
    
    .content
    {
        min-height: calc(100vh - 220px);
    }
    
.hallo
{
 font-size: 15px;
 color: GreenYellow;
 margin: 50px 0px 0 30px;
}

span
{
font-size: 20px;
font-weight: bolder;
color: white;
}

.name
{
font-size: 20px;
font-weight: bolder;
color: greenYellow;
margin: 10px 0px 0 30px;
}

.free
{
font-size: 20px;
font-weight: bolder;
color: white;
margin: 10px 0px 0 30px;
}

img
{
width: 250px;
height: 250px;
margin: 50px 40px 50px 70px ;
position: absolute;
border: 0.5px solid black;
border-radius: 125px;
display: block;
}
    
 footer
{
 margin-top: 150px;
 font-size: 10px;
 text-align: center;
 }
}