/*
*/
::selection {
background-color: black; /* Black background for selected text */
color: white; /* White text for selected text */
}
/* For WebKit browsers (like Chrome and Safari) */
::-moz-selection {
background-color: black; /* Black background for selected text */
color: white; /* White text for selected text */
}
@media only screen and (min-width: 1800px) {
.projImageAC {
width: 824px;
height: 100%;
background-color: rgb(0, 0, 0);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
.skills {
display: inline-block;
font-family: IBM Plex Sans;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px;
position: relative;
z-index: 1; /* In front of the blurred background */
background: none;
border: 1px solid black;
box-sizing: border-box;
margin-bottom: 10px;
margin-right: 10px;
}
.skillContainer {
margin-left: 20px;
margin-top: 20px;
margin-bottom: 5px;
}
.skillWrapper {
width: 400px;
position: relative;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-end;
margin-bottom: 5vw;
}
.gallery {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-bottom: 120px;
}
.footer {
margin-bottom: 320px;
}
.galleryImage {
width: 824px;
height: 490px;
background-color: aqua;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 20px;
margin-right: 20px;
}
/* Pfeil-Container */
.arrow {
width: 50px;
height: 50px;
position: relative;
cursor: pointer;
transform: scale(5.2);
}
/* Hintergrund mit Blur, geclippt auf Pfeilform */
.blur-bg {
position: absolute;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.4);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
z-index: -1;
/* Clipping für die Pfeilform */
clip-path: polygon(30% 10%, 70% 50%, 30% 90%, 40% 90%, 80% 50%, 40% 10%);
}
.blur-bg:hover {
background: rgba(0, 0, 0, 0.5);
}
/* Linker Pfeil spiegeln */
.left .blur-bg {
clip-path: polygon(70% 10%, 30% 50%, 70% 90%, 60% 90%, 20% 50%, 60% 10%);
}
/* Hover-Animation */
/* .arrow:hover {
transform: scale(1.2);
} */
body {
display: flex;
justify-content: flex-start; /* Centers horizontally */
align-items: center; /* Centers vertically */
min-height: 100vh; /* Ensures body takes full viewport height */
margin: 0; /* Remove default body margins */
flex-direction: column; /* Ensures content is in a column */
}
.header {
width: 1680px;
height: 217px;
display: flex;
justify-content: space-between;
}
.projBody {
width: 1680px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.projChapter {
width: 100%;
height: 490px;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 120px;
}
.projText {
width: 824px;
height: 100%;
position: relative;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-left: 20px;
padding-right: 20px;
}
.projImage {
width: 824px;
height: 100%;
background-color: rgb(233, 233, 233);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
.projImage img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.projChapterTitle {
font-family: IBM Plex Sans;
font-size: 20px;
font-style: normal;
font-weight: 500;
margin-bottom: -16px;
}
.projChapterText {
box-sizing: border-box;
font-family: IBM Plex Sans;
font-size: 16px;
font-style: normal;
font-weight: 400;
margin: 0px;
}
.projOverview {
width: 250px;
font-family: IBM Plex Sans;
font-size: 13px;
font-style: normal;
font-weight: 300;
padding: 20px;
position: relative;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-end;
line-height: 14px;
margin-bottom: 2vw;
}
.projOverviewTitle {
font-weight: 400;
}
.cardContainer {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-top: 100px;
width: 1680px;
}
.card {
height: 350px;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
font-family: IBM Plex Sans;
font-size: 18px;
font-style: normal;
font-weight: 500;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.cardCategory {
font-size: 10px;
font-weight: 400;
margin-left: 1vw;
}
.cardTitle {
margin-left: 1vw;
font-size: 16px;
}
.cardText {
margin-top: 50px;
}
.cardImage {
height: 25vw;
overflow: hidden;
object-position: center;
object-fit: cover;
}
.cardLink {
display: block; /* Macht das ganze klickbar */
text-decoration: none; /* Entfernt die Unterstreichung */
color: inherit; /* Behält die normale Schriftfarbe */
overflow: hidden;
}
.cardLinkWrapper {
overflow: hidden;
}
.cardLink:active {
filter: brightness(80%);
filter: blur(5px);
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
}
.content {
width: 1248px;
height: 683px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.spacer {
height: 104px;
}
.bigImage {
width: 614px;
height: 449px;
background-color: azure;
overflow: hidden; /* Hide any overflow from the image */
}
.bigVideo {
width: 614px;
display: flex;
flex-direction: column;
justify-content: center;
background-color: #000;
}
.imageContainer {
width: 931px;
height: 683px;
display: flex;
justify-content: space-between;
flex-direction: column;
}
.portraitImage {
width: 297px;
height: 449px;
background-color: rgb(0, 0, 0);
overflow: hidden; /* Hide any overflow from the image */
object-fit: cover;
display: flex;
flex-direction: row;
justify-content: center;
}
.portraitImageFamily {
height: 100%;
max-width: 45%;
object-fit: cover;
}
.smallImage {
width: 297px;
height: 214px;
background-color: azure;
overflow: hidden; /* Hide any overflow from the image */
}
.longImage {
width: 614px;
height: 214px;
background-color: rgb(23, 23, 23);
overflow: hidden; /* Hide any overflow from the image */
display: flex;
flex-direction: row;
justify-content: center;
}
.imageFirstRow {
display: flex;
flex-direction: row;
justify-content: space-between;
overflow: hidden; /* Hide any overflow from the image */
}
.imageFirstRowFamily {
display: flex;
flex-direction: row;
justify-content: space-between;
overflow: hidden;
height: 100%;
}
.portraitContainer {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.projectDescription {
padding: 5px;
box-sizing: border-box;
width: 297px;
max-height: 683px;
font-family: IBM Plex Sans;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
position: relative;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
}
.projects {
width: 80px;
height: 30px;
flex-shrink: 0;
color: #000;
border: 2px solid black;
text-align: center;
font-family: IBM Plex Sans;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.imageSecondRow {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.about {
font-family: IBM Plex Sans;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin-top: 34px;
position: relative;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
height: 40px;
border: 4px solid black;
box-sizing: border-box;
}
.projectTitle {
font-family: IBM Plex Sans;
font-size: 30px;
font-style: normal;
font-weight: 600;
line-height: 40px;
}
.projectCategory {
color: #000;
font-family: IBM Plex Sans;
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.blurred-div {
position: relative;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
border-radius: 15px; /* Rounded corners */
padding: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
text-align: center;
}
.link-div {
text-decoration: none; /* Remove underline */
color: inherit; /* Inherit text color */
height: 35px;
}
.aboutContent {
display: flex;
justify-content: space-around;
flex-direction: row;
width: 612px;
}
.aboutDescription {
padding: 5px;
box-sizing: border-box;
width: 297px;
font-family: IBM Plex Sans;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
position: relative;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
}
.columnSpacer {
width: 20px;
height: 20px;
}
::selection {
background-color: black; /* Black background for selected text */
color: white; /* White text for selected text */
}
/* For WebKit browsers (like Chrome and Safari) */
::-moz-selection {
background-color: black; /* Black background for selected text */
color: white; /* White text for selected text */
}
.aboutColumn {
display: flex;
flex-direction: column;
width: 297px;
}
.headerProjects {
font-family: IBM Plex Sans;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin-top: 34px;
position: relative;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
height: 40px;
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
/* Styles on hover */
.headerProjects:active {
background: rgba(0, 0, 0, 0.9); /* Change background on hover */
color: #ffffff; /* Change text color on hover */
cursor: pointer; /* Show pointer cursor on hover */
}
.comingSoon {
padding: 5px;
box-sizing: border-box;
font-family: IBM Plex Sans;
font-size: 80px;
font-style: normal;
font-weight: 600;
line-height: normal;
position: relative;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
}
.soon {
display: flex;
flex-direction: column;
justify-content: left;
}
.portraitAbout {
width: 297px;
}
.mobileContent {
display: none;
}
.platzhalter {
height: 200px;
}
.video {
width: 100%;
height: 214px;
display: flex;
justify-content: center;
}
.touchTable {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.youtubeVideo {
width: 824px;
height: 490px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 100px;
}
.video-wrapper {
width: 1680px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1800px) {
/* Styles for screen widths between 480px and 1261px */
body {
display: flex;
justify-content: flex-start; /* Centers horizontally */
align-items: center; /* Centers vertically */
min-height: 100vh; /* Ensures body takes full viewport height */
margin: 0; /* Remove default body margins */
flex-direction: column; /* Ensures content is in a column */
}
.header {
width: 90vw;
height: 140px;
display: flex;
justify-content: space-between;
}
.skills {
display: inline-block;
font-family: IBM Plex Sans;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px;
position: relative;
z-index: 1; /* In front of the blurred background */
background: none;
border: 1px solid black;
box-sizing: border-box;
margin-bottom: 10px;
margin-right: 5px;
}
.skillContainer {
margin-left: 10px;
margin-top: 10px;
}
.skillWrapper {
width: 25vw;
position: relative;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-end;
margin-bottom: 5vw;
}
.card {
width: 30vw;
height: 25vw;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
font-family: IBM Plex Sans;
font-size: 18px;
font-style: normal;
font-weight: 500;
text-decoration: none;
}
.cardContainer {
margin-top: 30px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
overflow: hidden;
}
.cardLink {
display: block; /* Macht das ganze klickbar */
text-decoration: none; /* Entfernt die Unterstreichung */
color: inherit; /* Behält die normale Schriftfarbe */
overflow: hidden;
}
.cardLink:active {
filter: brightness(80%);
filter: blur(5px);
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
}
.cardImage {
width: 100%;
height: 20vw;
overflow: hidden;
object-position: center;
object-fit: cover;
}
.cardCategory {
font-size: 10px;
font-weight: 400;
margin-left: 1vw;
}
.cardTitle {
margin-left: 1vw;
}
.cardLinkWrapper {
overflow: hidden;
}
.projBody {
width: 90vw;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.projChapter {
width: 100%;
height: 27vw;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 120px;
}
.projText {
width: 44.5vw;
height: 100%;
position: relative;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-left: 1vw;
padding-right: 1vw;
}
.projImage {
width: 44.5vw;
height: 100%;
background-color: rgb(234, 234, 234);
}
.projImageAC {
width: 44.5vw;
height: 100%;
background-color: rgb(0, 0, 0);
object-position: center;
}
.youtubeVideo {
width: 44.5vw;
height: 25vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 100px;
}
.video-wrapper {
width: 90vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.projImage img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.projImageAC img {
width: 100%;
object-fit: cover;
object-position: center;
display: block;
background-color: black;
}
.projChapterTitle {
font-family: IBM Plex Sans;
font-size: 1.2vw;
font-style: normal;
font-weight: 500;
margin-bottom: -16px;
}
.projChapterText {
box-sizing: border-box;
font-family: IBM Plex Sans;
font-size: 0.9vw;
line-height: 1.1vw;
font-style: normal;
font-weight: 400;
margin: 0px;
}
.content {
width: 90vw;
display: flex;
flex-direction: row;
justify-content: space-between;
overflow: hidden;
}
.spacer {
height: 5vw;
}
.imageSpacer {
height: 1vw;
width: 1vw;
}
.bigImage {
width: 45vw;
height: 32.42424vw;
background-color: rgb(0, 0, 0);
overflow: hidden; /* Hide any overflow from the image */
}
.imageContainer {
/*width: 931px;*/
max-height: 66.0257787vw;
display: flex;
justify-content: space-between;
flex-direction: column;
}
.portraitImage {
width: 22.5vw;
height: 32.42424vw;
background-color: rgb(0, 0, 0);
overflow: hidden; /* Hide any overflow from the image */
object-fit: cover;
display: flex;
flex-direction: column;
justify-content: center;
}
.portraitImageFamily {
width: 22.5vw;
height: 32.42424vw;
background-color: rgb(0, 0, 0);
overflow: hidden; /* Hide any overflow from the image */
object-fit: cover;
}
.smallImage {
width: 22.5vw;
height: 16.21212vw;
background-color: rgb(0, 0, 0);
overflow: hidden; /* Hide any overflow from the image */
}
* .longImage {
width: 45vw;
height: 16.21212vw;
background-color: azure;
overflow: hidden; /* Hide any overflow from the image */
display: flex;
flex-direction: row;
}
.imageFirstRow {
display: flex;
flex-direction: row;
justify-content: space-between;
overflow: hidden; /* Hide any overflow from the image */
}
.imageFirstRowFamily {
display: flex;
flex-direction: row;
justify-content: space-between;
overflow: hidden;
height: 100%;
}
.imageSecondRow {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.projectDescription {
width: 22.5vw;
padding: 5px;
box-sizing: border-box;
max-height: 683px;
font-family: IBM Plex Sans;
font-size: 1.5vw;
font-style: normal;
font-weight: 400;
line-height: normal;
position: relative;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
margin-left: 1vw;
}
.aboutDescription {
width: 22.5vw;
padding: 5px;
box-sizing: border-box;
font-family: IBM Plex Sans;
font-size: 1.5vw;
font-style: normal;
font-weight: 400;
line-height: normal;
position: relative;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
}
.projects {
width: 80px;
height: 30px;
flex-shrink: 0;
color: #000;
border: 2px solid black;
text-align: center;
font-family: IBM Plex Sans;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.about {
font-family: IBM Plex Sans;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin-top: 34px;
position: relative;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
height: 40px;
border: 4px solid black;
box-sizing: border-box;
}
.projectTitle {
font-family: IBM Plex Sans;
font-size: 2vw;
font-style: normal;
font-weight: 600;
line-height: 2.2vw;
}
.projOverview {
width: 15vw;
font-family: IBM Plex Sans;
font-size: 11px;
font-style: normal;
font-weight: 300;
padding: 1vw;
position: relative;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-end;
line-height: 12px;
margin-bottom: 2vw;
}
.projOverviewTitle {
font-weight: 400;
}
.projectCategory {
color: #000;
font-family: IBM Plex Sans;
font-size: 1vw;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.blurred-div {
position: relative;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
border-radius: 15px; /* Rounded corners */
padding: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
text-align: center;
}
.link-div {
text-decoration: none; /* Remove underline */
color: inherit; /* Inherit text color */
height: 35px;
}
.aboutContent {
display: flex;
justify-content: center;
flex-direction: row;
}
.columnSpacer {
width: 1vw;
height: 1vw;
}
::selection {
background-color: black; /* Black background for selected text */
color: white; /* White text for selected text */
}
/* For WebKit browsers (like Chrome and Safari) */
::-moz-selection {
background-color: black; /* Black background for selected text */
color: white; /* White text for selected text */
}
.aboutColumn {
display: flex;
flex-direction: column;
width: 22.5vw;
}
.headerProjects {
font-family: IBM Plex Sans;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin-top: 34px;
position: relative;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
height: 40px;
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
/* Styles on hover */
.headerProjects:active {
background: rgba(0, 0, 0, 0.9); /* Change background on hover */
color: #ffffff; /* Change text color on hover */
cursor: pointer; /* Show pointer cursor on hover */
}
.comingSoon {
padding: 5px;
box-sizing: border-box;
font-family: IBM Plex Sans;
font-size: 80px;
font-style: normal;
font-weight: 600;
line-height: normal;
position: relative;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
}
.soon {
display: flex;
flex-direction: column;
justify-content: left;
}
.portraitAbout {
width: 22.5vw;
}
.mobileContent {
display: none;
}
.platzhalter {
height: 200px;
}
.video {
width: 22.5vw;
height: 16.21212vw;
background-color: #000;
}
.bigVideo {
width: 45vw;
display: flex;
justify-content: center;
background-color: #000;
}
.touchTable {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.gallery {
display: none; /* Hide the gallery by default */
}
/* Add more specific styles here for elements */
}
@media screen and (min-width: 480px) and (max-width: 1200px) {
body {
display: flex;
justify-content: flex-start; /* Centers horizontally */
align-items: center; /* Centers vertically */
min-height: 100vh; /* Ensures body takes full viewport height */
margin: 0; /* Remove default body margins */
flex-direction: column; /* Ensures content is in a column */
max-width: 100vw;
}
.header {
display: flex;
justify-content: space-between;
width: 90vw;
max-height: 90px;
min-height: 90px;
}
.skills {
display: inline-block;
font-family: IBM Plex Sans;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px;
position: relative;
z-index: 1; /* In front of the blurred background */
background: none;
border: 1px solid black;
box-sizing: border-box;
margin-bottom: 10px;
margin-right: 5px;
}
.skillContainer {
margin-left: 10px;
margin-top: 10px;
}
.skillWrapper {
width: 45vw;
position: relative;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-end;
margin-bottom: 5vw;
}
.projOverview {
width: 25vw;
font-family: IBM Plex Sans;
font-size: 11px;
font-style: normal;
font-weight: 300;
padding: 1vw;
position: relative;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-end;
line-height: 12px;
margin-bottom: 2vw;
}
.projOverviewTitle {
font-weight: 400;
}
.cardLink {
display: block; /* Macht das ganze klickbar */
text-decoration: none; /* Entfernt die Unterstreichung */
color: inherit; /* Behält die normale Schriftfarbe */
overflow: hidden;
}
.cardLink:active {
filter: brightness(80%);
filter: blur(5px);
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
}
.cardLinkWrapper {
overflow: hidden;
}
.cardContainer {
margin-top: 30px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.cardImage {
width: 100%;
height: 20vw;
overflow: hidden;
object-position: center;
object-fit: cover;
overflow: hidden;
}
.card {
width: 30vw;
height: 30vw;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
font-family: IBM Plex Sans;
font-size: 18px;
font-style: normal;
font-weight: 500;
text-decoration: none;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.cardCategory {
font-size: 10px;
font-weight: 400;
margin-left: 1vw;
}
.cardTitle {
margin-left: 1vw;
}
.cardImage {
width: 100%;
overflow: hidden;
}
.projBody {
width: 70vw;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.projChapter {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-bottom: 5vw;
}
.projText {
width: 100%;
height: 100%;
position: relative;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-left: 1vw;
padding-right: 1vw;
}
.projImage {
width: 100%;
}
.projImageAC {
width: 100%;
}
.projImage img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.projImageAC img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.projChapterTitle {
font-family: IBM Plex Sans;
font-size: 18px;
font-style: normal;
font-weight: 500;
margin-bottom: -12px;
}
.projChapterText {
box-sizing: border-box;
font-family: IBM Plex Sans;
font-size: 12px;
line-height: 16px;
font-style: normal;
font-weight: 400;
margin: 0px;
}
.about {
font-family: IBM Plex Sans;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin-top: 34px;
position: relative;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
height: 27px;
border: 2px solid black;
box-sizing: border-box;
}
.youtubeVideo {
width: 100%;
height: 40vw;
margin-bottom: 100px;
}
.headerProjects {
font-family: IBM Plex Sans;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin-top: 34px;
position: relative;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
height: 27px;
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.link-div {
text-decoration: none; /* Remove underline */
color: inherit; /* Inherit text color */
height: 35px;
}
/* Styles on hover */
.headerProjects:active {
background: rgba(0, 0, 0, 0.9); /* Change background on hover */
color: #ffffff; /* Change text color on hover */
cursor: pointer; /* Show pointer cursor on hover */
}
.gallery {
display: none;
}
.portraitAbout {
width: 22.5vw;
}
.projectTitle {
font-weight: 500;
}
.aboutContent {
display: flex;
flex-direction: row;
}
.columnSpacer {
width: 1vw;
}
.aboutDescription {
width: 22.5vw;
padding: 5px;
box-sizing: border-box;
font-family: IBM Plex Sans;
font-size: 1.5vw;
font-style: normal;
font-weight: 400;
line-height: normal;
position: relative;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
}
}
@media screen and (max-width: 480px) {
.skills {
display: inline-block;
font-family: IBM Plex Sans;
font-size: 10px;
font-style: normal;
font-weight: 400;
line-height: 16px;
height: auto;
width: auto;
border: 1px solid black;
box-sizing: border-box;
margin-right: 1vw;
margin-bottom: 1vw;
margin-top: 1vw;
}
.skillContainer {
padding-left: 1vw;
}
.skillWrapper {
width: 90vw;
position: relative;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-end;
margin-bottom: 5vw;
}
.gallery {
display: flex;
align-items: center;
justify-content: center;
gap: 0.7vw;
margin-bottom: 120px;
}
.galleryImage {
width: 90vw;
height: 100%;
background-color: aqua;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 1vw;
margin-right: 1vw;
}
/* Pfeil-Container */
.arrow {
width: 5vw;
height: 5vw;
position: relative;
cursor: pointer;
transform: scale(2.2);
}
/* Hintergrund mit Blur, geclippt auf Pfeilform */
.blur-bg {
position: absolute;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.4);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
z-index: -1;
/* Clipping für die Pfeilform */
clip-path: polygon(20% 10%, 70% 50%, 20% 90%, 50% 90%, 100% 50%, 50% 10%);
}
.blur-bg:hover {
background: rgba(0, 0, 0, 0.5);
}
/* Linker Pfeil spiegeln */
.left .blur-bg {
clip-path: polygon(80% 10%, 30% 50%, 80% 90%, 50% 90%, 0% 50%, 50% 10%);
}
body {
display: flex;
justify-content: flex-start; /* Centers horizontally */
align-items: center; /* Centers vertically */
min-height: 100vh; /* Ensures body takes full viewport height */
margin: 0; /* Remove default body margins */
flex-direction: column; /* Ensures content is in a column */
max-width: 100vw;
}
.header {
display: flex;
justify-content: space-between;
width: 90vw;
margin-top: 5vw;
margin-bottom: 10vw;
}
.cardContainer {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 20vw;
margin-bottom: 20vw;
}
.card {
width: 45vw;
height: 50vw;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
font-family: IBM Plex Sans;
font-size: 18px;
font-style: normal;
font-weight: 500;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.cardCategory {
font-size: 10px;
font-weight: 400;
margin-left: 1vw;
}
.cardTitle {
margin-left: 1vw;
font-size: 16px;
}
.cardImage {
height: 25vw;
overflow: hidden;
object-position: center;
object-fit: cover;
}
.cardLink {
display: block; /* Macht das ganze klickbar */
text-decoration: none; /* Entfernt die Unterstreichung */
color: inherit; /* Behält die normale Schriftfarbe */
overflow: hidden;
}
.cardLinkWrapper {
overflow: hidden;
}
.cardLink:active {
filter: brightness(80%);
filter: blur(5px);
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
}
.projOverview {
width: 45vw;
font-family: IBM Plex Sans;
font-size: 11px;
font-style: normal;
font-weight: 300;
padding: 1vw;
position: relative;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-end;
line-height: 12px;
margin-bottom: 5vw;
}
.projOverviewTitle {
font-weight: 400;
}
.projBody {
width: 90vw;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.projChapter {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-bottom: 10vw;
}
.projText {
width: 90vw;
position: relative;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-left: 1vw;
padding-right: 1vw;
padding-top: 1vw;
}
.projImage {
width: 90vw;
height: 100%;
background-color: rgba(0, 255, 255, 0);
}
.projImageAC {
width: 90vw;
height: 100%;
background-color: rgba(0, 255, 255, 0);
}
.projImage img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.projImageAC img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.projChapterTitle {
font-family: IBM Plex Sans;
font-size: 18px;
font-style: normal;
font-weight: 500;
margin-bottom: -12px;
}
.projChapterText {
box-sizing: border-box;
font-family: IBM Plex Sans;
font-size: 12px;
line-height: 16px;
font-style: normal;
font-weight: 400;
margin: 0px;
}
.content {
width: 90vw;
display: none;
flex-direction: column;
justify-content: flex-start;
max-height: none;
height: auto;
}
.spacer {
display: none;
}
.bigImage {
width: 90vw;
background-color: azure;
border: none;
overflow: hidden; /* Hide any overflow from the image */
margin-bottom: none;
height: auto;
}
.imageContainer {
display: flex;
flex-direction: column;
width: 90vw;
max-height: none;
}
.portraitImage {
width: 90vw;
background-color: azure;
border: 1px solid black;
margin-bottom: 20px;
}
.smallImage {
width: 90vw;
background-color: azure;
border: 1px solid black;
margin-bottom: 20px;
}
.longImage {
width: 90vw;
background-color: azure;
border: 1px solid black;
margin-bottom: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.imageFirstRow {
display: flex;
flex-direction: column;
width: 90vw;
}
.projectDescription {
padding: 5px;
box-sizing: border-box;
width: 90vw;
font-family: IBM Plex Sans;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
z-index: 0; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
max-height: none;
}
.projects {
width: 80px;
height: 20px;
flex-shrink: 0;
color: #000;
border: 2px solid black;
text-align: center;
font-family: IBM Plex Sans;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.about {
box-sizing: border-box;
font-family: IBM Plex Sans;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
position: relative;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
height: 25px;
border: 2px solid black;
}
.projectTitle {
font-family: IBM Plex Sans;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.projectCategory {
color: #000;
font-family: IBM Plex Sans;
font-size: 10px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.blurred-div {
position: relative;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
border-radius: 15px; /* Rounded corners */
padding: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
text-align: center;
}
.link-div {
text-decoration: none; /* Remove underline */
color: inherit; /* Inherit text color */
}
.aboutContent {
display: flex;
justify-content: space-around;
flex-direction: column;
}
.columnSpacer {
width: 20px;
height: 5vw;
}
::selection {
background-color: black; /* Black background for selected text */
color: white; /* White text for selected text */
}
/* For WebKit browsers (like Chrome and Safari) */
::-moz-selection {
background-color: black; /* Black background for selected text */
color: white; /* White text for selected text */
}
.aboutColumn {
display: flex;
flex-direction: column;
width: 90vw;
}
.aboutDescription {
width: 90vw;
padding: 2%;
font-family: IBM Plex Sans;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-top: 34px;
position: relative;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
}
.headerProjects {
font-family: IBM Plex Sans;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 24px;
position: relative;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
height: 25px;
}
.comingSoon {
padding: 5px;
box-sizing: border-box;
font-family: IBM Plex Sans;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: normal;
position: relative;
z-index: 1; /* In front of the blurred background */
background: rgba(
255,
255,
255,
0.4
); /* White background with some transparency */
-webkit-backdrop-filter: blur(
10px
); /* Add this line first, it fixes blur for Safari*/
backdrop-filter: blur(10px); /* Apply blur effect */
}
.soon {
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 10vw;
}
.portraitAbout {
width: 45vw;
}
.mobileContent {
width: 90vw;
display: flex;
flex-direction: column;
}
.mobileSpacer {
height: 10vw;
}
.platzhalter {
margin-top: 5vw;
}
.youtubeVideo {
width: 90vw;
height: 50vw;
margin-bottom: 100px;
}
}