: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 */
}


@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Press+Start+2P&display=swap');

@font-face {
    font-family: 'Fontb';
    src: url('../fonts/soehne-web-halbfett.f7dddd91.woff2') format('woff2');
    font-weight: normal;
    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: normal;
    font-style: normal;
}


body {
    margin: 0;
    font-family: 'Fonts';
    background-color: #69634c;
}

nav {
    font-family: 'Fontc';
    width: 100%;
    background-color: #69634c;
    display: flex;
    align-items: center;
   
}

nav a {
    color: white;
    text-decoration: none;
    padding: 0px 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: #8fffe1;
    transform: translateY(-0.2vw);

}
nav .name:hover {
    color: #8fffe1;
    transform: translateY(-0.2vw);
}
.block {
    position: relative;
    color: rgb(255, 255, 255);
    display: flex;
    justify-content: center; /* Center the content */
    align-items: top; /* Center the content */
    text-align: center;
    padding-bottom: 5vw; /* Add padding bottom to avoid content overflow */
    min-height: 100vh;
    flex-wrap: wrap;
}

.video-container {
    width: 100%;
    aspect-ratio: 16/9; /* Maintain the 16:9 aspect ratio */
    margin: 0 auto;
    overflow: hidden;

}

.video-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}



.block1 {
    background-color: #69634c;

}

.block1 .content {
    width: 100%;
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap into rows */
    align-items: flex-start; /* Align items to the top */
}

.block1 .mainheader {
    width: 100%;
    text-align: left;
    margin-left: 10vw;
    margin-right: 10vw;
    margin-bottom: 2vw; 
    margin-top: 10vw;/* Add bottom margin */
}

.mainheader h1 {
    font-family: 'Fonts';
    font-weight: lighter;
    font-size: 2vw;
    margin-bottom: 0vw;
}

.mainheader h2 {
    font-family: 'Fontc';
    font-weight: bolder;
    font-size: 5vw;
    margin-top: 0vw;
    color: #a2d04c;
}


.boxmain {
    
    margin-left: 10vw;
    margin-right: 13vw;
    font-size: 2vw;
    flex: 0 0 50vw; /* Responsive boxes taking up 70% width minus gap */
    text-align: left;
}


.boxrole {
    
    height: 30vw;
    flex: 0 0 25vw; /* Responsive boxes taking up 30% width minus gap */
}

.boxtyp {
    
    margin-left: 10vw;
    font-size: 2vw;
    flex: 0 0 30vw; /* Responsive boxes taking up 70% width minus gap */
   
}

.boxpal {
    
    font-size: 2vw;
    flex: 0 0 30vw;
    margin-left: 20vw;
    margin-bottom: 10vw;
}


.boxmain h2 {
    font-family: 'Fontc';
    margin-top: 0vw;
    color: #a2d04c;
}

.boxmain p {
    font-family: 'Fonts';
    font-weight: 100;
}



.palette {
    display: flex;
    flex-direction: column; /* Stack the elements vertically */
    align-items: left; /* Center align items */
    gap: 0.5vw;
    text-align: left;
    font-family: 'Fontc';
  
}

.palleterow{
    display: flex;
    flex-direction: row;
    align-items: left;
    margin-left: 1vw;

}

.color-block {
    width: 11vw;
    height: 6vw;
    margin-left: -1vw;
    border-radius: 3vw;
    background-color: #ffffff; /* Example color */
    stroke: #000000;
    stroke-width: 20px;
}
 .color1{
    background-color: #5f5120; 
 }
 .color2{
    
    background-color: #a2d04c; 
    margin-left: -5vw;
 }
 .color3{
    background-color: #b5b5b5; 
    margin-left: -5vw;
 }
 .color4{
    background-color: #252424; 
    margin-left: -5vw;
 }
.roles h2 {
    font-size: 2.5vw;
    font-family: 'FontC';
    font-weight: bolder;
    text-align: left;
    margin-left: 5vw;
    color: #ffffff;
 
}
.roles h3{
    font-size: 1vw;
    font-family: 'Fontb';
    font-weight: bolder;
    text-align: left;
    margin-left: 5vw;
}

.typography 
{
    color: #ffffff;
    font-family: 'Fontc';
    font-size: 5vw;
    
    text-align: left;
    margin: 0vw;
}
.typography  h2:nth-child(1)
{
    color: #ffffff;
    font-family: 'Fontc';
    font-size: 5vw;
    margin-top: 0vw;
    text-align: left;
    margin-bottom: 5vw;
}

.typography P:nth-child(2){
    font-size: 2vw;
    font-family: "Inter", sans-serif;
    text-align: left;
}
.typography :nth-child(3){
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 2vw;
}

.block2 {
    position: relative;
    padding: 0;
    border-radius: 0;
    background-color: black;
    background-size:cover ;
}
.block5 {
    position: relative;
    padding: 0;
    border-radius: 0;
    background: url('../img/DungeonScrapperHouse.PNG') no-repeat center center fixed;
    background-size:cover ;
}

.block3 {
    background-color: #69634c;
    padding-top: 2vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.block3 .content {
    width: 100%;
}

.block3 .block-subheader {
    font-family: 'Fontb';
    font-size: 4vw;
    text-align: left;
    margin-left: 10vw;
    margin-bottom: 2vh;
    color: #a2d04c;
}

.block3 p {
    font-family: 'Fonts';
    font-size: 2vw;
    margin-left: 10vw;
    margin-right: 10vw;
}

.block4 {
    background-color: #000000;
    border-radius: 20px 20px 0 0;
    margin-top: -6vh;
    margin-bottom: 0vw;
    min-height: 10vh;
}


.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;
}