body {
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0px;
    background-color: #ffffff;
    color: rgb(36, 36, 36);
    display: flex;
    flex-direction: column;
    min-height: 99vh;
}


/*HEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADER*/


header {
    background-color: rgb(255, 255, 255);
    z-index: 1;
    position: sticky;
    top: 0px;
}

.wrapper {
    max-width: 75vw;
    padding: 0px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    margin-inline: auto;
    gap: 5vw;

}




.logo {
    display: inline-block;
    /* Set a fixed width/height so the background has a space to render */
    width: 5vw;
    min-width: 2.5rem;
    height: 4.5vw;
    padding: 0.5vw;
    margin-left: -8.9vw;
  
    /* Default logo (normal state) */
    background: url('/Pics/logo.svg') no-repeat center/contain;
  }
  
  .logo:hover {
    /* Change to black logo on hover */
    background: url('/Pics/logo\ black.svg') no-repeat center/contain;
  }


nav.bar {

    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;

}

.bar :hover a {
    background-color: #363636;
    color: rgb(255, 255, 255);
    transition: opacity 500ms ease;
}

.bar a {
    font-size: 1vw;
    text-decoration: none;
    font-weight: bold;
    border: 0.2vw solid #333;
    border-radius: 5vw;
    padding: 0.7vw;
    padding-left: 2vw;
    padding-right: 2vw;


}

.black {
    color: #ffffff;
    background-color: #363636;


}

.white {
    color: #363636;

}


/*MAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAINMAIN*/


main {
    max-width: 75vw;
    margin-inline: auto;
}

.hello {
    margin: 0;
    margin-top: 10vw;
}

.hello h1 {
    font-size: 4rem;
    margin: 0px;
}

.hello p {
    font-weight: 400;
    font-size: 2rem;
    margin: 0px;
    margin-bottom: 5vw;

}


.projects ul {
    padding: 0;
    list-style: none;
    display: grid;
    gap: 5vw;
    grid-template-columns: repeat(2, 1fr);
}

.projects a {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 0.2vw solid #333;
    border-radius: 2vw;
    overflow: clip;
}

.projects a:hover p {
    opacity: 1;
}

.projects a:hover img {
    filter: blur(20px);
}

.projects p {
    position: absolute;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 500ms ease;
    font-weight: 600;
    font-size: 1rem;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 5vw;
    padding: 0.7vw;
    padding-left: 2vw;
    padding-right: 2vw;
    width: 15vw;
    text-align: center;
}
 
.projects img {
    display: block;
    max-width: 100%;
    transition: filter 500ms ease;
}

h1 {
    color: #363636;
}

p {
    color: #363636;
}

img {
    max-width: 100%;
    height: auto;
}


/*FOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTER*/


footer {
    background-color: #ffffff;
    margin-top: auto;
    padding-bottom: 0.7vw;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: 1rem;
}

footer a {
    text-decoration: none;
    text-align: center;
    color: rgb(36, 36, 36);
    font-weight: bold;
}


/*CONTACTCONTACTCONTACTCONTACTCONTACTCONTACTCONTACTCONTACTCONTACTCONTACTCONTACTCONTACTCONTACTCONTACTCONTACTCONTACTCONTACTCONTACTCONTACTCONTACTCONTACTCONTACTCONTACTCONTACTCONTACTCONTACTCONTACTCONTACTCONTACT*/


.contact {
    font-size: 4rem;
    text-align: center;
}

.links :hover a {
    background-color: #363636;
    color: rgb(255, 255, 255);
    transition: opacity 500ms ease;
}

.links :hover li {
    background-color: #363636;
    color: rgb(255, 255, 255);
    transition: opacity 500ms ease;
}

.links {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.links li {
    width: 20vw;
    list-style: none;
    display: flex;
    justify-content: center;
}

.links a {
    font-weight: 600;
    font-size: 1.2rem;
    padding: 0.7vw;
    width: 100%;
    text-decoration: none;
    border: 0.2vw solid #333;
    color: rgb(36, 36, 36);
    border-radius: 5vw;
    margin: 1vw;
    text-align: center;
}

.bottom {
    background-color: #ffffff;
    margin-top: auto;
    padding-bottom: 0.7vw;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: 1rem;
}


/*WORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORKWORK*/


.jahr {
    text-align: center;
    font-size: 2rem;
    padding: 0;
    margin-top: 5vw;
    font-weight: 600;
}

.year h1 {
    text-align: center;
    font-size: 4rem;
}

.year h2 {
    padding: 0.5vw;
    border: #363636 0.2vw solid;
    border-radius: 5vw;
    margin-bottom: 5vw;
}

.galerie ul {
    padding: 0;
    list-style: none;
    display: grid;
    gap: 5vw;
    grid-template-columns: repeat(2, 1fr);
    margin: 0px;
    margin-bottom: 1vw;
}

.galerie a {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 0.2vw solid #333;
    border-radius: 2vw;
    overflow: clip;
}


.galerie p {
    position: absolute;
    margin: 0;
    font-weight: 600;
    font-size: 1rem;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 5vw;
    width: 15vw;
    text-align: center;
    padding: 0.7vw;
    padding-left: 2vw;
    padding-right: 2vw;
}


/*ABOUTABOUTABOUTABOUTABOUTABOUTABOUTABOUTABOUTABOUTABOUTABOUTABOUTABOUTABOUTABOUTABOUTABOUTABOUTABOUTABOUTABOUTABOUTABOUTABOUTABOUTABOUTABOUTABOUTABOUTABOUTABOUTABOUTABOUTABOUTABOUTABOUTABOUTABOUTABOUT*/


.about ul {
    padding: 0;
    list-style: none;
    display: grid;
    gap: 5vw;
    grid-template-columns: repeat(2, 1fr);
    width: 75vw;

}



.profilbild {
    padding: 0px;
    display: flex;
    justify-content: center;

    border: 0.2vw solid #333;
    border-radius: 2vw;
    overflow: clip;
    width: 35vw;
    height: 35vw;
}

.about h1 {

    font-weight: 600;
    font-size: 2.5rem;
}

.about p {
    font-size: 1.5rem;
}


/*IMPRESSUMIMPRESSUMIMPRESSUMIMPRESSUMIMPRESSUMIMPRESSUMIMPRESSUMIMPRESSUMIMPRESSUMIMPRESSUMIMPRESSUMIMPRESSUMIMPRESSUMIMPRESSUMIMPRESSUMIMPRESSUMIMPRESSUMIMPRESSUMIMPRESSUMIMPRESSUMIMPRESSUMIMPRESSUMIMPRESSUM*/


.impressum div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.impressum p {
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    width: 20vw;
    padding: 0.7vw;
    border: 0.2vw solid #333;
    border-radius: 5vw;
    margin: 1vw;
}

.data {
    font-size: 4rem;
    text-align: center;
    color: #363636;
}

.daten {
    text-align: left;
    font-size: 1rem;
    color: #363636;
}



/*WORKSINGLEWORKSINGLEWORKSINGLEWORKSINGLEWORKSINGLEWORKSINGLEWORKSINGLEWORKSINGLEWORKSINGLEWORKSINGLEWORKSINGLEWORKSINGLEWORKSINGLEWORKSINGLE*/


.single ul {
    padding: 0;
    list-style: none;
    display: grid;
    gap: 5vw;
    grid-template-columns: repeat(2, 1fr);
}

.projektbild {
    padding: 0px;
    display: flex;
    justify-content: center;
    position: relative;
    border: 0.2vw solid #333;
    border-radius: 2vw;
    overflow: clip;
    height: 35vw;
    width: 35vw;
}

.single h1 {
    font-weight: 600;
    font-size: 2.5rem;
}

.single p {
    font-size: 1.5rem;
}

.buttons {
    margin-top: 5vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.buttons a {
    padding: 0.7vw;
    border: 0.2vw solid #333;
    border-radius: 5vw;
    width: 10vw;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: #363636;

}

.buttons a:hover {
    background-color: #363636;
    color: rgb(255, 255, 255);
    transition: opacity 500ms ease;
}


/*BURGERBURGERBURGERBURGERBURGERBURGERBURGERBURGERBURGERBURGERBURGERBURGERBURGERBURGERBURGERBURGER*/


*,
*::after,
*::before {
    box-sizing: border-box;
}

.menu-button-container {
    position: relative;
    margin-left: auto;
    display: none;
}

.close-menu-button {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
}

header:target .close-menu-button {
    display: block;
}

.menu-button {
    display: block;
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
}

.menu-button::before,
.menu-button::after {
    content: '';
    display: block;
    width: 1.5rem;
    height: 0.125rem;
    position: absolute;
    top: calc(50% - 0.0625rem);
    left: 0.5rem;
    background-color: currentColor;
    transition: transform 350ms ease;
    color: #363636;
}

.wrapper .menu-button::before {
    transform: translateY(-0.25rem);
}

.wrapper .menu-button::after {
    transform: translateY(0.25rem);
}

header:target .wrapper .menu-button::before {
    transform: rotate(45deg);
}

header:target .wrapper .menu-button::after {
    transform: rotate(-45deg);
}

/*TEST*/

        .content {
            display: flex;
        }

        .gallery {
            padding: 0px;
            flex: 1;
            
            justify-content: center;
            position: relative;
            border: 0.2vw solid #333;
            border-radius: 2vw;
            overflow: clip;
            height: 35vw;
            width: 35vw;
        }


        .gallery img {
            width: 100%;
            display: none;
        }

        .gallery img.active {
            display: block;
        }
        .single content {
            width: 35vw;
            height: 35vw;
        }

        .text-content {
            flex: 1;
        }

        .buttons {
            margin-top: 20px;
        }

        .buttons a {
            margin-right: 10px;
        }
        .gallery button {
            position: absolute;
            top: 50%;
            width: 0;
            height: 0;
            border-style: solid;
            background: transparent;
            cursor: pointer;
            transform: translateY(-50%);
        }

        .gallery .prev {
            left: 10px;
            border-width: 10px 15px 10px 0;
            border-color: transparent black transparent transparent;
        }

        .gallery .next {
            right: 10px;
            border-width: 10px 0 10px 15px;
            border-color: transparent transparent transparent black;
        }