:root {
    --primary-color: black;
    --accent-color: #8fffe1;
    --text-color: white;
    --text-colorinverse: black;
    --primary-colorinverse: white
}

:root {
    --base-size: 2.5vw; /* Base size to scale the arrow and related dimensions */
    --font-size: calc(var(--base-size) * 4); /* Text font size, 2x base size */
    --arrow-length: calc(var(--base-size) * 8); /* Length of the arrow shaft */
    --arrow-thickness: calc(var(--base-size) * 0.3); /* Thickness of the arrow shaft */
    --arrow-head-width: calc(var(--base-size) * 1.6); /* Width of the arrowhead */
    --arrow-head-height: calc(var(--base-size) * 1.0); /* Height of the arrowhead */
    --margin-between: calc(var(--base-size) * 1); /* Margin between text and arrows */
    --hover-shaft-expand: calc(var(--base-size) * 8); /* Length of the left shaft on hover */
    --margin-top: calc(var(--base-size) * 5); /* Top margin of the entire section */
}

@font-face {
    font-family: 'Fontb';
    src: url('../fonts/soehne-web-halbfett.f7dddd91.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Fonts';
    src: url('../fonts/soehne-web-leicht.942ceda1.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Fontc';
    src: url('../fonts/soehne-schmal-web-fett-kursiv.c0115879.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
@keyframes float {
    0% {
        transform: translateX(0) translateY(0) rotate(var(--initial-rotate));
    }
    25% {
        transform: translateX(0.8vw) translateY(0.2vw) rotate(calc(var(--initial-rotate) - 5deg));
    }
    50% {
        transform: translateX(0) translateY(0.8vw) rotate(var(--initial-rotate));
    }
    75% {
        transform: translateX(-0.8vw) translateY(0.2vw) rotate(calc(var(--initial-rotate) + 5deg));
    }
    100% {
        transform: translateX(0) translateY(0) rotate(var(--initial-rotate));
    }
}
body {
    margin: 0vw;
    font-family: 'Fonts';
    background-color: var(--primary-color);
}

nav {
    font-family: 'Fontc';
    width: 100%;
    background-color: var(--primary-color);
    display: flex;
    align-items: center;
   
}

nav a {
    color: var(--text-color);
    text-decoration: none;
    padding: 0vw 3vw;
}

nav .name {
    font-size: 3vw;
    font-weight: 400;
    transition: transform 0.3s ease, color 0.2s ease; /* Smooth transition */
}

nav .about {
    font-size: 2vw;
    font-weight: 400;
    margin-left: auto;
    transition: transform 0.3s ease, color 0.2s ease; /* Smooth transition */
}

nav .contact {
    font-size: 2vw;
    font-weight: 400;
    transition: transform 0.3s ease, color 0.2s ease; /* Smooth transition */
}

nav .Blog {
    font-size: 2vw;
    font-weight: 400;
    transition: transform 0.3s ease, color 0.2s ease; /* Smooth transition */
}

nav .Work {
    font-size: 2vw;
    font-weight: 400;
    transition: transform 0.3s ease, color 0.2s ease; /* Smooth transition */
}

nav .Work:hover,
nav .Blog:hover,
nav .about:hover,
nav .contact:hover {
    color: var(--accent-color);
    transform: translateY(-0.2vw);

}
nav .name:hover {
    color: var(--accent-color);
    transform: translateY(-0.2vw);
}

.block {
    position: relative;
    color: var(--text-color);
    display: flex;
    justify-content: center; /* Center the content */
    align-items: center; /* Center the content */
    text-align: center;
    border-radius: 2vw;
    padding-bottom: 10vh; /* Add padding bottom to avoid content overflow */
    min-height: 20vh;
    flex-wrap: wrap;
}

.block1 {
    background-color: var(--primary-color);
    border-radius: 0vw;
    padding-top: 2vw;
    
}

.block1 .content {
    width: 100%;
    display: flex;
    align-items: center; /* Align content to the top */
    justify-content: center; /* Align content to the left */
    flex-direction: column;
    nav a {
    color: var(--text-color);
    text-decoration: none;
  
}
}

.block1 .profile-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    width: 100%; /* Ensure it takes the full width */
    
    
}

.block1 .profile-image {
    height: 30vw;
    margin-left: 2.5vw;
    border-radius: 1vw;
    margin-right: 5vw; /* Adjust the margin as needed */
    position: relative;
}

.block1 .header-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center align */
    width: 100%; /* Full width to center the text */
    text-align: center; /* Center align the text */
}
.block1 .header-container div{
    width: 60vw;

}

.rectangle {
    width: 100%; /* Adjust width as needed */
    height: 2vw; /* Adjust height as needed */
    background-color: var(--accent-color); /* Use CSS variable for dynamic color */
    border-radius: 5vw; /* Adjust for desired roundness */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.5vw auto; /* Center horizontally with margin */
}



.block1 h1 {
    font-size: 5vw;
    font-family: 'Fontb'; /* Use Fontb for the header */
    margin: auto;
    text-align: center; /* Center align the text */
}

.block1 .bottom-text {
    font-size: 1.5vw;
    font-family: 'Fonts';
    text-align: right; /* Center align the text */
    margin-top: 3vw;
    margin-left: 25vw; 
    padding-bottom: 4vw;
    padding-right: 2vw;
}

.floating-container .floating-text {
    position: absolute;
    font-size: 3vw;
    font-family: 'FontB';
    transition: color 0.3s ease;
    animation: float 5s infinite ease-in-out;
    text-decoration: none;
    cursor: default;
}

.floating-container .floating-text:hover {
    color: var(--accent-color);
}

/* Specific positions for floating text */
.block1 .text1 {
    top: 0vw;
    right: 60vw;
    --initial-rotate: -10deg;
}

.block1 .text2 {
    top: -1vw;
    right: 10vw;
    --initial-rotate: 10deg;
}

.block1 .text3 {
    top: 2vw;
    right: 40vw;
    --initial-rotate: -5deg;
}

.block1 .text4 {
    top: 25vw;
    right: 10vw;
    --initial-rotate: -25deg;
}

.block1 .text5 {
    top: 23vw;
    right: 40vw;
    --initial-rotate: 20deg;
}

.block1 .text6 {
    top: 22vw;
    right: 60vw;
    --initial-rotate: 4deg;
}

.block2 {
    background-color: var(--accent-color);
    padding: 10vh 5vw;
    margin-top: -4vw;
}

.block2 .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align content to the left */
}



.block2 .portfolio-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2vw;
}
.block2 .block-header {
    text-align: left;
    font-family: 'Fontb';
    color: var(--text-colorinverse);
    font-size: 11vw;
    width: calc(50% - 2vw); /* Two items per row */
}

.block2 .portfolio-box {
    background-color: var(--primary-color);
    border-radius: 2vw 2vw;
    width: calc(50% - 2vw); /* Two items per row */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 1vw;
    text-decoration: none; /* Remove underline from links */
    color: inherit; /* Inherit text color */
    transition: transform 0.3s ease, background-color 0.3s ease; /* Smooth transition */
}
.block2 .portfolio-box:hover {
    transform: translateY(-1vw); /* Lift the box on hover */
    background-color: var(--primary-colorinverse); /* Optional: Change background on hover */
    .portfolio-text{
        color: var(--text-colorinverse);
        
    }
}

.block2 .portfolio-text {
    font-family: 'fontc';
    color: var(--text-color);
    text-align: center;
    justify-content: center;
    margin-bottom: 1vw;
    margin-top: 1vw;
    transition: transform 0.3s ease, background-color 0.3s ease; /* Smooth transition */
}

.block2 .portfolio-inner {
    width: 100%;
    height: 80%;
    overflow: hidden;
    max-height: 30vw;
    min-height: 30vw;
    border-radius: 2vw 2vw 0 0;
}

.block2 .portfolio-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.block2 .portfolio-text {
    font-size: 2vw;
    text-align: center;
}

.block3 {
    background-color: var(--primary-color);
    padding: 10vw 5vw;
    border-radius: 2vw 2vw 0 0;
    margin-top: 5vh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.block3 .block-header {
    font-family: 'Fontb';
    font-size: 8vw;
    margin-bottom: 2vh;
}

.block3 .block-subheader {
    font-family: 'Fontb';
    font-size: 4vw;
    
}

.block3 .block-text {
    font-family: 'Fonts';
    font-size: 2vw;
    margin-bottom: 5vh;
    max-width: 70%;
}

.get-in-touch {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-top: var(--margin-top);
    box-sizing: border-box;
}

.animated-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-decoration-line: none;
    color: var(--text-color);
    font-size: var(--font-size);
    transition: color 0.2s;
}


.animated-arrow:hover {
    color: var(--accent-color);
}

.animated-arrow .main {
    display: flex;
    align-items: center;
    transition: transform 0.2s;
    max-width: 100%; /* Scale text and arrow layout */
}

.animated-arrow .text {
    margin: 0 var(--margin-between);
    line-height: 1; /* Prevent vertical alignment shifts */
    vertical-align: middle;
    font-family: Fontc;
    white-space: nowrap; /* Prevent wrapping issues */
}

.shaft {
    display: block;
    width: 0;
    height: var(--arrow-thickness);
    background-color: var(--text-color);
    transition: width 0.2s, transform 0.2s;
}

.shaft.-left {
    transform: translateX(-100%);
    position: relative;
}
.shaft.-left::before {
    content: '';
    display: block;
    width: calc(var(--base-size) * 1); /* Size of the square */
    height: calc(var(--base-size) * 1); /* Size of the square */
    background-color: var(--text-color);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-100%, -50%); /* Position square at the start of the shaft */
    opacity: 0; /* Hide initially */
    transition: opacity 0.2s, transform 0.2s; /* Smooth appearance */
}


.the-arrow {
    display: flex;
    align-items: center;
    transition: opacity 0.2s;
    white-space: nowrap; /* Prevent wrapping */
}

.the-arrow .shaft {
    width: var(--arrow-length);
    height: var(--arrow-thickness);
    background-color: var(--text-color);
}

.the-arrow .arrow-head {
    width: 0;
    height: 0;
    border-top: var(--arrow-head-height) solid transparent;
    border-bottom: var(--arrow-head-height) solid transparent;
    border-left: var(--arrow-head-width) solid var(--text-color);
}

.animated-arrow:hover .shaft.-left {
    width: var(--hover-shaft-expand);
    transform: translateX(0);
    background-color: var(--accent-color);
}
.animated-arrow:hover .shaft.-left::before {
    opacity: 1; /* Show on hover */
    background-color: var(--accent-color);
    transform: translate(0, -50%); /* Move square into position */
}

.animated-arrow:hover .main {
    transform: translateX(var(--text-shift)); /* Adjust as needed */
}

.animated-arrow:hover .the-arrow {
    opacity: 0;
}

/* Ensure arrow shaft and head alignment */
.the-arrow .shaft {
    position: relative;
}

.the-arrow .arrow-head {
    position: relative;
    top: 0;
    left: 0;
}